TLDR: Other styling solutions split styles and markup (requiring frequent context switching) and force you to come up with names (the hardest problem in computer science).
All styling solutions have tradeoffs, and I like the tradeoffs Tailwind makes.
Tradeoffs
-
It colocates styles with the element I'm styling, which bloats the markup.
-
I don't need to come up with class names, but I do have to remember new names for CSS properties I already know.
-
Instead of choosing from infinite numbers or colors, I can pick
sm,md,lg, andred-500, but Tailwind classes aren't exhaustive and sometimes I need to write custom classes or straight up raw CSS.
So much gained for so little. It's nearly a perfect solution.
One true drawback
Unfortunately, classes don't compose nicely. It seems like common practice to merge classes at runtime 🤮, but with great effort, this can be done using specificity, data attributes, and CSS variables instead.
Still, nothing else comes close. Tailwind UnoCSS with Tailwind preset it is.
A few more thoughts.
-
UnoCSS is a better implementation of Tailwind for JS projects, and it also has a better VSCode extension.
- You can group variants with parentheses like
hover:(bg-red-600 text-white font-bold) - The extension underlines valid classes
- You can group variants with parentheses like
-
AI is bad at styling so it's not important that it's best at Tailwind.
-
I'm not convinced Tailwind classes meaningfully affect load times. Either way, CSS in JS (derogatory) probably has the best case for minimizing bundle size. See Facebook's StyleX.
-
If I read another long ass essay about Tailwind from a non-frontend dev.