Would be nicer if you could do it like selector > color-xyz text0xyz paddifng-xyz and never add those classes inline
But to your suggestion - you can! Thats what components classes do in essence. When you have a bunch of styles that _always_ go together - you bunch em up.
But in practice it is usually simpler to keep the classes and use other templating features of your platform to achieve this.
It becomes extremely nice as every time you need the question “why is my html look like this” answered, there is no hierarchy of other files to dig through - its all just there.
And as with any tool you can abuse it in ways that are not intended - seen plenty of ugly tailwind examples with tons of weird unruly code. But thats even more true for css itself. Omg the horrors I’ve seen with custom raw css cans still give me nightmares.
And I’m not dissing on CSS - just those tools try to solve different problems.
CSS is the ground truth, and it kinda has to support all the weird edge cases and uses that tailwind doesn’t.
Tailwind is like usability overhaul of css, but still allows you to “drop down to css” everywhere you want to.
It can compose like css, but it also constraints you to what you can do. It also gives you tools to group, adjust, refine styles, but in a usable way.
It’s a transpiled language on top of css, but more ambiguous than sass or less.
Given enough time most projects I work with slowly gravitate towards small composable utility classes anyway, tailwind is just logical evolution of that.
And since design peojects usually gravitate towards design systems in the long run, tailwind is really good at facilitating that.