Tailwind CSS
Design System
Tailwind CSS v4 : ce qui change vraiment
CSS-first config, variables natives, nouveau moteur : les nouveautés majeures de Tailwind v4 et comment migrer sans douleur.
Emmanuel Mulonda Johannes10 juillet 20267 min de lecture
Tailwind CSS v4
Une configuration CSS-first
Fini le tailwind.config.js obligatoire. La configuration passe dans votre CSS grâce à @theme :
@import "tailwindcss";
@theme {
--color-primary: #842ae3;
--radius-card: 16px;
}
Les variables natives
Tailwind v4 s'appuie sur les variables CSS natives, ce qui permet un thème sombre 100% fluide et des designs systems dynamiques.
Le nouveau moteur
- Compilation Oxide : builds 5 à 10 fois plus rapides
- Aucune dépendance PostCSS lourde en dev
- Détection automatique des fichiers à scanner
Migrer en douceur
- Mettez à jour la dépendance vers
tailwindcss@^4 - Remplacez la directive
@tailwind basepar@import "tailwindcss" - Déplacez la config dans le CSS avec
@theme - Vérifiez les utilitaires supprimés (
bg-opacity-*etc.)
À retenir : Tailwind v4 est plus rapide, plus simple et plus puissant. La migration est rapide pour la plupart des projets.
Tailwind CSS
Design System