TailwindCSS is a compiled type of atomic class CSS library, about the pros and cons of atomic class, TailwindCSS author of this article is very clear:

CSS Utility Classes and “Separation of Concerns

In fact, if you have actual engineering experience, you will agree with this article.

With Tailwind CSS, we can write the UI very quickly, and write pseudo classes and media queries very easily, with 1/5 to 1/10 of the code of handwritten CSS, which is a very good improvement.

Tailwind CSS is great in general, and I highly recommend using it in new projects, but there are a few issues with it, mostly compilation and culling:

Note that the following issues exist, but they do not obscure the advantages of Tailwind

  1. If the design is uncertain, the combination of possible atomic classes with media queries and pseudo-classes will be about 6MB CSS size. Tailwind recommends using tools such as PurgeCSS to conduct regular matching before the release of the code to eliminate unused atomic classes. Finally, you can reduce the CSS size from 6MB to 20kb-50 KB.
  2. Disadvantage 2, there is no guarantee that the production and development environments are 100% identical. Since Purge CSS is expensive, it is common practice to preview while developing, so the usual practice is to use a complete CSS during development and compile to eliminate CSS when releasing. If a variable is used in a project, the CSS will not match, resulting in a discrepancy between the production and development environment, which may not be detected without checking.
  3. Disadvantage 3: it is not convenient to use out-of-custom values, for example if the designer requires the button to be shifted 3 pixels to the right, it is still necessary to write CSS separately from Tailwind’s atomic classes. This goes against the official slogan of Tailwind CSS: you don’t need to leave HTML to develop modern Web applications;
  4. Disadvantage 4, the HTML code has a sheet of atomic classes, the solution is to use @apply to create a custom combination of atomic classes, and then recompile. Frequent recompilation during development can be inefficient, and the purpose of atomic classes is to improve development efficiency. Another official solution is to use components from modern frameworks like React and Vue whenever possible, but this could easily lead to a lot of one-style, one-label components. It’s less efficient than defining CSS directly;
  5. Disadvantage 5, cannot use CSS selector functions, such as child selector, descendant selector, sibling selector; The absence of such functionality means that classes need to be written for each element;
  6. Disadvantage 6: TailwindCSS also has CSS pollution problems, which makes TailwindCSS not suitable for common component library development, but more suitable for business development. For example, if m-2 is designed for 1REM in a common component, but Tailwind CSS is also used in the business code and M-2 is designed for 1.5REM, then M-2 suffers from CSS contamination.
  7. Disadvantage 7: You need to remember hundreds of keywords. Tailwind CSS has a large number of new words that are separate from the original vocabulary of CSS stylesheets, and each word has different levels of values that combine hundreds of new keywords. The official solution is to provide VSCode, WebStorm and other plug-ins
  8. Drawback 8: Tailwind is always updated, and the names of atomic classes will be changed so that you will need to update your vocabulary all the time, such as the 2.0 change:

I’m ashamed of these flaws (I’ll start selling my own solutions later), but they exist, and that’s why I wrote Flavor CSS:

Access: Flavor CSS runtime atomic class

Flavor CSS is one of the 8 problems I encountered with Tailwind CSS, but I really like the development experience of Tailwind CSS, so I designed the atomic class library at runtime. Please check out this library to see how to solve the above problems.