The problem that I have with Tailwind is that it's not that different than using inlined styles but adds a lot of bloat without a path to clean abstractions.
It's similar to inline styles in one way but different in about five or six ways. Putting that to the side, what do you mean by clean abstractions?
With Tailwind, all of your abstractions are explicit; the styles are right there on your component, with a more or less 1:1 correspondence to CSS properties. Everything does what it says it does.
In traditional CSS methodologies, the abstractions are implicit but hidden. The relationships between the stylesheet and markup are still there, but they cannot be understood without knowing both structures intimately.
Which of these is cleaner, and for what purpose? At the end of the day, code is not there to be looked at, it's meant to be deployed and maintained.
The limitation with inline styles is that the moment you need a single variation (hover, responsive, dark mode) you’re forced to move the styles somewhere else. Tailwind solves that, and a bunch of other stuff.
