I disagree. I don't want to jump between two files constantly. With Tailwind I can stick to one file and never need to think about naming things.
Right so it is easier to write code quickly, but not to maintain a system. Tailwind is the right tool if you want to generate a prototype with LLM agents. It can be quickly deleted or can be used as visual prototype to create reusable components. And once the component is built for long term maintenance as priority, the collective knowledge has been built up so naming becomes simpler, important and elucidating.
The component itself is the semantics, adding naming over CSS classes adds no value whatsoever, only adds cognitive load and requirement of context switching to understand "what does this named class actually do?"
Css classes are not big issue with css nesting and if component boundaries are settled and the design is well defined before implementation. Tailwind is a shorthand notation which is harder to parse than a structured css file (at least I strongly believe this we can agree on) and thus has only editing speed gains which is largely not an issue if prior work is done on exploration. Another way to frame it: tailwind is a good prototype syntax but is not the best syntax to for production code (human parsability). I’d skip it altogether to simplify the flow.
this! a semantic class name that is scoped to only that component and only ever used in that component is pointless indirection only needed to be able the reference the actual css properties in that other file sitting next to your component by using some name.