Evitar el marcado ilegible

Abre una plantilla y se encuentra con una línea de 340 caracteres: un botón con dieciocho clases, entre ellas cuatro variantes de hover, dos de focus y tres para el estado deshabilitado. Tres pantallas más allá, el mismo botón, con diecisiete clases: falta transition y nadie sabrá decir si es deliberado. Un poco más adelante, una tercera variante con bg-emerald-500 en lugar de bg-emerald-600. Tres botones que deberían ser idénticos, tres listas de clases distintas y ninguna forma de corregirlos de un solo gesto.

El reflejo natural es crear una clase .bouton con @apply. En la gran mayoría de los casos es la respuesta equivocada, y el propio equipo de Tailwind lo dice: esta directiva existe para facilitar las migraciones, no para construir una capa de componentes. Le devuelve exactamente aquello de lo que quería huir: una hoja de estilos global, nombres que debatir, conflictos de especificidad y CSS muerto que nada señala. La respuesta correcta cabe en una frase: extraiga un componente, no una clase. Lo duplicado que hay que eliminar no es la lista de clases, sino el fragmento de marcado que la lleva.