[bensochar]

To me this is solving Tailwind's biggest issue: consistency & context.

Comparing it to Bootstrap or Foundation adding the class `alert alert-danger` to a div tells my coworkers that it's an "alert" & it will look like an alert everywhere. If I want to change how alerts look, I change the CSS

With Tailwind you'd have `bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative`. Then I'd have to change my HTML everywhere to update the appearance of alerts & its not always obvious that I'm looking at an "alert" in code. I'd end up with different looking alerts, cards, buttons, etc all over my app

[ahallock]

Why not use view templates to capture these?

[bensochar]

For alerts a sharable template is doable. So maybe a bad example, LOL.

But for buttons & heros not so much. I've worked with apps that have a "button" template. I find it overkill.

For one project we have some components rendered both server-side & with Vue.

Other cases I've had are sharing styles across multiple apps and pulling in markup from a 3rd party, like Stripe or a WYSIWYG.

But you're right. Ideally this wouldn't be an issue w/ view templates.

[ahallock]

I agree; for smaller components like labels and buttons, having some compound rules would help. They tend to be well-defined. I believe you can create composite styles in Tailwind.