En cette fin d'année 2025, Tailwind CSS continue d'évoluer à un rythme impressionnant avec sa version 4, sortie en janvier. Ce framework utility-first, qui révolutionne le développement front-end, s'est enrichi de nombreuses fonctionnalités modernes tout au long de l'année. Basé sur les annonces officielles du blog Tailwind CSS, voici un aperçu détaillé des mises à jour clés de la v4, accompagné d'exemples de code pour vous aider à les adopter rapidement.Janvier 2025 : Tailwind CSS v4.0 – Une refonte majeure pour la performance et la modernitéLa v4.0 marque un tournant avec un nouveau moteur (Oxide), une configuration directement en CSS (plus de fichier JS obligatoire), et un support natif des dernières features CSS comme les cascade layers, les container queries, les popovers, et les couleurs wide-gamut (oklch, oklab).Exemples clés :
Configuration en CSS :
@import "tailwindcss";
@theme {
--color-primary: oklch(65% 0.2 200);
--font-family-sans: "Inter", system-ui;
}Utilisation de container queries :
<div class="container container:type-size">
<p class="text-base @sm:text-lg @lg:text-xl">Texte responsive au conteneur</p>
</div>Avril 2025 : Tailwind CSS v4.1 – Text shadows, masks et bien plus
La v4.1 introduit enfin les utilitaires pour les ombres de texte (text-shadow), les masques (mask-image), et améliore la compatibilité avec les navigateurs plus anciens via des fallbacks intelligents.Exemples concrets :
Text shadows :
<h1 class="text-6xl font-bold text-shadow text-shadow-lg text-shadow-color-red-500">
Titre avec ombre
</h1>(Équivalent CSS : text-shadow: 4px 4px 8px rgb(239 68 68);)
Masques pour des formes créatives :
<div class="mask-heart size-48 bg-gradient-to-r from-pink-500 to-red-500"></div>(Utilise mask-image avec une forme prédéfinie comme un cœur, ou arbitrary : mask-[url(#custom-mask)])
Ces ajouts rendent les designs interactifs et visuellement riches beaucoup plus simples à implémenter.
Autres highlights de l'année
Rebranding Tailwind UI en Tailwind Plus : Plus de possibilités avec des composants premium.
Mai : Lancement de Compass : Un starter kit Next.js pour plateformes de cours en ligne.
Juillet : Support Vanilla JS pour Tailwind Plus : Les composants interactifs (dropdowns, dialogs) fonctionnent désormais en HTML pur, sans React/Vue.
Ces évolutions font de Tailwind v4 un outil encore plus accessible, puissant et adapté aux standards web modernes. Si vous n'avez pas encore migré, c'est le moment – l'upgrade est facilité par des outils automatisés !Quelles sont vos fonctionnalités préférées de la v4 ? Avez-vous déjà utilisé les text shadows ou les masks en production ? Partagez vos expériences et exemples en commentaires !
Pour plus de détails : Blog officiel Tailwind CSS
