L'essentiel de cette nouvelle version permet de faciliter l'installation mais aussi la personnalisation de Tailwind CSS.
Des performances améliorées
Par exemple, on peut voir sur le site officiel de Tailwind CSS ce tableau qui permet de représenter l'énorme hausse des performances quand on travaille avec le framework CSS :
| v3.4 | v4.0 | Différence | |
| Full build | 378ms | 100ms | 3.78x meilleur |
| Rebuild incremental avec ajout d'un nouveau code CSS | 44ms | 5ms | 8.8x (autrement dit c'est instantané) |
| Rebuild incremental sans ajout d'un nouveau code CSS | 35ms | 192µs | 182x (magique) |
On peut voir que l'énorme différence se joue sur l'actualisation presque immédiate des classes générées par Tailwind CSS quand on ajoute du code CSS ou non. Bref, un rebuild magique. 💫
Une personnalisation simplifiée (css-first)
Avec les versions inférieures à Tailwind CSS 4 nous devons utiliser le fichier tailwind.config.js afin de personnaliser nos classes.
module.exports = {
theme: {
extend: {},
},
plugins: [],
};Désormais, c'est du passé !
Tailwind CSS 4 peut être géré sur votre feuille de style par défaut avec une seule importation.
@import "tailwindcss";
@theme {
--font-display: "Roboto", "sans-serif";
--breakpoint-3xl: 1920px;
--color-primary-100: oklch(0.99 0 0);
--color-primary-200: oklch(0.98 0.04 113.22);
--color-primary-300: oklch(0.94 0.11 115.03);
--color-primary-400: oklch(0.92 0.19 114.08);
--color-primary-500: oklch(0.84 0.18 117.33);
--color-primary-600: oklch(0.53 0.12 118.34);
/* ... */
}C'est plus simple. Tout est dans notre feuille de style (c'est pour ça qu'on parle ici d'un concept css-first).
Des fonctionnalités avancées
Tailwind CSS 4 ne se contente pas d'optimiser les performances mais vient prendre en charge les dernières nouveautés CSS supportées par les navigateurs.
Par exemple, la nouvelle propriété color-mix est désormais utilisable par les classes de Tailwind CSS :
@layer theme, base, components, utilities;
@layer utilities {
.mx-6 {
margin-inline: calc(var(--spacing) * 6);
}
.bg-blue-500\/50 {
background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
}
}
@property --tw-gradient-from {
syntax: "<color>";
inherits: false;
initial-value: #0000;
}On remarque aussi que Tailwind CSS v4 décompose maintenant ses classes utilisataires et ses composants par des règles très différentes :
@layer utilities / @utility- pour définir une classe utilitaire ;@layer component- pour définr un composant (.btn par exemple) ;@variant- pour définir un variant ;@property- pour définir une variable.
Désormais il faudra donc utiliser ceci pour activer le mode sombre quand une classe dark existe sur un élément :
@custom-variant dark (&:where(.dark, .dark *));
Des nouvelles couleurs avec OKLCH
Tailwind CSS v4 utilise désormais une nouvelle approche pour gérer les couleurs de sa palette de couleur en utilisant OKLCH.
Bien que peu utilisé comparé à son alternative RGB, elle permet d'avoir une colorimétrie plus moderne / précise.
Selon l'équipe de Tailwind CSS, ce changement a été apporté car les nouveaux écrans peuvent supporter une palette plus riche avec des couleurs variées contrairement à ce que peut gérer RGB.
Une installation simplifiée
Tailwind CSS v4.0 est maintenant plus simple à installer : une seule ligne suffit pour charger les classes utilitaires dans notre feuille de style :
@import "tailwindcss";
Une détection des contenus automatisée
Maintenant, plus besoin de préciser les fichiers qui contiennent nos classes utilitaires Tailwind CSS.
Tout est fait pour nous !
Ces dossiers sont par exemple ignorés désormais s'ils sont ajoutés dans votre fichier .gitignore car Tailwind CSS v4 le lit automatiquement :
/node_modules
/coverage
/.next/
/buildTous les fichiers binaires (comme les fichiers zip, les images, les vidéos, etc) sont également ignorés.
Des améliorations sur les valeurs passées arbitrairement
Avec Tailwind CSS v4 nous pouvons désormais utiliser des classes à la volée :
<div class="grid grid-cols-15">
<!-- ... -->
</div>Ce code vient générer une grille de 15 colonnes alors que Tailwind CSS v4 ne dispose par défaut que d'une grille jusqu'à 12 colonnes. Nous aurions pu préciser grid-cols-300 que cela aurait généré une grille ayant 300 colonnes d'un seul coup.
L'intégration des container query
Les container query sont désormais supportées par Tailwind CSS v4 :
<div class="@container">
<div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
<!-- ... -->
</div>
</div>Ici par exemple @container déclare le premier <div> comme référence : le navigateur observe sa largeur plutôt que celle du viewport.
Grâce aux utilitaires @sm:grid-cols-3 et @lg:grid-cols-4, le second <div> passe à 3 puis 4 colonnes quand le conteneur atteint les seuils sm et lg, rendant la grille autonome et vraiment responsive.
Une transformation en 3D améliorée
Tailwind CSS v4.0 supporte désormais les classes qui permettent d'utiliser des transformations en trois dimensions.
Par exemple nous avons maintenant rotate-x-*, rotate-y-* et scale-z-*.
N'hésitez pas à aller voir la documentation pour bien utiliser cette nouvelle possibilité avec Tailwind CSS v4.0.
Conclusion
Bref ! Voici pour les nouveautés de Tailwind CSS v4 !
Envie de passer à la version 4 ? Une seule commande suffit :
npx @tailwindcss/upgrade@nextEnvie de vous former ? Notre formation dédiée à Tailwind CSS 4 est déjà disponible pour vous accompagner et faire de vous un véritable expert en front-end.