Not Tailwind

I've been using Tailwind CSS, not intensively, but enough to have grown my dislike for it; strong enough to write this post.

It's really not my thing. Here is why:

• Cluttered markup: Utility classes pile up on every element, burying the actual HTML structure in noise.
• Cryptic class names: I spend more time deciphering class names than it would take to write the CSS myself.
• Inflexible class composition: In conditionals, you have to write isPrimary ? 'bg-blue-500 text-white' : 'bg-gray-200 text-black' instead of toggling one meaningful class or composing parts.
• Awkward child selectors: Targeting nested elements are possible, but the syntax (like [&>button]:text-blue-500 or [&>button:hover]:text-blue-500) is so unpleasant.
• Unnecessary build complexity: Vanilla CSS works out of the box. Tailwind requires PostCSS, a config file, and purging setup just to get started.
• Broken separation of concerns: HTML should define structure and class names, CSS should define appearance. Tailwind mixes them, making markup dictate styling directly.
• Hidden CSS knowledge gap: Tailwind can be used as a crutch, covering up the lack of CSS understanding. But that gap shows up fast when you need to do anything custom.

Overall, Tailwind feels like a wrong abstraction for me. Most of what it does can be achieved with a few lines of CSS (or even a one-liner). I really don't see what problem it's solving, aside from adding more to learn and maintain.

But anyway, to each their own.