@variant et @custom-variant

Définition

Deux directives v4. @variant applique une variante Tailwind (dark, hover, md…) à l'intérieur d'une règle CSS maison ; v4.3 (8 mai 2026) accepte les variantes empilées (hover:focus) et composées (hover, focus). @custom-variant crée une nouvelle variante à partir d'un sélecteur, par exemple pour piloter le mode sombre par classe.

Analogie

Un tampon « uniquement le week-end » qu'on appose sur n'importe quelle règle.

Exemple de code

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant hocus (&:hover, &:focus);

.button {
  background: var(--color-sky-500);
  @variant hover:focus { background: var(--color-sky-600); } /* empilée */
  @variant dark { background: var(--color-sky-300); }
}

Cas d'usage

Écrire du CSS de composant qui réutilise les variantes du projet, et définir des variantes métier (theme-midnight, hocus).

Anti-pattern

Termes liés

Sources

• tailwindcss.com/docs/functions-and-directives
• tailwindcss.com/blog/tailwindcss-v4-3
• tailwindcss.com/docs/dark-mode