This is all true. But it is what we have. I’ve found myself wondering if a model with stronger conceptual integrity could be designed and use CSS as a compilation target. For example, with container queries and calcs you could probably implement a more coherent layout system with just math.
Unfortunately the preprocessor languages we have just add even more half-baked ideas on top of the half-baked ideas already in CSS, according to the principle that syntax sugar = good.
Tailwind is the closest popular thing to that and it's no wonder it's become so liked. Not so much in terms of providing a better layout system, but it just removes so much of what's wrong with CSS, at least for those who don't like it.
I haven't seen anything out there that provides an alternative but it does seem like CSS has almost added enough features you could actually build something that works. Alternatively it could be done through higher level abstractions built on something like React: <Flex>, <Grid> etc.
that's a great observation. previously to (finally) trying Tailwind for the first time, I would write utility CSS classes to handle those cases like a stack or grid and it worked great building alone. Unfortunately, CSS is really hard to do with others, especially in a big team. Classes always added instead of using the existing one, nothing ever cleaned up. Tailwind is nice in that you get all the power of CSS, just a bit more ergonomic of an API. Plus using it really is just using CSS, just with all the possible utility classes already made for you!
that said i do like to still use classes like "btn" to consolidate a bunch of styles. I think it was a mistake for TW devs to discourage that pattern for so long.