Evitar a marcação ilegível

Você abre um template e dá de cara com uma linha de 340 caracteres: um botão com dezoito classes, entre elas quatro variantes de hover, duas de focus e três para o estado desabilitado. Três telas adiante, o mesmo botão, com dezessete classes: falta transition, e ninguém sabe dizer se isso foi de propósito. Mais adiante ainda, uma terceira variante com bg-emerald-500 em vez de bg-emerald-600. Três botões que deveriam ser idênticos, três listas de classes diferentes e nenhuma maneira de corrigi-los de uma só vez.

O reflexo natural é criar uma classe .bouton com @apply. Na quase totalidade dos casos, essa é a resposta errada, e a própria equipe do Tailwind diz isso: a diretiva existe para facilitar migrações, não para construir uma camada de componentes. Ela devolve exatamente aquilo de que você queria fugir: uma folha de estilos global, nomes para debater, conflitos de especificidade e CSS morto que nada sinaliza. A resposta certa cabe em uma frase: extraia um componente, não uma classe. A duplicação a eliminar não é a lista de classes, e sim o fragmento de marcação que a carrega.