I think it's a little more subtle than you're saying.

When you use inline styles for everything, you're making the initial development a little faster by making future maintenance and changes a lot harder. (Like, if you decide headings should be italic instead of bold, that's a one-liner fix if you're using CSS properly, but if you're using inline styles you have to individually fix every heading on every page.) So most people have internalized "don't use inline styles for everything" as a general rule.

But if you don't actually care about that sort of future maintenance (or you're charging hourly for it), then using inline styles for everything looks really attractive to you! But you can't literally use inline styles for everything because even non-experts know that using inline styles for everything is bad for future maintenance. So instead you pull in Tailwind so you can say you're using a CSS framework.

I think people that use utility CSS like this will never maintain anything they create. They'll just throw everything away and start over with another framework.

I think that the idea of using well designed CSS rules and classes basically just turned out to not be very useful in the real world (one discussion of the issues: https://speakerdeck.com/vjeux/react-css-in-js)

Or each of your headings is a React/Vue/Web/Polymer/etc component and that's a single edit. Also, sed.

And then the components get bloated to handle logic differences between views of the component, so you went from bloated CSS to bloated components and the need for everything to be a component in order to share a single look and feel.

Once the components get too bloated, you start forking them, and you are back to each page looking subtly different.

Sure, no magic bullet.

Sure. And in that case, just use inline styles (or CSS-in-JS, or whatever else you prefer).

Sure. I view tailwind as a moderate abstraction over inline styles.

"[...] you have to individually fix every heading on every page."

You should have utilized a template engine in the first place. So you'd only have to change the layout/partial/component that is responsible for rendering the heading. Moreover, you could also have extracted the component with css by creating a .title class and using @apply.

But can you realistically change the design centrally of something built only with utility css classes? If the class of an element doesn’t specify its semantics you cannot properly target it in a redesign without updating the markup.

I've never succeeded in that with semantic css either

it would still be a one line fix if you are building with components

Tailwind isn’t the first to take the utility class approach. Atomic CSS was an early implementation of the idea: http://acss.io

It doesn't have to be first to be bad. They can both be bad.

It's not necessarily bad. There are pros and cons to all css approaches. Atomic classes definitely have their fans. It's more a question of which pros and cons matter to you.

uikit as well (the CSS framework, not the Apple thing)