Tailwind CSS v4 en 2026 : Le guide complet avec des exemples pratiques

Tailwind CSS v4 represente la plus grande refonte que le framework ait connue depuis sa creation. Sorti debut 2025 et desormais pleinement mature en 2026, v4 introduit un systeme de configuration CSS-first, un moteur entierement reecrit appele Oxide, des ameliorations de performances spectaculaires et un ensemble modernise d'utilities. Si vous utilisiez Tailwind v3, la mise a niveau vers v4 change votre facon de penser la configuration et la thematisation. Ce guide vous accompagne a travers tout ce que vous devez savoir.

Ce qui a change dans Tailwind CSS v4

Tailwind v4 n'est pas une simple mise a jour incrementale. C'est une refonte fondamentale du fonctionnement interne du framework. Voici les changements principaux :

• Configuration CSS-first : Plus de tailwind.config.js. Les valeurs du theme, les utilities personnalises et les variantes sont tous definis directement en CSS avec @theme et d'autres directives.
• Moteur Oxide : Un nouveau moteur haute performance ecrit en Rust qui gere le parsing, la compilation et la detection des classes avec des ordres de grandeur plus rapides que v3.
• Fonctionnalites CSS modernes : Support integre pour @layer, les cascade layers, color-mix(), oklch(), les container queries et @starting-style pour les animations.
• Installation simplifiee : Un seul paquet sans configuration requise pour demarrer.
• Nouveau theme par defaut : Une palette de couleurs elargie utilisant OKLCH, une echelle d'espacement mise a jour et des parametres typographiques par defaut ameliores.

Premiers pas avec Tailwind CSS v4

Installation

La mise en place de Tailwind v4 est plus simple que jamais. Aucun plugin PostCSS separe ni fichier de configuration n'est necessaire.

# Installer Tailwind CSS v4
npm install tailwindcss @tailwindcss/vite

# Ou avec la CLI
npm install tailwindcss @tailwindcss/cli

Pour un projet base sur Vite, ajoutez le plugin a votre configuration Vite :

// vite.config.ts
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

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

Puis importez Tailwind dans votre fichier CSS principal :

/* app.css */
@import "tailwindcss";

C'est toute la configuration. Pas de tailwind.config.js, pas de postcss.config.js, pas de chemins de contenu a configurer. Le moteur Oxide detecte automatiquement vos fichiers sources et les scanne a la recherche de noms de classes.

Utilisation de la CLI

Si vous n'utilisez pas Vite, la CLI fonctionne tout aussi bien :

npx @tailwindcss/cli -i app.css -o output.css --watch

Configuration CSS-first avec @theme

Le plus grand changement conceptuel dans v4 est que toute la personnalisation se fait en CSS, pas en JavaScript. La directive @theme remplace l'ancien objet theme de tailwind.config.js.

Definir des couleurs personnalisees

@import "tailwindcss";

@theme {
  --color-brand: #4f46e5;
  --color-brand-light: #818cf8;
  --color-brand-dark: #3730a3;
  --color-surface: #f8fafc;
  --color-surface-dark: #1e293b;
}

Ces variables CSS deviennent automatiquement disponibles comme utilities Tailwind :

<div class="bg-brand text-white">
  <h1 class="text-brand-light">Hello, Tailwind v4</h1>
</div>

Espacement et dimensionnement personnalises

@theme {
  --spacing-18: 4.5rem;
  --spacing-128: 32rem;
  --width-content: 72rem;
  --width-sidebar: 20rem;
}

Polices personnalisees

@theme {
  --font-sans: "Inter", "system-ui", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
  --font-display: "Cal Sans", "Inter", sans-serif;
}

Remplacer vs etendre le theme par defaut

Par defaut, @theme etend le theme integre. Si vous souhaitez remplacer completement un namespace, utilisez la reinitialisation par caractere generique --* :

@theme {
  /* Supprimer toutes les couleurs par defaut, utiliser uniquement celles-ci */
  --color-*: initial;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-primary: #2563eb;
  --color-secondary: #7c3aed;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-900: #111827;
}

Le moteur Oxide

Sous le capot, Tailwind v4 utilise un nouveau moteur appele Oxide, ecrit en Rust et compile en code natif. La difference de performance est substantielle.

Ameliorations de performances

Le moteur Oxide offre des ameliorations de vitesse spectaculaires par rapport au moteur JavaScript de v3 :

