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
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.
