Tailwind v4 : tout ce qui change et pourquoi c'est important

Tailwind CSS v4 n’est pas une simple mise a jour. C’est une reecriture fondamentale du framework, avec un nouveau moteur, une nouvelle architecture et des changements qui impactent la facon dont on pense le CSS utilitaire.

Un nouveau moteur ecrit en Rust

Le changement le plus fondamental est invisible pour l’utilisateur final : le moteur de Tailwind a ete entierement reecrit. La ou v3 utilisait PostCSS et un systeme de plugins JavaScript, v4 s’appuie sur un moteur natif ecrit en Rust (via le projet Oxide).

Les resultats en termes de performance sont spectaculaires :

Build initial : jusqu’a 10x plus rapide que v3.
Rebuilds incrementaux : jusqu’a 100x plus rapides en mode watch.
Empreinte memoire : drastiquement reduite.

La configuration passe en CSS

C’est probablement le changement le plus visible : le fichier tailwind.config.js disparait. Toute la configuration se fait desormais directement en CSS, via la directive @theme :

/* Avant (v3) - tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#6366f1',
      },
    },
  },
};

/* Apres (v4) - votre fichier CSS */
@import "tailwindcss";

@theme {
  --color-brand: #6366f1;
  --font-sans: 'Inter', sans-serif;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
}

La configuration en CSS est un changement philosophique important. Tailwind embrasse desormais pleinement les custom properties CSS natives.

Import simplifie

/* Avant (v3) */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Apres (v4) */
@import "tailwindcss";

Detection automatique du contenu

En v4, Tailwind detecte automatiquement les fichiers a scanner. Plus besoin de configurer quoi que ce soit dans la majorite des cas.

Nouvelles fonctionnalites

Container queries natives

<div class="@container">
  <div class="@sm:flex @lg:grid @lg:grid-cols-3">
    ...
  </div>
</div>

Couleurs en OKLCH

La palette de couleurs par defaut utilise desormais l’espace couleur OKLCH au lieu de sRGB. Les couleurs sont perceptuellement plus uniformes et les gradients plus naturels.

Gradients ameliores

<div class="bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500">
  Gradient lineaire
</div>

Les breaking changes

L’echelle d’espacement par defaut a ete ajustee.
La palette utilise OKLCH.
flex-grow-* et flex-shrink-* deviennent grow-* et shrink-*.
overflow-ellipsis devient text-ellipsis.

Guide de migration

npx @tailwindcss/upgrade

Cet outil convertit votre tailwind.config.js en directives @theme CSS, met a jour les classes depreciees et ajuste les imports.

Plugins et compatibilite

@tailwindcss/typography : mis a jour, integre au core.
@tailwindcss/forms : mis a jour.
@tailwindcss/container-queries : integre au core.
daisyUI : v5 compatible avec Tailwind v4.

Faut-il migrer maintenant ?

Nouveaux projets : utilisez v4 sans hesiter.
Projets en maintenance : migrez progressivement.
Projets avec beaucoup de plugins custom : attendez que vos plugins soient compatibles.

Tailwind v4 est le futur du framework. La question n’est pas de savoir si vous allez migrer, mais quand.

Conclusion

Tailwind v4 est une version ambitieuse et aboutie. Le nouveau moteur en Rust offre des performances inegalees, la configuration en CSS est plus intuitive, et les nouvelles fonctionnalites comblent des lacunes de longue date.

C’est aussi un signal fort de maturite pour le framework. En embrassant les standards CSS natifs (custom properties, OKLCH, layers), Tailwind montre qu’il evolue avec la plateforme web plutot que contre elle.