@layer

Definition

Directive qui organise le CSS en couches (base, components, utilities). Permet de controler la specificite et l'ordre de vos styles custom.

Analogie

Les etages d'un immeuble : base au sous-sol, composants au milieu, utilitaires au sommet (la plus haute priorite).

Exemple de code

@layer base {
  h1 { @apply text-2xl font-bold; }
}
@layer components {
  .card { @apply p-4 rounded-lg shadow; }
}
@layer utilities {
  .text-shadow { text-shadow: 2px 2px 4px #0003; }
}

Cas d'usage

Organiser ses styles custom pour qu'ils s'integrent correctement dans le systeme de specificite Tailwind.

Termes lies