• Les temps de compilation initiale sont typiquement 3 a 10 fois plus rapides, selon la taille du projet.
• Les recompilations incrementales pendant le developpement sont quasi instantanees, souvent en dessous de 5 millisecondes.
• L'utilisation memoire est significativement reduite puisque Rust gere la memoire sans ramasse-miettes.

Pour les grands projets monorepo avec des centaines de milliers de classes, la difference est particulierement notable. La ou v3 pouvait prendre plusieurs secondes pour une recompilation complete, v4 termine en quelques centaines de millisecondes.

Detection automatique du contenu

L'une des meilleures ameliorations de qualite de vie est que vous n'avez plus besoin de specifier les chemins de contenu. Le moteur Oxide detecte et scanne automatiquement les fichiers de votre projet. Il utilise des heuristiques pour trouver les fichiers de templates, les composants JSX/TSX et d'autres sources de noms de classes.

Si vous devez inclure ou exclure explicitement des fichiers, vous pouvez utiliser la directive @source :

@import "tailwindcss";

/* Ajouter des chemins source supplementaires */
@source "../shared-components/**/*.tsx";

/* Exclure un chemin */
@source not "../node_modules";

Classes d'utility nouvelles et mises a jour

Tailwind v4 introduit plusieurs nouveaux utilities et affine ceux existants pour tirer parti des fonctionnalites CSS modernes.

Container Queries

Les container queries vous permettent de styler des elements en fonction de la taille de leur conteneur parent plutot que du viewport. Tailwind v4 offre un support de premiere classe.

<div class="@container">
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3 gap-4">
    <div class="p-4 bg-white rounded-lg">Card 1</div>
    <div class="p-4 bg-white rounded-lg">Card 2</div>
    <div class="p-4 bg-white rounded-lg">Card 3</div>
  </div>
</div>

La classe @container etablit un contexte de confinement, et les prefixes @md:, @lg: appliquent des styles en fonction de la largeur du conteneur.

Fonctions de couleur modernes

Tailwind v4 utilise les couleurs OKLCH par defaut, offrant un espace colorimetrique perceptuellement uniforme. Vous pouvez egalement utiliser color-mix() pour la manipulation dynamique des couleurs :

@theme {
  --color-primary: oklch(0.6 0.25 265);
  --color-primary-hover: oklch(0.5 0.25 265);
}

<button class="bg-primary hover:bg-primary-hover text-white px-4 py-2 rounded">
  Cliquez ici
</button>

Transformations 3D

<div class="perspective-500">
  <div class="rotate-y-12 hover:rotate-y-0 transition-transform duration-300">
    <img src="/card.jpg" alt="Carte 3D" class="rounded-xl shadow-lg" />
  </div>
</div>

Nouveaux utilities de degradé

V4 etend le support des degradés avec des fonctionnalites supplementaires :

<!-- Degrade avec interpolation en OKLCH pour des transitions plus douces -->
<div class="bg-linear-to-r from-blue-500 to-purple-500 bg-interpolate-oklch">
  Degrade fluide
</div>

<!-- Degrade conique -->
<div class="bg-conic from-red-500 via-yellow-500 to-green-500">
  Roue chromatique
</div>

La variante not-

La variante not- inverse toute autre variante, alimentee par CSS :not() :

<div class="opacity-50 not-hover:opacity-100">
  S'estompe au survol au lieu d'apparaitre
</div>

<input class="border-gray-300 not-focus:border-transparent" />

Starting Style pour les animations

La variante starting vous permet de definir des styles pour la regle @starting-style, qui active les animations d'entree sur les elements qui apparaissent dans le DOM :

<dialog class="opacity-0 starting:opacity-0 open:opacity-100 transition-opacity">
  <p>Ce dialogue apparait en fondu a l'ouverture</p>
</dialog>

Design responsive dans v4

Le design responsive fonctionne de la meme maniere conceptuellement, avec la syntaxe familiere de prefixe de breakpoint. Cependant, v4 utilise des fonctionnalites CSS modernes en interne.

Breakpoints par defaut

Les breakpoints par defaut restent pratiques :

Prefixe	Largeur minimale	Usage courant
sm	640px	Grands telephones, paysage
md	768px	Tablettes
lg	1024px	Petits ordinateurs portables
xl	1280px	Ordinateurs de bureau
2xl	1536px	Grands ecrans

Breakpoints personnalises

@theme {
  --breakpoint-xs: 475px;
  --breakpoint-3xl: 1920px;
}

