Tailwind CSS v4 : Les Nouvelles Features qui Changent Tout en 2025

Tailwind CSS v4, sorti fin 2024, marque une révolution avec un tout nouveau moteur écrit en Rust, une syntaxe de composition améliorée et des performances jusqu'à 10x supérieures. Cette version majeure redéfinit l'approche utility-first du CSS moderne.

🚀 Le Nouveau Moteur Oxide

Le moteur Oxide, écrit en Rust, remplace l'ancien système basé sur PostCSS, apportant des gains de performance spectaculaires.

Performances comparées

Installation et migration

# Installation Tailwind v4
npm install tailwindcss@next

# Migration automatique depuis v3
npx @tailwindcss/upgrade

# Nouvelle syntaxe de config (optionnelle)
# tailwind.config.js devient plus simple

💡 Composition Native : @apply Réinventé

Tailwind v4 introduit un système de composition natif bien plus puissant que @apply.

Ancien système (@apply v3)

/* style.css - Tailwind v3 */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg;
    @apply hover:bg-blue-600 active:bg-blue-700;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
  }
}

Nouveau système (v4)

/* style.css - Tailwind v4 */
@theme {
  --button-padding-x: 1rem;
  --button-padding-y: 0.5rem;
}

/* Composition avec variants natifs */
.btn-primary {
  compose: px-4 py-2 rounded-lg;
  compose: bg-blue-500 hover:bg-blue-600 active:bg-blue-700;
  compose: text-white font-medium;
  compose: disabled:opacity-50 disabled:cursor-not-allowed;

  /* Mix avec CSS custom properties */
  padding: var(--button-padding-y) var(--button-padding-x);
}

/* Composition avec inheritance */
.btn-secondary {
  compose-from: .btn-primary;
  compose: bg-gray-500 hover:bg-gray-600;
}

Avantages du système compose

• Tree-shaking automatique : classes inutilisées supprimées
• Performance : pas de duplication CSS
• Héritage : compose-from pour réutiliser des styles
• Type-safe : erreurs à la compilation si classe invalide

🎨 Design Tokens Natifs avec @theme

Tailwind v4 introduit @theme pour définir des tokens réutilisables.

