Individually applied styles kinda defeats the purpose of cascading style sheets though.
As someone who's quite conversant with regular CSS, I really did like the ease of applying whatever style I wanted right in the code without needing to "worry" about whether this div is a "panel" or a "hero" or whatever, but it really does tend to make a huge mess of my HTML in very short order.
You might like Styled Components then, if you're using React anyway. Not sure if there's similar systems for other frameworks. I don't consider it pointless make-work to develop a consistent stylesheet to use throughout your app though.
I believe the Babel plugin eliminates most of the performance cost.
The naming is double-edged. Often you want to re-use your styled element, so the fact that it has a name from the get-go makes that really easy. But you're right, sometimes it's annoying to pull bits out that you didn't really want to.
Ultimately I went back to CSS Modules. I just don't understand why I'd want to the appeal of Tailwind.. I'd have to learn a new DSL that ultimately gives me less control.
As someone who's quite conversant with regular CSS, I really did like the ease of applying whatever style I wanted right in the code without needing to "worry" about whether this div is a "panel" or a "hero" or whatever, but it really does tend to make a huge mess of my HTML in very short order.