Tailwind is a utility-first CSS framework that gained a lot of popularity. But just like with every framework and library, it comes with good and bad sides. In this post, I will cover a few good and bad parts of it.
Utility-first?
If you check Tailwind pages, it will say it is a utility-first CSS framework. But what does that mean? Tailwind comes with many useful classes replacing a CSS rule. Rules like margin, padding, and font size, and for each there is a class. If you compare it to many other CSS frameworks, most of them have classes like accordion, content card, and similar that come with a defined set of rules for them. In this case, you use these utility classes to build your components.
Defined colors and sizes
In the above, I mentioned that there are classes for each CSS rule. And there are separate classes for different colors, padding, margin, font sizes, and all other rules. This may seem a bit limiting, but it helps you with the starting point for your project and to keep consistency in color and sizes across the project.
Configurable classes
In some situations, you may want to make some spacing with some specific values. Some of the tailwind classes do support that by placing value in the square brackets. As an example, we can look at the padding class. For padding, you can use p- class, where p-1 class means padding of 0.25 rem. But if you want to have 5px padding, you could use p-[5px].
Config file
All the classes have default values. But you can also override them in the tailwind config file. If you don’t like the shade of the red-500 color or the padding amount of the p-1 class, this is where you could override it and still keep consistency across the project.
Remembering names
Now for some bad sides. The first one is remembering all the names. There are many plugins for IDEs that give autocomplete, and most of the classes are quite intuitive. But when you first start, I find that there is a lot of time spent looking at the documentation.
Class name inconsistencies
Another bad side is class name inconsistencies. Often they use full rule names, but sometimes there is some short version. Like for example, flex-1 is the flex rule with the value 1. But for the padding, it is used p- and then for font size, it uses classes like text-md.
Lots of classes
Utility classes are useful, but when you are building a component that has few rules, suddenly your class attribute becomes huge. Yes your CSS file is smaller, but now you might have over ten classes on some elements.
Utilities and components
Tailwind does have a way to tackle too many class issues. And those would be utilities and components. If you have some repeated set of rules, you could make a new class under utilities, and apply other classes to it. Then you could use that class in your HTML.
Conclusion
Tailwind is an amazing CSS framework, that can help you build beautiful applications very fast and brings many more good features than listed above. But it is important to know what to expect before getting into it, and I hope this post helps you with it.
For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.