Tailwind CSS 4 : les nouveautés à connaître absolument

Tailwind CSS 4 est sorti en 2025 et a explosé en adoption en 2026. On l'a déployé sur 8 projets cette année. Bilan : 5x build time, 50% moins de config, et un mental model franchement plus propre. Voici ce qui change vraiment.

Pourquoi Tailwind 4 est une vraie cassure

Tailwind 3 (et avant) était un plugin PostCSS, écrit en JS, qui scannait votre code pour générer du CSS. Tailwind 4 est un moteur Rust autonome (Lightning CSS), qui :

• Build 5x plus vite (sur gros projet)
• Utilise les CSS variables natives partout
• Adopte oklch pour les couleurs (gamut P3)
• Configure tout en CSS (fini le tailwind.config.js)
• A un nouveau syntax pour les variants

Les chiffres réels sur notre site marketing (250 fichiers tsx) :

| Métrique | Tailwind 3 | Tailwind 4 | |----------|------------|------------| | Build dev (cold) | 1.4s | 280ms | | HMR | 120ms | 18ms | | Build prod | 8.2s | 1.6s | | Output CSS | 38 KB | 24 KB |

L'installation : oubliez tout ce que vous savez

pnpm add tailwindcss@4 @tailwindcss/vite

Dans vite.config.ts :

import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [tailwindcss()],
});

Dans votre app.css :

@import "tailwindcss";

C'est tout. Pas de tailwind.config.js, pas de PostCSS config, rien.

La config en CSS, plus en JS

Fini le tailwind.config.js. Tout se fait via la directive @theme directement dans votre CSS :

@import "tailwindcss";

@theme {
  --color-primary: oklch(0.65 0.2 25);
  --color-secondary: oklch(0.75 0.15 200);
  --color-coral: #FF6B6B;

  --font-display: "Geist", "sans-serif";
  --font-mono: "JetBrains Mono", "monospace";

  --breakpoint-3xl: 120rem;

  --spacing: 0.25rem;
}

Utilisation immédiate :

<div className="bg-primary text-white font-display p-8 3xl:p-16">
  Bonjour
</div>

Le gros avantage : ces variables CSS sont accessibles partout, même hors Tailwind. Vos animations Framer Motion, vos canvas, vos SVG inline : tout peut consommer var(--color-primary).

Les couleurs en oklch (vrai game changer)

Les couleurs par défaut de Tailwind 4 sont en oklch, gamut P3. Sur un écran moderne (MacBook, iPhone récent), les couleurs sont plus vives et plus accurate.

/* Tailwind 3 (RGB) */
.bg-blue-500 { background-color: rgb(59 130 246); }

/* Tailwind 4 (oklch P3) */
.bg-blue-500 { background-color: oklch(0.62 0.214 259.815); }

Mieux : vous pouvez désormais interpoler des couleurs directement :

<div className="bg-linear-to-r from-blue-500 to-pink-500 in-oklch">
  Dégradé sans bouillie
</div>

Le modificateur in-oklch force l'interpolation dans l'espace oklch, ce qui évite la zone marron grisâtre au milieu des dégradés RGB classiques. Test it, vous ne reviendrez plus en arrière.

Les nouveaux variants qui changent la vie

not-*

<button className="opacity-50 not-disabled:opacity-100">
  Cliquable
</button>

has-*

<form className="has-[input:invalid]:border-red-500">
  <input type="email" required />
</form>

Le form devient rouge si un input est invalide. Sans une ligne de JS.

group-has-* et peer-has-*

<div className="group">
  <input type="checkbox" />
  <span className="group-has-[input:checked]:text-green-500">
    Confirmé
  </span>
</div>

* pour styliser tous les enfants directs

<ul className="*:py-2 *:border-b">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Fini les space-y-2 et les hacks. Direct.

Container queries natives

Tailwind 4 intègre les container queries en core (plus besoin du plugin) :

<div className="@container">
  <div className="@md:flex @md:gap-4">
    <img src="..." className="@md:w-1/3" />
    <div className="@md:w-2/3">Contenu</div>
  </div>
</div>

Le layout réagit à la taille du container parent, pas du viewport. Pour les composants réutilisables (cards qui s'adaptent au contexte), c'est révolutionnaire.

💡 Vous voulez qu'on migre votre design system vers Tailwind 4 pour vous ? On en discute 15 minutes : rdv.lenobot.com.

La migration depuis Tailwind 3

Le codemod officiel gère 80% du travail :

npx @tailwindcss/upgrade

Ce qu'il fait :

• Convertit tailwind.config.js en @theme dans CSS
• Met à jour les noms de classes renommées (bg-gradient-* en bg-linear-*)
• Adapte la config PostCSS
• Détecte les plugins déprécués

Ce qui reste manuel :

• Les helpers JS qui consommaient les tokens (tailwind/resolveConfig)
• Les plugins custom écrits en JS
• Les couleurs custom hardcodées en RGB

Renommages à connaître

| Ancien | Nouveau | |--------|---------| | bg-gradient-to-r | bg-linear-to-r | | shadow-sm | shadow-xs | | shadow | shadow-sm | | rounded-sm | rounded-xs | | rounded | rounded-sm | | outline-none | outline-hidden |

Oui, les valeurs default ont décalé. Le codemod gère, mais relisez votre design system manuellement après.

Le mode "sans config" change tout

Notre projet type 2026 :

/* app.css : 50 lignes total pour tout le design system */
@import "tailwindcss";

@theme {
  --color-brand: oklch(0.7 0.18 35);
  --color-brand-dark: oklch(0.45 0.18 35);

  --font-sans: "Inter", system-ui;
  --font-display: "Cabinet Grotesk", "Inter";

  --radius: 0.5rem;
}

@layer components {
  .btn-primary {
    @apply bg-brand hover:bg-brand-dark text-white px-4 py-2 rounded-lg font-medium transition;
  }
}

Avant : 200 lignes de tailwind.config.js, 30 lignes de postcss.config.js, du globals.css, des plugins, des helpers. Maintenant : un seul fichier CSS.

Performance en prod réelle

Site client (Next.js 16 + Tailwind 4) :

• CSS shipped : 18 KB (gzip) total
• First Contentful Paint : 0.4s
• Lighthouse Performance : 100/100

Le purge est plus agressif et plus précis. Aucune classe inutilisée ne passe en prod.

Ce qui ne marche pas (encore)

• Plugins JS legacy : beaucoup ne sont pas portés (mais l'écosystème rattrape vite)
• Design tokens via JS (Style Dictionary) : workflow à revoir
• Storybook : il faut Storybook 8.4+ pour l'intégration Vite native

Verdict

Tailwind 4 n'est pas une mise à jour mineure, c'est une refonte. Plus rapide, plus propre, plus moderne. Si vous démarrez un nouveau projet en 2026, foncez. Pour migrer un projet existant, comptez 1 à 3 jours selon la taille du design system.

Prêt à passer votre design system à Tailwind 4 sur votre stack en 2026 ? Notre équipe de devs seniors vous accompagne. Réservez votre appel découverte gratuit sur rdv.lenobot.com, 15 minutes pour évaluer votre projet, devis ferme sous 48h, sans engagement.

Article rédigé par L'équipe Lenobot.