Tailwind CSS v4 : configuration CSS-first et nouveau moteur

Sortie en janvier 2025, la version 4 de Tailwind CSS est une réécriture presque complète. Si vous aviez apprécié la v3 dans mon article « Maîtriser Tailwind CSS », la philosophie reste la même (des classes utilitaires), mais la configuration, le moteur et l'installation changent en profondeur.

Un nouveau moteur beaucoup plus rapide

Le moteur, baptisé Oxide, a été réécrit avec des parties critiques en Rust. Selon l'équipe Tailwind, les builds complets sont jusqu'à 5 fois plus rapides et les builds incrémentaux plus de 100 fois plus rapides, souvent mesurés en microsecondes. En pratique, le rechargement à chaud devient instantané, même sur de gros projets.

Fini tailwind.config.js : la configuration passe en CSS

C'est le changement le plus visible. Tout se configure désormais directement dans votre fichier CSS, avec la directive @theme.

/* app/globals.css */
@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.62 0.19 259);
  --color-brand-600: oklch(0.55 0.2 262);
  --font-display: "Inter", sans-serif;
  --breakpoint-3xl: 120rem;
}

Ces variables génèrent automatiquement les utilitaires correspondants (bg-brand-500, font-display, 3xl:grid-cols-6) et restent disponibles comme variables CSS natives partout dans votre code : var(--color-brand-500). Plus besoin de dupliquer les couleurs entre la config JavaScript et le CSS.

L'installation simplifiée

• Une seule ligne : @import "tailwindcss"; remplace les trois directives @tailwind base/components/utilities.
• Détection automatique des sources : plus besoin de lister les fichiers dans content, Tailwind analyse le projet en ignorant .gitignore. La directive @source permet d'ajouter un dossier au besoin.
• Des plugins dédiés : @tailwindcss/vite pour Vite, @tailwindcss/postcss pour les autres outils (dont Next.js). autoprefixer et postcss-import ne sont plus nécessaires.

Les nouveautés à connaître

• Container queries intégrées : @container sur le parent, puis @sm:grid-cols-2 sur les enfants, sans plugin.
• Une palette en `oklch` : des couleurs plus vives sur les écrans compatibles P3 et des dégradés plus réguliers.
• Des valeurs dynamiques : grid-cols-15 ou mt-17 fonctionnent sans configuration, les échelles sont calculées à partir d'une variable --spacing.
• Nouvelles variantes : starting: pour les animations d'entrée (@starting-style), not-*, inert, nth-*.
• CSS moderne sous le capot : cascade layers natives, @property et color-mix() pour l'opacité.

Migrer depuis la v3

Tailwind fournit un outil qui fait l'essentiel du travail : npx @tailwindcss/upgrade. Il convertit la configuration JavaScript en @theme, met à jour les dépendances et renomme les classes modifiées. Quelques changements méritent une vérification manuelle :

• Les classes renommées : shadow-sm devient shadow-xs, shadow devient shadow-sm, rounded devient rounded-sm, outline-none devient outline-hidden…
• La couleur de bordure par défaut passe à currentColor : ajoutez une couleur explicite à vos border.
• Le support navigateur : la v4 cible Safari 16.4+, Chrome 111+ et Firefox 128+. Si vous devez supporter des navigateurs plus anciens, restez en v3.
• Un projet avec beaucoup de config JS peut garder son fichier temporairement avec @config "./tailwind.config.js";.

Conclusion

Tailwind v4 rapproche l'outil du CSS natif : la configuration devient du CSS, les design tokens deviennent des variables CSS et le moteur disparaît presque du temps de build. Pour un nouveau projet, c'est le choix évident ; pour un projet existant, la migration est largement automatisée, à condition de vérifier la compatibilité navigateur.