Writing Complex Classes Using @apply and Postcss-Nesting with TailwindCSS
Tags: tailwindcss, css, webdev, postcss
Published: 2023-02-24 11:56:31

When we look at the examples where TailwindCSS is used, we can see that the code written in inline has low readability and is not usable for big projects. In such cases, we can avoid this problem by using the existing TailwindCSS classes with @apply in our own custom CSS classes. Let’s try to clarify the issue by going through a simple button component.

![Example button component](https://cdn-images-1.medium.com/max/2000/1*-3Beu2ErN9p5AooWWZrSZA.png)

![](https://cdn-images-1.medium.com/max/3420/1*NWYZn17saSIby_liEqHb0Q.png)

In the example above, when we style our button by typing the TailwindCSS classes in inline, we can see that the code is not very readable. In this example, the higher the number of codes, the lower the readability will be. Let’s refactor the above example using @apply.

![btn classes with @apply](https://cdn-images-1.medium.com/max/3560/1*Je0dshif8Wa8lO2uK3-5Jw.png)

![Use of btn classes](https://cdn-images-1.medium.com/max/2024/1*21RCI9QbgAjJd-LDPC6mmw.png)

As you can see, we have obtained a more readable and manageable code base. While specifying CSS class names, we can proceed by following the BEM standard and also by writing nested custom classes as in SCSS. However, since PostCSS does not support nested classes by default, we will need to install a PostCSS plugin and move forward.

Since TailwindCSS is a PostCSS plugin, we can use it with Sass, Less, Stylus or other preprocessors just like any other PostCSS plugin like Autoprefixer. However, since we will write very little CSS in a TailwindCSS project (perhaps not at all), we don’t have to use a preprocessor. In fact, it would be better to work with PostCSS only, unless it is mandatory. The advantages of developing projects using only PostCSS and its plugins are:

* Since your CSS doesn’t have to be parsed and processed by multiple tools, your CSS will compile much quicker using only PostCSS.

* Because Tailwind adds some new non-standard keywords to CSS (like @tailwind, @apply, theme(), etc.), you often have to write your CSS in annoying, unintuitive ways to get a preprocessor to give you the expected output. Working exclusively with PostCSS avoids this.

Considering the above items, it will be sufficient for us to develop only with PostCSS unless we have to. If necessary, we can install PostCSS plugins and continue to develop. You can review the PostCSS GitHub repository for available [PostCSS plugins](https://github.com/postcss/postcss/blob/main/docs/plugins.md).

Since we only want to move forward with PostCSS, we need to use a PostCSS plugin that allows us to write nested classes. For this, we have two alternatives, [postcss-nested](https://github.com/postcss/postcss-nested) and [postcss-nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting). In this article we will use the postcss-nesting plugin as it is recommended in the TailwindCSS document. Installation and more detailed information can be found [here](https://tailwindcss.com/docs/using-with-preprocessors#nesting).

Let’s try to move forward through an example again. Let’s create the following buttons using TailwindCSS helper classes.

![button examples](https://cdn-images-1.medium.com/max/2000/1*L08oZyOA3TwgCT41hcIWLQ.gif)

The codes we will write to create the above buttons will be as follows.

![](https://cdn-images-1.medium.com/max/5748/1*VC4uoorm5eeZYQsNSq522Q.png)

In the above usage, since editing or developing the buttons would be very costly for us, let’s try to edit this code together now. We will now be able to use our CSS codes by nesting them with the Postcss-Nesting plugin. Now let’s edit our code and see how it looks.

![](https://cdn-images-1.medium.com/max/5084/1*b-DfSWDWDni1VrJ5-v7uAA.png)

We can see that the newly created CSS classes are more readable and organized. Now it will be much easier to manage and develop our button components.

![](https://cdn-images-1.medium.com/max/3568/1*Hy3H2zjGTMMc3a8ZfPFfBg.png)

In the example above, we can edit the “focus” and “hover” parts to increase the readability of the code. Here, let’s rewrite our code by enclosing the “hover” and “focus” classes in separate blocks.

![](https://cdn-images-1.medium.com/max/3660/1*WxIEIA20V4deymgeW06opA.png)

I think we have achieved a better code base with our recent edits. Proceeding in this way will both make the code more readable and make a new development much less costly. In addition, when working as a team, it will be much easier to make code reviews and find possible errors.

### **References:**

* [https://tailwindcss.com/docs/functions-and-directives#apply](https://tailwindcss.com/docs/functions-and-directives#apply)

* [https://tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus](https://tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus)

* [https://tailwindcss.com/docs/using-with-preprocessors#nesting](https://tailwindcss.com/docs/using-with-preprocessors#nesting)

* [https://github.com/csstools/postcss-nesting](https://github.com/csstools/postcss-nesting)

* [https://tailwindcss.com/docs/using-with-preprocessors#using-post-css-as-your-preprocessor](https://tailwindcss.com/docs/using-with-preprocessors#using-post-css-as-your-preprocessor)