"white-bg" then becomes a blue background that's called white...

To be fair, you can do that with SASS variables too and is not unique to Tailwind.

I've not seen people encouraging variables called $white, because that's pretty short sighted. It seems to be encourages with utility css

That’s incorrect. What your missing is that in the config file you define a new color; say ‘rose’ and then the framework auto provides bg-rose, text-rose, border-rose, cutting duplication and bringing consistency.

I think the big shift started to happen when people started to say, let’s treat CSS like code and what would we expect of good code, and then all of these CSS Sacred Cows were then seen in a new light. The biggest of them all for me was ‘naming things are hard’, traditional CSS implies naming your classes is easy, and for a once off example it is always easy, but that approach is a lifetime commmitmnet to generating names on names just to add styles and this adds a naming things complexity burden that until recently has just been a generally unacknowleged invisible cost.