Tailwind CSS 4 : ce qui change vraiment pour vos projets web

Tailwind CSS 4 marque un tournant dans l'histoire de ce framework utilitaire incontournable. Avec un moteur de compilation entièrement réécrit en Rust et une intégration native dans les outils de build modernes, cette version repousse les limites de la performance et de l'ergonomie du CSS utilitaire. Voici ce que chaque développeur front-end doit savoir avant de migrer.

Un moteur de compilation jusqu'à 100x plus rapide

Tailwind CSS 4 abandonne son compilateur JavaScript au profit de Lightning CSS, un outil écrit en Rust. Cette réécriture profonde se traduit par des temps de compilation jusqu'à 100x plus rapides en mode incrémental et jusqu'à 35x plus rapides pour les builds complets. Sur des projets de grande taille, la différence est immédiatement perceptible : les développeurs profitent d'un hot reload quasi instantané, ce qui améliore significativement l'expérience de développement au quotidien. Pour les équipes travaillant sur des design systems conséquents, ce gain de performance est tout simplement transformateur.

La configuration devient CSS-first

Fini le fichier tailwind.config.js obligatoire : Tailwind CSS 4 propose une approche entièrement CSS-first. Vous définissez désormais votre configuration directement dans votre fichier CSS grâce aux variables CSS et aux directives @theme. Ce changement de paradigme rend la configuration plus intuitive et évite la multiplication des fichiers de configuration dans les projets. Les tokens de design sont exposés comme des propriétés CSS custom nativement, ce qui facilite leur utilisation avec d'autres outils, bibliothèques de composants ou systèmes de design, sans couche de traduction supplémentaire.

Nouvelles utilitaires et CSS moderne de première classe

Tailwind CSS 4 tire pleinement parti des dernières fonctionnalités CSS natives. Le support des container queries est désormais intégré de façon native, les couleurs OKLCH deviennent le format par défaut pour une gamme chromatique plus précise entre les navigateurs, et les nouvelles variantes couvrent des propriétés CSS récentes comme field-sizing, text-wrap: balance ou encore les transitions de vue. Le support natif des cascade layers avec @layer améliore également la gestion de la spécificité CSS dans les projets complexes.

Intégration simplifiée avec Vite, Next.js et Angular

L'intégration avec les bundlers modernes a été entièrement repensée. Tailwind CSS 4 s'intègre directement comme un plugin Vite ou PostCSS, sans configuration supplémentaire. La détection automatique des classes utilitaires est désormais plus intelligente : dans la plupart des cas, la propriété content n'est plus nécessaire dans votre configuration. Pour les projets Angular, l'intégration avec le builder esbuild d'Angular CLI est particulièrement fluide et bénéficie pleinement des gains de performance du nouveau moteur. Cette simplification réduit la friction à l'initialisation et limite les erreurs de configuration fréquentes chez les nouveaux projets.