Theme Extend

Définition

Ajout de valeurs au thème sans écraser les valeurs par défaut. En v3 : theme.extend dans le JS. En v4 : déclarer une variable dans @theme ajoute la valeur ; pour remplacer tout un espace de noms on écrit --color-*: initial avant ses propres couleurs.

Analogie

Ajouter des pages a un dictionnaire sans arracher les existantes.

Exemple de code

@import "tailwindcss";

@theme {
  /* ajoute sans écraser */
  --spacing-128: 32rem;
  --color-primary-500: #6366f1;
  --font-display: "Inter", sans-serif;
}

/* remplacer toute la palette : */
/* @theme { --color-*: initial; --color-white: #fff; } */

Cas d'usage

Ajouter des couleurs de marque, des tailles custom tout en conservant les utilitaires existants.

Anti-pattern

Termes liés

Sources

• tailwindcss.com/docs/theme