I think that’s what people are talking about when they say they don’t see the benefit.

There’s already a style attribute on every html element that does exactly that, and works fine in components.

“There must be something more…?” But it turns out there’s not. Just shorthand class names to save you having to type padding-left:4px

lg:dark:hover:bg-red-500

> on large screens

> in dark mode

> when hovering

> bg should be red-500

The above is an unrealistic example, but, you can't achieve that with the style attribute. You'd have to go into your stylesheet and put this inside the @media query for the right screen size + dark mode, with :hover, etc.

And you'd still need to have a class on the element (how else are you going to target that element)?

And then 6 months later you get a ticket to change it to blue instead. You open up the HTML, you look at the class of the element to remind yourself of what it's called, then you go to the CSS looking for that class, and then you make the change. Did you affect any other elements? Was that class unique? Do you know or do you just hope? Eh just add a new rule at the bottom of the file with !important and raise a PR, you've got other tickets to work on. I've seen that done countless times working in teams over the past 20 years - over a long enough timeline stylesheets all tend to end up a mess of overrides like that.

If you just work on your own, that's certainly a different discussion. I'd say Tailwind is still useful, but Tailwind's value really goes up the bigger the team you're working with. You do away with all those !important's and all those random class names and class naming style guide discussions.

I used to look at Tailwind and think "ew we were supposed to do CSS separate from HTML why are we just throwing styles back in the HTML". Then I was forced to use it, and I understood why people liked it. It just makes everything easier.