Until a few years ago, when it came to front-end styling, it was common practice to come up with unique class names according to naming conventions such as BEM, and to create designs by going back and forth to CSS files. But now, that landscape has completely changed with “Tailwind CSS”. Why has the utility-first concept attracted so many developers?
This time, for those who are considering implementing Tailwind CSS, we will thoroughly analyze its advantages and disadvantages.
Benefit 1: Free from deep worries about class names
“What should we name the wrapper element for this button… button-container? action-wrapper?”
Have you ever had your time wasted by such useless thoughts? Tailwind adds short pre-defined utility classes (flex, p-4, text-center, etc.) directly to the HTML, completely eliminating the mental burden of naming classes.
Benefit 2: Eliminating context switches
In conventional development, it was inevitable to go back and forth between writing HTML (or JSX), opening a CSS file, and returning to HTML. Tailwind writes styles directly in markup, reducing eye movements and file navigation, allowing you to assemble components without interrupting your thinking. This accelerates development speed more than you can imagine.
Disadvantage 1: HTML looks “dirty”
A common criticism of Tailwind is that the HTML class attributes become too long, reducing readability. It’s true that a complex component has dozens of classes, and it can be difficult to understand what’s going on at first glance. To avoid this, frameworks such as React and Vue need to be divided into component units and have a design that prevents a single file from becoming too large.
Disadvantage 2: Difficult to acquire unique CSS knowledge
Because we rely too much on convenient utility classes, we tend to neglect understanding the underlying raw CSS (Flexbox specifications, Grid mechanisms, etc.). If you don’t understand and use Tailwind’s class names to which CSS properties they are mapped to, you may get stuck when creating your own complex animations and layouts.
Project suitability diagnosis
So, what kind of projects is Tailwind CSS suitable for? In conclusion, any project that uses a component-oriented modern framework (such as React/Next.js/Vue/Nuxt) will almost certainly benefit. On the other hand, if you have a static site built using only good old HTML files, or an environment where there is no concept of reusing components, the result may simply be longer code.
Understand the strengths and weaknesses and use this powerful weapon in the right place.