<div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 3xl:grid-cols-4">
  <!-- Grille responsive -->
</div>

Exemple de mise en page responsive

<header class="flex flex-col sm:flex-row items-center justify-between p-4 lg:px-8">
  <a href="/" class="text-xl font-bold">Brand</a>
  <nav class="hidden md:flex gap-6 text-sm font-medium">
    <a href="/features" class="hover:text-brand">Fonctionnalites</a>
    <a href="/pricing" class="hover:text-brand">Tarifs</a>
    <a href="/docs" class="hover:text-brand">Documentation</a>
  </nav>
  <button class="md:hidden p-2" aria-label="Menu">
    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
    </svg>
  </button>
</header>

Dark Mode

Tailwind v4 continue de supporter le dark mode avec la variante dark:. Par defaut, il utilise la media query prefers-color-scheme, mais vous pouvez passer a une bascule basee sur les classes ou les selecteurs.

Dark Mode de base

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
  <h1 class="text-2xl font-bold">Bienvenue</h1>
  <p class="text-gray-600 dark:text-gray-400">Ceci s'adapte au theme de votre systeme.</p>
</div>

Dark Mode base sur les classes

Pour basculer le dark mode avec JavaScript plutot que de se fier au parametre systeme :

@import "tailwindcss";

@variant dark (&:where(.dark, .dark *));

Maintenant le dark mode s'active lorsqu'un element parent a la classe dark :

<html class="dark">
  <body class="bg-white dark:bg-gray-950">
    <!-- Dark mode actif -->
  </body>
</html>

// Basculer le dark mode avec JavaScript
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
}

Construire un composant sensible au theme

<div class="rounded-xl border border-gray-200 dark:border-gray-800
            bg-white dark:bg-gray-900
            shadow-sm dark:shadow-gray-950/50
            p-6">
  <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
    Parametres
  </h3>
  <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
    Gerez les preferences de votre compte.
  </p>
  <button class="mt-4 px-4 py-2 rounded-lg
                 bg-brand text-white
                 hover:bg-brand-dark
                 focus:outline-none focus:ring-2 focus:ring-brand/50">
    Enregistrer les modifications
  </button>
</div>

Utilities d'animation

Tailwind v4 etend considerablement le support des animations, facilitant la creation d'interactions soignees sans CSS personnalise.

Utilities de transition

<!-- Effet de survol fluide -->
<button class="bg-blue-600 hover:bg-blue-700
               transform hover:scale-105
               transition-all duration-200 ease-out
               text-white px-6 py-3 rounded-lg">
  Survolez-moi
</button>

<!-- Transition de proprietes specifiques -->
<div class="transition-colors duration-300 bg-gray-100 hover:bg-blue-100">
  Transition de couleur uniquement
</div>

Animations integrees

<!-- Animation de rotation pour les indicateurs de chargement -->
<svg class="animate-spin h-5 w-5 text-white" viewBox="0 0 24 24">
  <!-- SVG du spinner -->
</svg>

<!-- Animation de pulsation -->
<div class="animate-pulse bg-gray-200 rounded h-4 w-3/4"></div>

<!-- Rebond -->
<div class="animate-bounce">Defiler vers le bas</div>

Animations personnalisees avec @theme

@theme {
  --animate-slide-in: slide-in 0.3s ease-out;
  --animate-fade-up: fade-up 0.5s ease-out;
}

@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

<div class="animate-slide-in">Glisse depuis la gauche</div>
<div class="animate-fade-up">Apparait en fondu vers le haut</div>

Migration de Tailwind v3 vers v4

La migration de v3 vers v4 necessite un certain effort, mais l'equipe Tailwind fournit un outil codemod qui gere la plupart des changements automatiquement.

Executer l'outil de mise a niveau

npx @tailwindcss/upgrade

Cet outil scannera votre projet et convertira automatiquement la plupart des modeles v3 en equivalents v4. Il gere le renommage des utilities, la migration de la configuration et la mise a jour des imports.

Changements cles de migration

v3	v4	Notes
tailwind.config.js	@theme en CSS	La configuration passe en CSS
@tailwind base/components/utilities	@import "tailwindcss"	Import unique
bg-opacity-50	bg-black/50	Syntaxe de modificateur d'opacite
text-opacity-75	text-white/75	Syntaxe de modificateur d'opacite
decoration-clone	box-decoration-clone	Renomme
flex-shrink-0	shrink-0	Simplifie (fonctionnait deja en v3)
flex-grow	grow	Simplifie
overflow-clip	overflow-clip	Identique
Chemins content dans la config	Detection automatique	Pas de config necessaire
darkMode: 'class' dans la config	@variant dark (...) en CSS	Base sur CSS

