@apply

Définition

Directive qui injecte des utilitaires Tailwind dans une classe CSS. En v4, dans un fichier séparé (CSS module, <style> Vue/Svelte), il faut d'abord @référence la feuille principale pour accéder au thème, sans dupliquer le CSS émis.

Analogie

Créer un raccourci clavier qui exécute plusieurs commandes d'un coup.

Exemple de code

/* Component.vue <style> ou styles.module.css */
@reference "../../app.css";

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

Cas d'usage

Extraire un composant réutilisable quand les classes sont trop longues dans le HTML.

Anti-pattern

Termes liés

Sources

• tailwindcss.com/docs/functions-and-directives
• tailwindcss.com/docs/upgrade-guide