[isleyaardvark]

I'm a big fan of the Tailwind approach, and I'll lay out some aspects of the mental model, or advantages of Tailwind that led me to it.

Here are the big problems the Tailwind approach solves for me:

1. No debugging of cascade/inheritance bugs. Tailwind almost entirely discourages use of the cascade and eliminates and entire class of bugs, possibly the largest and most difficult class of bugs to deal with.

2. Less complexity in css files. Naming the differences between the styles is standardized, so there's less mental overhead to learn, you're not reinventing the wheel between projects or within a single project.

As a bonus that leads to: Less bloat in css files. There is going to be less in there because Tailwind already sets up essentially the minimum number of classes needed to get any visual effect. There's much less css code written by devs to search through, it'll have less entropy.

The big change in mental model when working with Tailwind is that the styling is done in the html, not in the css. This is good! You end up being able to determine where the styles are coming from just from the source code without diving into dev tools. You can tell, at a quick glance, why an element looks the way it does, and can easily figure out how to change it. Not only that, but you can be confident any changes will not have side-effects on other elements throughout random parts of the codebase. Removing or adding a class will only affect the element you want to change.

My only concern when I went down that route (besides the common criticism of how it's ugly) is how difficult it would be to do something like change the appearance of every instance of a certain type of button. I can only say I have not run into a problem with that. And even if I did it has not come up often at all, whereas the problems that approach solved has made development significantly easier.