@apply

Definition

Directive CSS qui permet d'extraire des utilitaires Tailwind dans des classes CSS custom. Utile pour les composants reutilisables ou l'integration avec du CSS existant.

Analogie

Creer un raccourci clavier qui execute plusieurs commandes d'un coup.

Exemple de code

/* styles.css */
.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white
    rounded-lg hover:bg-blue-700
    transition-colors font-medium;
}

Cas d'usage

Extraire un composant reutilisable quand les classes sont trop longues dans le HTML.

Anti-pattern

Termes lies