> Tailwind and CSS in JS libraries that pre-compile to Atomic CSS solve the problems of bloated CSS files full of duplicated rules. > With Atomic CSS, the grow

> Tailwind and CSS in JS libraries that pre-compile to Atomic CSS solve the problems of bloated CSS files full of duplicated rules. > With Atomic CSS, the growth of CSS is tied to the number of unique styles used, not the amount of features developers are shipping. > For example, it’s common to reuse certain properties like flex everywhere. Rather than have these duplicated in stylesheets under different class names, we only pay that cost once. This is true for each property/value combination. This is true in theory and when you stick to the very basic stateless utility classes. Check the CSS of any larger site using Tailwind and search for a CSS rule, you will see things like .opacity-100 { opacity:1 } .hover\:opacity-100:hover { opacity:1 } .group\:focus-within .group-focus-within\:opacity-100 { opacity:1 } and that's not counting media queries, dark mode, etc. In practice, the global CSS file that you load for every single page does grow for every feature you ship, since you use more of Tailwind.