tailwind.config.js

Définition

Point de configuration de Tailwind. Depuis la v4.0 (22 janvier 2025), il se fait en CSS : un seul @import "tailwindcss" puis un bloc @theme pour les tokens. Le fichier tailwind.config.js n'est plus détecté automatiquement ; il se charge en mode compatibilité via @config.

Analogie

Le tableau de bord de ta voiture : tu règles tout depuis un seul endroit.

Exemple de code

/* app.css — Tailwind v4 */
@import "tailwindcss";

@theme {
  --color-brand: #ff6b35;
  --font-display: "Satoshi", sans-serif;
  --breakpoint-3xl: 120rem;
}

/* Compatibilité : ancien fichier JS */
/* @config "../../tailwind.config.js"; */

Cas d'usage

Personnaliser couleurs, polices et points de rupture pour coller à la charte, directement dans la feuille CSS principale.

Anti-pattern

Termes liés

Sources

• tailwindcss.com/blog/tailwindcss-v4
• tailwindcss.com/docs/functions-and-directives
• tailwindcss.com/docs/upgrade-guide