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.
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.
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.
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 and 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.
Let’s try to move forward through an example again. Let’s create the following buttons using TailwindCSS helper classes.
The codes we will write to create the above buttons will be as follows.
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.
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.
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.
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.
Top comments (2)
I think you are right about the part with the readability in some way, however a big advantage of the bulky tailwindcss class list is that you can always directly understand what css properties are applied to a html element.
Often I think you are better off keeping the standard tailwindcss conventions and use them as is. Also @adamwathan has already posted in a tweet that you should actually never use @apply. 😂
We can also directly understand which css properties is used in the 'apply'. All we have to do is go to the relevant class and look. When 'apply' is not used, related styles are rather difficult to edit. Also, when working as a team, not advancing with 'apply' complicates things. It seems pretty ugly to have long css classes in html.
The above are my personal opinion. You can choose not to use 'apply'. While developing a big e-commerce web project, we moved forward with 'apply' and we were very pleased with it. Since we are satisfied, I wanted to write such an article. I respect every choice. :)