Tailwind CSS v4.0 passe à une configuration en CSS et à un moteur réécrit

2025-01-22 · Éditeur : Tailwind Labs · Domaine : Design, UX et UI

La version 4 de Tailwind CSS remplace le fichier de configuration JavaScript par des variables CSS natives et s'appuie sur les fonctions récentes du langage : cascade layers, @property, color-mix().

Ce qui change

  • Les jetons de design se déclarent dans le CSS avec @theme et deviennent des variables natives.
  • Compilation complète 3,78 fois plus rapide sur le banc d'essai de l'éditeur.
  • Container queries, dégradés coniques et radiaux et transformations 3D intégrés au cœur.
  • Palette par défaut en oklch pour couvrir l'espace colorimétrique P3.

### Contexte Le **22 janvier 2025**, **Tailwind Labs** publie **Tailwind CSS v4.0**, une réécriture du framework utilitaire le plus répandu du front-end. La version s'appuie sur les fonctions CSS récemment généralisées dans les navigateurs plutôt que sur une configuration JavaScript. ### Caractéristiques - **Configuration en CSS** : un seul `@import "tailwindcss";` et un bloc `@theme` remplacent `tailwind.config.js` ; les jetons (couleurs, polices, points de rupture) sont exposés comme **variables CSS natives** sur `:root`, lisibles à l'exécution. - Performances mesurées par l'éditeur sur son projet Catalyst : compilation complète de **378 ms à 100 ms** (×3,78), recompilation incrémentale sans nouveau CSS de **35 ms à 192 µs**. - Fondations modernes : `@layer`, `@property`, `color-mix()`, propriétés logiques ; détection automatique des sources, plugin Vite officiel. - Nouveautés : container queries dans le cœur (`@sm:`, `@max-md:`), palette par défaut en **oklch** (gamut P3), transformations 3D, dégradés coniques et radiaux, variantes `starting:` (pour `@starting-style`) et `not-*`. ### Pourquoi c'est important Tailwind est aussi la sortie par défaut de nombreux générateurs d'interfaces par IA. Le passage à des jetons exposés en variables CSS rapproche le framework des design systems : un même jeu de jetons peut servir aux composants, aux thèmes et aux outils de design. ### À retenir La migration demande de revoir la configuration et certains utilitaires renommés ; en échange, les projets récupèrent un thème pilotable en CSS pur et des compilations nettement plus rapides.

Liens

Tags : CSS, Design system, Framework