Writing Tailwind-compatible Semantic CSS

Building HTML UI forced me to figure out how to write reusable CSS classes that play nice with Tailwind. Along the way, I looked at how other libraries tackle this. Spoiler: most of them get it wrong. Let me show you two approaches I found, then I’ll show you what I landed on. Here’s how Basecoat defines a badge: @layer components { .badge, .badge-primary, .badge-secondary, .badge-destructive,…