Chapitre 10 : @apply Directives

1. Éviter la répétition (DRY)

Si vous avez 50 boutons identiques, copier-coller 10 classes n'est pas idéal. La directive @apply permet d'extraire ces classes dans votre fichier CSS.

2. Utilisation de @apply

/* Dans votre fichier CSS input */
.btn-primary {
    @apply bg-blue-500 text-white p-2 rounded hover:bg-blue-600 transition;
}

3. La directive @layer

Permet d'organiser votre CSS personnalisé pour qu'il respecte la cascade de Tailwind.

@layer base {
  h1 { @apply text-2xl font-bold; }
}

@layer components {
  /* Vos composants personnalisés ici */
}

@layer utilities {
  /* Vos mini-classes personnalisées ici */
}

Explication

Ce chapitre vous guide pas à pas sur le thème Directives : @apply et @layer. L'idée est de partir d'une approche simple, puis de progresser vers des usages plus réalistes.

Exemple pratique

Essayez d'appliquer la notion vue ici dans un mini-exemple de votre projet personnel. Ensuite, comparez votre résultat avec les exercices associés pour valider votre compréhension.