[naasking]

The pain or disgust is a strong hint that you're thinking about it wrong. If you have a bunch of repetitive CSS, how do you typically eliminate that? You create a class that bundles it all together and then just use the class name on the HTML.

But notice how you're then left with a bunch of repetitive HTML on which you apply those classes. If you bundle up the repetitive HTML into a reusable abstraction (like a component), then you're no longer repeating the CSS and so you don't need to bundle the CSS into classes anymore, thus reducing work. A type of inline styles, without the limitations, then gives you more direct control over styling on the bundled HTML itself. That's how you should use Atomic CSS/Tailwind.