@theme (configuration CSS-first)

Tailwind CSS 🟡 Mid

Définition

Directive de Tailwind v4.0 (22 janvier 2025) qui remplace theme de tailwind.config.js. Chaque variable déclarée dans un espace de noms (--color-*, --font-*, --breakpoint-*, --spacing-*, --text-*…) génère les utilitaires et variantes correspondants, et reste disponible comme variable CSS native. --color-*: initial réinitialise un espace de noms ; @theme inline sert quand on référence d'autres variables.

Analogie

Un tableau de bord où déplacer un curseur change toutes les pièces reliées d'un coup.

Exemple de code

@import "tailwindcss";

@theme {
  --color-mint-500: oklch(0.72 0.11 178); /* bg-mint-500, text-mint-500… */
  --font-display: "Satoshi", sans-serif;  /* font-display */
  --breakpoint-3xl: 120rem;               /* 3xl:… */
}

@theme inline {
  --font-sans: var(--font-inter); /* référence une variable externe */
}

.custom { color: var(--color-mint-500); } /* utilisable en CSS pur */

Cas d'usage

Décrire la charte (couleurs, polices, points de rupture) dans la feuille principale et la partager avec le CSS maison.

Anti-pattern

Déclarer les tokens en CSS ordinaire (:root { --color-x }) : aucune classe utilitaire n'est générée sans @theme.

Termes liés

#styling#interview#tailwind#tailwind4

Sources

Fiche mise à jour le 2026-09-27