[chromanoid]

That seems to be even more horrible than I expected, multi-cursor editing, seriously?

@apply and the frowned upon solution is what I would expect to be the only clean solution.

I am a proponent of WET, but pulling the naming things card when it comes to places that you may want to localize, test or aria-label anyway, just seems lazy to me.

[akarlsten]

In my experience there is practically no need to use multi-cursor editing if you're extracting components or partials where appropriate, as is usually the case nowadays.

There's also a difference between naming things of actual significance, which as you say may need to be localized, labeled, etc. and having to name arbitrary CSS junk like .button--state--success, which is painfully annoying. Type it up in the CSS file, switch over to the markup file (another annoyance that Tailwind helps you avoid), paste it in, repeat.

[emmacharp]

Why wouldn't `.button.is-success` be enough? And aren't you already using `success` somewhere else in your component? In JS, maybe?