@layer

Définition

Organisation du CSS en couches natives (@layer base, components, utilities). En v4 les @tailwind base/components/utilities disparaissent au profit d'un seul @import ; @layer base et components restent valides, mais un utilitaire personnalisé se déclare avec @utility pour supporter les variantes.

Analogie

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

Exemple de code

@import "tailwindcss";

@layer base {
  h1 { font-size: var(--text-2xl); }
}
@layer components {
  .card { padding: --spacing(4); box-shadow: var(--shadow-md); }
}
/* v3 : @layer utilities { .tab-4 {...} }  →  v4 : */
@utility tab-4 { tab-size: 4; }

Cas d'usage

Organiser ses styles custom pour qu'ils s'intègrent correctement dans le système de spécificité Tailwind.

Termes liés

Sources

• tailwindcss.com/docs/adding-custom-styles
• tailwindcss.com/docs/upgrade-guide