I think the most satisfying part for is the elimination of the constant context switch between my jsx/html and css file. We use CSS modules and it drives me crazy to keep switching back and forth to add styles. Plus is think <div className="mx-12 lg:mx-24 md:mx-12 bg:white dark-mode-bg:black /> looks just outright readable and tells me everything i need to know about that div in one glance. I for one absolutely love it, but have team members little on the backfoot. Preferences i guess

See this is the thing that gets me though.

bg:white is exactly the problem. What if I want to change all my white backgrounds to #FCFCFC? I've got the option of going through and updating all my components individually or updating bg:white to be a non-white value.

Everything is generated through a config file which you can completely customise. So you could literally change the colour of bg-white if you wanted to.

It's part of the selling point, that config file becomes your design system. They provide a decent one but you are free to overhaul it as you see fit. It works really well.

If you were building a themeable website, then you'd not be using bg:white; instead you'd use something like bg:main or something similar with a semantic meaning. This kind of customization is one of Tailwind's core workflow.

This is a trivial, supported use case with Tailwind.

Read the docs for a few minutes and try it out, you may come to different conclusions than your current assumptions.

The emperor has no clothes.