I don't get why you wouldn't use LESS mixins or SASS class extensions (or whatever the modern equivalent of that is) instead of inlining each utility class directly into each div.
Having a name for each element in your markup is really powerful and useful, and it seems like the Tailwind approach exists specifically to avoid having to name things.
I think the thought process is that if you are using Tailwind it's probably with a component based system like React. So you don't need a button "name" because you have a button component. You re-use components instead of classes.
This makes it so you don't have to remember all the names specific to the project (or learn an existing projects css names).
I've never used Tailwind myself so I am not advocating it per say, just explaining how I understand it.
Embracing components over classes is what helped me understand and appreciate functional CSS (Tachyons, Tailwind, etc). Lots of headaches removed when the DOM structure finally 1:1 reflects the style inheritance structure, without having to maintain the latter separately.
Exactly. When using something like React, the abstraction of using classes to create reusable components is redundant with the framework's, and thus no longer carries its weight. Especially considering how, in practice, that abstraction isn't that effective in the first place: it's rare that a layout change involves just a CSS change. (I'm somewhat rehashing from a blog post of mine [1] here - if anyone wants this more extensively argued they can read that.)
Also you avoid writing CSS and designing like before CSS existed. Its more messy but a bit easier to learn then CSS. CSS is simply too advanced and powerful it takes years to master. Ohh and you can copy/paste components into your spaghetti code.
>Also you avoid writing CSS and designing like before CSS existed.
I know this is controversial because of the web dev canon of "lol CSS sucks", but many people really love CSS, and find it incredibly powerful and enjoyable to use. If you put in the time to truly learn it, these tools seem silly and redundant.
In my experience you tend to end up in a weird thought experiment trying to work out what the third child of the body of a card should be called when actually you just want it to be bold with some padding.
As other people have said, naming things also becomes totally redundant when you’re using something like React or Vue where the abstraction is a component which is itself already named.
Author here, I have a few custom classes that look like more traditional CSS. Tailwind gives an example[0] of how to do this in their docs. I have about 15 of these extracted classes. I use them for common styling patterns, such as transforming "flex items-center justify-center" to "flex-center," or to unify styling on components I haven't abstracted into a styled version, such as "listbox-option" or "flyout."
Having a name for each element in your markup is really powerful and useful, and it seems like the Tailwind approach exists specifically to avoid having to name things.