Tailwind CSS : thème et personnalisation

Dans Tailwind 4, la configuration se fait dans le CSS, avec la directive @theme. Aucun fichier tailwind.config.js n’est nécessaire.

`@theme`

@import 'tailwindcss';

@theme {
  --color-marque: #4f46e5;
  --color-marque-clair: #818cf8;
  --font-titre: 'Inter', sans-serif;
  --spacing-section: 5rem;
  --breakpoint-3xl: 120rem;
  --radius-carte: 1rem;
}

Chaque variable du thème crée des classes et des variables CSS :

Variable	Classes créées
`--color-marque`	`bg-marque`, `text-marque`, `border-marque`, `ring-marque`…
`--font-titre`	`font-titre`
`--spacing-section`	`p-section`, `mt-section`, `gap-section`…
`--breakpoint-3xl`	Variante `3xl:`
`--radius-carte`	`rounded-carte`

Espaces de noms courants : --color-*, --font-*, --text-* (tailles), --font-weight-*, --spacing-*, --breakpoint-*, --radius-*, --shadow-*, --ease-*, --animate-*.

Toutes les valeurs sont aussi disponibles comme variables CSS natives :

.carte {
  border-radius: var(--radius-carte);
  color: var(--color-marque);
}

Remplacer le thème par défaut

@theme {
  --color-*: initial; /* supprime toutes les couleurs par défaut */
  --color-fond: #0f1317;
  --color-texte: #e3e8ef;
  --color-primaire: #7aa2f7;
}

--color-*: initial; retire la palette d’origine : seules les couleurs déclarées restent disponibles.

Un thème à base de variables (clair/sombre)

Pour des couleurs qui changent avec le thème, pointer le thème vers des variables CSS :

@import 'tailwindcss';
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

:root {
  --fond: #f8f9fc;
  --texte: #191c1e;
  --primaire: #3a5ba9;
}
[data-theme='dark'] {
  --fond: #0f1317;
  --texte: #e3e8ef;
  --primaire: #aac7ff;
}

@theme inline {
  --color-fond: var(--fond);
  --color-texte: var(--texte);
  --color-primaire: var(--primaire);
}

bg-fond text-texte suit alors le thème sans préfixe dark:. @theme inline fait résoudre la variable à l’endroit où la classe est utilisée (nécessaire pour que [data-theme="dark"] agisse). Voir Responsive et états pour la variante dark.

Polices

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
@import 'tailwindcss';

@theme {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

Pour respecter la vie privée et accélérer l’affichage, préférer une police auto-hébergée (fichiers woff2 et @font-face) à un chargement depuis un service tiers.

Utilitaires personnalisés

@utility texte-equilibre {
  text-wrap: balance;
}

@utility conteneur-page {
  margin-inline: auto;
  max-width: 64rem;
  padding-inline: 1rem;
}

<main class="conteneur-page"><h1 class="texte-equilibre">Titre</h1></main>

Ces utilitaires acceptent les variantes (md:conteneur-page, hover:…).

Variantes personnalisées

@custom-variant theme-contraste (&:where([data-theme="contraste"], [data-theme="contraste"] *));
@custom-variant mobile-seulement (@media (max-width: 40rem));

Styles de base et couches

@layer base {
  html {
    font-family: var(--font-sans);
    background: var(--color-fond);
  }
  h1,
  h2 {
    text-wrap: balance;
  }
}

@layer components {
  .bouton {
    display: inline-flex;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-carte);
    background: var(--color-primaire);
  }
}

Les couches (base, components, utilities) définissent la priorité : les utilitaires l’emportent sur components, qui l’emporte sur base. Un composant défini en @layer components reste donc surchargeable par une classe utilitaire.

`@apply`

.carte {
  @apply rounded-xl border bg-white p-4 shadow-sm;
}

@apply est pratique pour des styles qu’on ne peut pas placer dans le HTML (contenu Markdown rendu, composants tiers). À éviter comme méthode générale : on retrouve alors du CSS classique (voir Organisation et composants).

Charger un ancien fichier de configuration

@import 'tailwindcss';
@config '../tailwind.config.js';

Utile pour migrer progressivement. Les options corePlugins, safelist et separator de l’ancien fichier ne sont plus prises en charge.

Inspecter le thème

Les variables du thème sont des variables CSS : les afficher dans les outils de développement du navigateur (:root), ou les utiliser directement :

<div style="background: var(--color-marque)">…</div>

Dépannage

Symptôme	Piste
Une couleur de `@theme` n’a pas de classe	Nom hors espace de noms (`--color-…` pour les couleurs)
Le thème sombre ne change pas les couleurs	Utiliser `@theme inline` avec des variables CSS ; vérifier l’attribut `data-theme`
`@apply` : `Cannot apply unknown utility class`	La classe n’existe pas, ou appartient à un autre fichier : utiliser `@reference "global.css";`
La police ne se charge pas	`@import url(...)` placé avant `@import "tailwindcss"`
`tailwind.config.js` ignoré	Non chargé : `@config "…"`
Les couleurs par défaut ont disparu	`--color-*: initial;` demandé