Etapes manuelles

Apres avoir execute l'outil de mise a niveau, examinez ces domaines manuellement :

1. Plugins personnalises : les plugins JavaScript v3 doivent etre reecrits en CSS avec les directives @utility et @variant.
2. Valeurs de theme personnalisees : deplacez-les de tailwind.config.js vers des blocs @theme en CSS.
3. Plugins tiers : verifiez qu'ils ont ete mis a jour pour la compatibilite v4.

Convertir un plugin v3 en v4

Plugin v3 (JavaScript) :

// v3 : plugin tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.text-balance': {
          'text-wrap': 'balance',
        },
      });
    }),
  ],
};

Equivalent v4 (CSS) :

/* v4 : defini directement en CSS */
@utility text-balance {
  text-wrap: balance;
}

Convertir une variante personnalisee v3

v3 (JavaScript) :

// v3
plugin(function({ addVariant }) {
  addVariant('hocus', ['&:hover', '&:focus']);
});

v4 (CSS) :

/* v4 */
@variant hocus (&:hover, &:focus);

Construire un composant complet

Rassemblons tout et construisons un composant de carte de tarification qui demontre les fonctionnalites de v4 :

<div class="@container max-w-sm mx-auto">
  <div class="rounded-2xl border border-gray-200 dark:border-gray-800
              bg-white dark:bg-gray-900
              shadow-xl shadow-gray-900/5 dark:shadow-gray-950/50
              p-8
              transition-all duration-300
              hover:shadow-2xl hover:-translate-y-1">

    <h3 class="text-sm font-semibold text-brand uppercase tracking-wider">
      Plan Pro
    </h3>

    <div class="mt-4 flex items-baseline gap-1">
      <span class="text-5xl font-bold text-gray-900 dark:text-white">29 $</span>
      <span class="text-gray-500 dark:text-gray-400">/mois</span>
    </div>

    <p class="mt-4 text-sm text-gray-600 dark:text-gray-400">
      Tout ce dont vous avez besoin pour construire et livrer plus rapidement.
    </p>

    <ul class="mt-8 space-y-3 text-sm">
      <li class="flex items-center gap-3 text-gray-700 dark:text-gray-300">
        <svg class="w-5 h-5 text-brand shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
        </svg>
        Projets illimites
      </li>
      <li class="flex items-center gap-3 text-gray-700 dark:text-gray-300">
        <svg class="w-5 h-5 text-brand shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
        </svg>
        Support prioritaire
      </li>
      <li class="flex items-center gap-3 text-gray-700 dark:text-gray-300">
        <svg class="w-5 h-5 text-brand shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
        </svg>
        Analytiques avancees
      </li>
    </ul>

    <button class="mt-8 w-full rounded-lg bg-brand py-3 text-sm font-semibold text-white
                   hover:bg-brand-dark
                   focus:outline-none focus:ring-2 focus:ring-brand/50 focus:ring-offset-2
                   dark:focus:ring-offset-gray-900
                   transition-colors duration-200">
      Commencer maintenant
    </button>
  </div>
</div>

Conclusion

Tailwind CSS v4 est un grand pas en avant pour le framework. Le passage a la configuration CSS-first rend les projets plus simples a mettre en place et a comprendre. Le moteur Oxide elimine les performances de compilation comme source de preoccupation. Et les nouveaux utilities, construits sur des fonctionnalites CSS modernes comme les container queries et les couleurs OKLCH, vous offrent des outils plus puissants tout en ecrivant moins de CSS personnalise.

Si vous demarrez un nouveau projet, il n'y a aucune raison de ne pas utiliser v4. Si vous maintenez un projet v3, l'outil de mise a niveau rend la migration simple pour la plupart des bases de code. La communaute et l'ecosysteme ont pleinement adopte v4, et l'experience developpeur est meilleure que jamais.

Utilisez notre Convertisseur CSS vers Tailwind pour convertir rapidement du CSS existant.

Commencez a experimenter avec les nouvelles fonctionnalites, en particulier les container queries et la directive @theme. Elles changent fondamentalement votre approche de la conception de composants, et une fois que vous les avez adoptees, revenir en arriere ressemble a une regression.