Working with Tailwind CSS every day for 2 years

I hate Tailwind with the passion of a million suns. It's loved by novices and those who don't know what they're doing, almost exclusively. They claim they know CSS, but will fail after any casual test.

The best arguments against it:

1. Spamming utility classes causes horrible git commits, git history, git difference checks;

2. Conflicting utility classes aren't clear, and sometimes the order cannot be trusted;

3. Replacing `p-4` with `p-4` will require you to replace its occurrence all over your app, sometimes affecting thousands of matches. And since there is no context to it, it'll be hard to JUST replace them where you would want them to.

Vanilla CSS using `:root` declaration, a fixed base size (using `rem` and `em`), CSS variables and `calc()` are SO powerful.

In almost every single use case, using vanilla CSS or SCSS is far superior. For React projects (and Vue.js, and Svelte, and Angular), I'd recommend anyone to just use (S)CSS modules. It's so elegant and doesn't come with any of the disadvantages.

Except maybe a slightly larger package size. Minimally so. Your framework of choice should be (or allow) code splitting to take place. And a few bytes more or less aren't going to make or break most websites.

Same feeling here.

In Tailwind, I'll use a `p-3` or a `.flex.items-center` all day, but making a nice button is such a slog, since I'm coming from a Vuetify background.

Vuetify also has the same layout classes as Tailwind, like `pa-3` and `.d-flex.align-center`

I use Vuetify + Pug (instead of raw HTML templates), so I get to make buttons like this:

    v-btn(outlined color="accent" @click="handleClick") Do Stuff

or a Data Table with, say, a custom-formatted UPC column, like this:

    v-data-table(:loading="loading", :items="items", :headers="headers", :items-per-page="50" dense).my-3
         template(v-slot:item.upc="{ item }")
              span {{formatUpc(item.upc)}}

(I like to separate attributes with commas, which is valid pug but invalid HTML)

Sure, I could get something like TailwindUI, but their components are walls of divs and classes that each take half an hour to load into my head to visualize what's creating all the combos of states (regular, hover, focus).

So my Vuetify + Pug approach works great for greenfield projects that I create.

But if I'm downloading a nice template for a side project, say from Cruip.com, it's not like they're going to use the same build chain as me, and they do have to settle on a standard CSS library, so they default to Tailwind (just like 5~10 years ago they would have defaulted to Bootstrap).

Tailwind certainly has some advantages and nice features, but the length of the class string when you need something common but complex like a custom styled checkbox including focus states, various hovers, media-queries, etc gets absurd and far more difficult to read, debug, and update.

I think one of the primary reasons Tailwind is so popular is how poorly React deals with classes and styles. In other frameworks/libraries like Vue/Svelte CSS is treated as a first-class citizen with a lot of nice quality-of-life improvements that React teams are forced to implement using awful CSS-in-JS solutions or with Tailwind. You get single-file-components, scoped styles, etc, all out of the box and without having to learn a new abstraction.

If the dev world wasn't a React monoculture (and more devs appreciated CSS deeply) I think you would see significantly less interest in Tailwind.

no problem. I work every day with CSS ... you can't know every new feature unless you have at least one use case to get know the new feature. The "old" technics are still working but if you want the benefits of new technics like text-decoration-skip-ink you have to use the new ones. So as long as you do not run into such problems like "skip-ink" you do not have to learn ne new ones.

If everyone using a tool is using it wrong, it’s a poorly designed tool