/* design-system.css */
@theme {
  /* Colors */
  --color-brand-primary: #3b82f6;
  --color-brand-secondary: #8b5cf6;
  --color-brand-accent: #f59e0b;

  /* Spacing scale personnalisée */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* Breakpoints personnalisés */
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;

  /* Animations */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* Utilisation dans le markup */

<!-- Les tokens sont automatiquement disponibles -->
<div class="bg-[--color-brand-primary] p-[--spacing-lg]">
  <h1 class="font-[--font-sans] text-2xl">
    Titre avec design tokens
  </h1&gt;
</div>

<!-- Ou avec les utilities générées -->
<div class="bg-brand-primary p-lg">
  Design tokens natifs
</div>

⚡ Container Queries Natif

Tailwind v4 supporte nativement les Container Queries sans plugin.

<!-- Conteneur avec container queries -->
<div class="@container">
  <div class="@sm:grid-cols-2 @lg:grid-cols-3 @xl:grid-cols-4 grid gap-4">
    <div class="@sm:text-base @lg:text-lg p-4">
      Responsive basé sur le conteneur parent,
      pas sur le viewport !
    </div>
  </div>
</div>

<!-- Variants de container size -->
<div class="@container/sidebar">
  <aside class="@lg/sidebar:w-64 @sm/sidebar:w-48 w-full">
    Sidebar adaptative
  </aside>
</div>

Cas d'usage concrets

/* Components avec container queries */
.card {
  compose: @container p-4 rounded-lg shadow-md;
}

.card-content {
  /* Layout change selon la taille du conteneur */
  compose: @sm:flex @sm:gap-4 @sm:items-center;
  compose: @lg:grid @lg:grid-cols-2 @lg:gap-6;
}

🎯 Variants Avancés et Groupes

Variants de groupe imbriqués

<!-- Group hover avec multiple niveaux -->
<div class="group/card">
  <div class="group/header">
    <h3 class="group-hover/header:text-blue-600">Titre</h3&gt;
  </div>

  <div class="group-hover/card:shadow-lg transition">
    <p class="group-hover/card:text-gray-700">
      Contenu qui réagit au hover de .group/card
    </p>
  </div>
</div>

<!-- Peer variants avec nommage -->
<input type="checkbox" class="peer/published" />
<label class="peer-checked/published:text-green-600">
  Publié
</label>

<div class="peer-checked/published:block hidden">
  Options de publication visibles si checked
</div>

Data attributes variants

<!-- Nouveau : data-* variants natifs -->
<div data-state="loading" class="data-[state=loading]:opacity-50">
  Chargement...
</div>

<button
  data-pressed="true"
  class="data-[pressed=true]:scale-95 data-[pressed=false]:scale-100"
>
  Bouton avec état pressé
</button>

<!-- ARIA variants -->
<button
  aria-expanded="false"
  class="aria-expanded:rotate-180 transition"
>
  <svg>...</svg>
</button>

🔧 Arbitrary Values Améliorés

Tailwind v4 rend les valeurs arbitraires plus puissantes et intuitives.

<!-- Valeurs CSS modernes -->
<div class="bg-[color-mix(in_srgb,_blue_50%,_red)]">
  Color-mix natif
</div>

<div class="size-[clamp(200px,_50vw,_600px)]">
  Clamp responsive
</div>

<!-- Animations custom -->
<div class="animate-[spin_3s_ease-in-out_infinite]">
  Animation custom
</div>

<!-- Grid templates avancés -->
<div class="grid-cols-[200px_1fr_minmax(100px,_300px)]">
  Grid complexe
</div>

<!-- Variables CSS directement -->
<div class="p-[var(--my-padding)]" style="--my-padding: 2rem">
  Padding dynamique
</div>

📱 Responsive Design Avancé

Breakpoints personnalisés fluides

/* tailwind.config.js v4 */
@theme {
  --breakpoint-xs: 475px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  --breakpoint-3xl: 1920px;
}

<!-- Utilisation -->
<div class="xs:text-sm md:text-base 2xl:text-lg 3xl:text-xl">
  Typographie ultra-responsive
</div>

<!-- Range queries (nouveau en v4) -->
<div class="md:max-lg:bg-yellow-100">
  Background jaune uniquement entre md et lg
</div>

<!-- Orientation queries -->
<div class="portrait:flex-col landscape:flex-row">
  Layout adaptatif selon orientation
</div>

🎨 Dark Mode Amélioré

<!-- Multi-theme support -->
<html class="dark" data-theme="blue">
  <!-- Variant dark standard -->
  <div class="bg-white dark:bg-gray-900">
    Dark mode basique
  </div>

  <!-- Theme variants (nouveau) -->
  <div class="theme-[blue]:bg-blue-100 theme-[red]:bg-red-100">
    Couleur selon le thème
  </div>

  <!-- Forced color mode -->
  <div class="bg-white forced-colors:bg-transparent">
    Accessibilité forced colors
  </div>

  <!-- Prefers contrast -->
  <div class="border border-gray-200 contrast-more:border-gray-900">
    Contraste adaptatif
  </div>
</html>

🚀 Performance : Stratégies de Production

Optimisation automatique

// tailwind.config.js v4
export default {
  // Tree-shaking automatique des utilities inutilisées
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],

  // Compression avancée
  optimization: {
    minify: true,
    treeshake: true,
    purge: 'aggressive' // Nouveau niveau de purge
  },

  // Lazy-loading des variants
  variants: {
    lazy: ['hover', 'focus', 'active'] // Chargés à la demande
  }
}

Bundle size comparison

# Projet moyen (50 composants)
# Tailwind v3 production: 12.4 KB gzipped
# Tailwind v4 production: 8.1 KB gzipped (-35%)

# Avec tous les variants activés
# Tailwind v3: 89 KB gzipped
# Tailwind v4: 31 KB gzipped (-65%)

💻 Intégration avec les Frameworks

React + Tailwind v4

// Component.jsx
import { tv } from 'tailwind-variants'; // Nouveau helper officiel

const button = tv({
  base: 'px-4 py-2 rounded-lg font-medium transition',
  variants: {
    color: {
      primary: 'bg-blue-500 hover:bg-blue-600 text-white',
      secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-900',
    },
    size: {
      sm: 'text-sm px-3 py-1.5',
      md: 'text-base px-4 py-2',
      lg: 'text-lg px-6 py-3',
    },
    disabled: {
      true: 'opacity-50 cursor-not-allowed pointer-events-none'
    }
  },
  defaultVariants: {
    color: 'primary',
    size: 'md'
  }
});

export function Button({ color, size, disabled, children, ...props }) {
  return (
    <button
      className={button({ color, size, disabled })}
      disabled={disabled}
      {...props}
    >
      {children}
    </button>
  );
}

Vue + Tailwind v4

<script setup>
import { computed } from 'vue';
import { tv } from 'tailwind-variants';

const props = defineProps({
  variant: String,
  size: String
});

const cardClass = tv({
  base: 'rounded-lg shadow-md p-4',
  variants: {
    variant: {
      default: 'bg-white',
      colored: 'bg-blue-50 border-2 border-blue-200'
    },
    size: {
      sm: 'p-3 text-sm',
      md: 'p-4 text-base',
      lg: 'p-6 text-lg'
    }
  }
});

const classes = computed(() => cardClass({
  variant: props.variant,
  size: props.size
}));
</script>

<template>
  <div :class="classes">
    <slot />
  </div>
</template>

🛠️ Outils et Plugins v4

Plugins officiels mis à jour

// tailwind.config.js
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import containerQueries from '@tailwindcss/container-queries'; // Maintenant natif !

export default {
  plugins: [
    forms, // Forms stylés automatiquement
    typography, // Prose classes pour le contenu
    // containerQueries plus nécessaire en v4
  ]
}

IntelliSense amélioré

VS Code extension mise à jour pour v4 :

• Autocomplétion des compose directives
• Preview des @theme variables
• Validation des arbitrary values
• Suggestions contextuelles selon le framework

📊 Migration depuis v3

Script de migration automatique

# Migration complète du projet
npx @tailwindcss/upgrade

# Rapport de migration
npx @tailwindcss/upgrade --report

# Migration sélective (un dossier)
npx @tailwindcss/upgrade ./src/components

Changements breaking

// tailwind.config.js

// ❌ v3 (deprecated)
module.exports = {
  purge: ['./src/**/*.html'],
  theme: {
    extend: {
      colors: {
        brand: '#3b82f6'
      }
    }
  }
}

// ✅ v4 (recommandé)
export default {
  content: ['./src/**/*.html'],
  // Colors via @theme ou direct ici
  theme: {
    colors: {
      brand: {
        DEFAULT: '#3b82f6',
        50: '#eff6ff',
        // ...
      }
    }
  }
}

🎓 Cas d'Usage Avancés

Design System avec Variants

/* design-system.css */
@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
}

/* Button system */
.btn {
  compose: inline-flex items-center justify-center;
  compose: px-4 py-2 rounded-lg font-medium;
  compose: transition-all duration-200;
  compose: focus-visible:ring-2 focus-visible:ring-offset-2;
}

.btn-primary {
  compose-from: .btn;
  compose: bg-[--color-primary] text-white;
  compose: hover:brightness-110 active:brightness-90;
  compose: focus-visible:ring-[--color-primary];
}

.btn-secondary {
  compose-from: .btn;
  compose: bg-[--color-secondary] text-white;
  compose: hover:brightness-110 active:brightness-90;
}

.btn-lg {
  compose: px-6 py-3 text-lg;
}

🔮 Conclusion

Tailwind CSS v4 représente une évolution majeure qui solidifie sa position de leader du CSS utility-first. Le moteur Oxide apporte des performances exceptionnelles, tandis que les nouvelles fonctionnalités (compose, @theme, container queries) enrichissent considérablement l'expérience développeur.

Migrez vers v4 si :

• Vous voulez les meilleures performances
• Vous construisez un design system
• Vous utilisez container queries

Restez sur v3 si :

• Votre projet est stable et performant
• L'équipe n'est pas formée
• Vous utilisez des plugins incompatibles

Tailwind CSS v4 confirme que l'approche utility-first est l'avenir du CSS moderne, avec une DX exceptionnelle et des performances record.

Articles connexes

Pour approfondir le sujet, consultez également ces articles :

• Tailwind CSS 4 : Ce qui change et comment migrer facilement
• Web Components 2025 : Renaissance avec Lit 5.0, Stencil 4.0 et adoption enterprise massive
• Angular v19 : Signals GA et performances +60% en octobre 2025