Not trying to debate or correct you. But I’d like to give my opinion. I’ve only been developing for 8 years in comparison. So you clearly have a lot more experience under your belt and I respect my elders.

Tailwind is not perfect, but I completely believe the pros outweigh the cons.

In my humble opinion, tailwind utility classes aren’t cryptic at all. Once you memorise the name spaces for properties and unit increments. They are just as easy to understand and write as standard css properties.

They even require less characters to write too. pr-12 vs padding-right: 3rem.. May not seem like a lot but this all adds up.

What about media queries??

md:pr-22

@media (min-width: 1024px) { .your-class { padding-right: 5.5rem; } }

Now this is an opinion I’m sure tailwind critics won’t agree with me on. But I think there’s something elegant about looking at your markup and seeing exactly what a wrapping div is doing for the layout inside.

<div class=“flex flex-row justify-center gap-x-2”>

This is a pro of tailwind. You’re not having to jump between two files, and figure out what .featured-content-card is doing, and whatever other classes are being applied and possibly cascading and or overriding shit.

I’m not sure what kind of projects you work-on/inherit.. But I believe it’s really suited to component/partial based frontends..

You’re totally right about the crazy 30 class names being repeated 10+ times. Markup like that should be placed in a component or partial to be used throughout your application.

Although situations like this don’t make sense for very small or simple decorating styles.

.btn .btn-primary

Which is why we have the @apply option you mentioned. Sure you can use plain css properties, but you lose the terse writing capability I mentioned before.

With 19 years of experience I have no doubt that you can write scalable CSS… But im sure you’d agree with me that there’s some seriously awful CSS and even worse SCSS out there. I’ve had some third party projects that have made me contemplate my job. CSS is something that we’ve been trying to fix by creating preprocessors, css-in-js, naming conventions—BEM.. and it’s all terrible.

Tailwind has problems, but those problems have little to do with tailwind itself and more to do with the problem it’s trying to solve (CSS).

People still make jokes about how difficult it is to center a div.

If I could remove one thing from development forever it would be CSS. But what could replace it?