Avoid Unreadable Markup

You open a template and run into a 340-character line: a button with eighteen classes, including four hover variants, two focus variants, and three for the disabled state. Three screens later, the same button, with seventeen classes. transition is missing, and nobody can say whether that's deliberate. A bit further on, a third variant with bg-emerald-500 instead of bg-emerald-600. Three buttons that should be identical, three different class lists, and no way to fix them all in one go.

The natural reflex is to create a .bouton class with @apply. In nearly all cases, that's the wrong answer, and the Tailwind team says so themselves: the directive exists to ease migrations, not to build a component layer. It gives you back exactly what you were trying to escape: a global stylesheet, names to argue over, specificity conflicts, and dead CSS that nothing flags. The right answer fits in one sentence: extract a component, not a class. The duplication to eliminate isn't the class list, it's the markup fragment that carries it.

Extracting a Component

In React, Vue, Svelte, or with an Astro component, the operation is straightforward: