Tailwind CSS v4.0 est sortie, quels sont les changements majeurs ?

Cela faisait déjà quelques mois que la bêta était disponible et encore plus longtemps pour l’alpha, qui restait cependant difficile d’accès. Mais ça y est, Tailwind, le framework CSS le plus utilisé dans le monde, ayant réussi l’exploit de surpasser Bootstrap, sort enfin en version 4. Cette nouvelle version ne rajoute pas beaucoup de nouvelles classes, mais s’oriente surtout sur les performances et une restructuration de la personnalisation en supprimant le fichier de configuration. Faisons donc un petit tour pour en comprendre plus en détail ce qui nous attend.

Amélioration des performances

Pour cette nouvelle version, l’équipe derrière Tailwind CSS a décidé de tout simplement réécrire entièrement le framework en utilisant un compilateur CSS nommé Oxide, présenté lors de la conférence de 2023. Les benchmarks montrent des performances allant de x3.5 pour un build complet du projet à x182 pour un rebuild en développement ne nécessitant pas de nouvelles classes (c-à-d sans classe CSS n’ayant pas déjà été utilisée dans le projet lors de la recompilation). Quant aux rebuilds avec de nouvelles classes, on passe à x8.8, nous faisant passer sous la barre des 10 ms.

Place au CSS-first

Comme dit en introduction, fini les configurations dans un fichier tailwind.config.mjs. Tailwind va maintenant prioriser le CSS (bien que le fichier de configuration soit toujours utilisable pour la rétrocompatibilité). Ainsi, si vous souhaitez faire des ajouts de variables Tailwind, il vous faudra utiliser la nomenclature CSS pour les variables dans le fichier CSS racine (celui qui importe Tailwind) avec le layer déjà implémenté dans la v3 que vous souhaitez (theme, base, components, utilities). L’utilisation des variables CSS fonctionne comme l’utilisation du extend, et il vous faudra utiliser * et l’attribut initial pour supprimer les valeurs prêtes à l’emploi. Voici des exemples pour mieux comprendre :

Modification de variables

Voici comment remplacer une variable existante :

@import "tailwindcss";

@theme {
  --color-blue-500: #FF0000; /* bg-blue-500 s'affiche en rouge mais bg-blue-600 en bleu car seul 500 est surchargé */
}

On peut alors faire en sorte d’enlever les autres variables du même type :

@import "tailwindcss";

@theme {
  --color-blue-*: initial; /* Permet de supprimer toutes les utilisations de blue */  
  --color-blue-500: #FF0000; /* bg-blue-500 s'affiche en rouge mais bg-blue-600 ne change pas car elle n'est pas définie */  

  --spacing: initial; /* Supprime toutes les h-*, m-* ou p-* */  
  --spacing-1: 0.25rem;  
  --spacing-2: 0.5rem;  
  --spacing-4: 1rem;  
  --spacing-8: 2rem;  
  --spacing-12: 3rem;  
}

On peut aussi supprimer toutes les classes préexistantes pour partir de zéro :

@import "tailwindcss";

@theme {
  --*: initial; /* Supprime toutes les variables Tailwind */
}

Pour ce qui est de l’utilisation de plugins ou certaines configurations, il vous faudra utiliser @plugin, @variant, @config ou bien @import selon vos besoins.

Utilisation du fichier de configuration

Si vous souhaitez utiliser le fichier de configuration des anciennes versions, vous devrez utiliser @config suivi de la localisation du fichier :

@config "../../tailwind.config.js";

Utilisation d’un plugin

Pour les plugins, c’est @plugin qui vous permettra de les utiliser, après les avoir installés :

@plugin "@tailwindcss/typography";

Variantes et dark mode personnalisés

Pour modifier les variantes, c’est-à-dire ce qu’il y a avant les :, vous devrez utiliser @variant. Par exemple, pour gérer le mode sombre avec la classe .dark au lieu de prefers-color-scheme, vous pouvez procéder ainsi :

@variant dark (&:where(.dark, .dark *)); /* Passe en mode classe avec .dark */  
@variant christmas (&:where([data-theme="christmas"] *)); /* Ajoute une variante pour le thème Christmas */  

Préfixe

Enfin, vous pouvez ajouter un préfixe en utilisant @import :

@import "tailwindcss" prefix(tw);

@theme {
  --color-red-500: #FF0000; /* Sera généré comme tw:bg-red-500 pour le background */  
}

Attention, cependant, les préfixes ne fonctionnent pas de la même manière qu’en v3. Ils ressemblent désormais à des variantes situées avant les deux points.

<div class="tw:flex tw:bg-red-500">
  <!-- ... -->
</div>

Quelques nouveautés bienvenues

Compositions de variantes et nouvelles variantes

Cela fait probablement partie des ajouts qui plairont le plus aux développeurs. Les performances et la configuration, c’est sympathique, mais cela n’améliore pas directement la qualité de développement. Grâce à la composition des variantes, il ne sera plus nécessaire d’écrire group-has-[&[data-open]]. On pourra directement tout mettre au même niveau : group-has-data-open.

De plus, il n’y a dorénavant plus de limite au nombre de sélecteurs à chaîner. Par exemple, on peut imaginer des classes comme :

<div class="**:data-avatar:rounded-full"> <!-- Plus besoin de group car il y a in-* en enfant -->
  <div class="in-focus:ring-blue-500 open starting:open:opacity-0 hover:not-nth-last-of-type-6:underline">
    <img data-avatar src="..."></div> <!-- ** sélectionne cet élement -->
  </div>
</div>

Container Query

L’un des plugins les plus utilisés, les Containers Queries, sont désormais inclus par défaut dans Tailwind. Pour les utiliser, vous devez définir un conteneur parent avec @container ou le nom d’un conteneur spécifique, puis indiquer les seuils souhaités dans un de ses descendants avec @min-* et @max-*.

<div class="@container">
  <div class="flex @min-md:@max-xl:hidden">
    <!-- ... -->
  </div>
</div>

Color Schemes

Un autre ajout notable est la prise en charge des Color Schemes, qui permet de synchroniser certains éléments (comme les barres de défilement) avec le thème du site. Par exemple, ajouter scheme-light dark:scheme-dark sur une balise html ou body alignera automatiquement ces éléments avec le mode de couleur du site.

<body class="scheme-light dark:scheme-dark">
  <!-- La barre de défilement sera toujours en accord avec le thème du site -->
</body>

Transformations 3D

Dernier ajout important : l’intégration des transformations 3D. Des classes telles que rotate-z-*, scale-z-* et transform-3d permettent à présent de manipuler des éléments dans un espace tridimensionnel.

<div class="perspective-distant">
  <article class="transform-3d rotate-x-51 rotate-z-43 shadow-xl transition-all duration-500 hover:-translate-y-4 hover:rotate-x-49 hover:rotate-z-38 hover:shadow-2xl">
    <!-- ... -->
  </article>
</div>

Quelques autres modifications

Dépréciations

Autres points à noter

En plus de toutes ces nouveautés, certaines modifications méritent également d’être soulignées :

• Pour les classes shadow, drop-shadow, blur et rounded, les tailles sm et base deviennent respectivement xs et sm.
• L’utilisation de classes arbitraires avec des variables CSS passe des crochets [] aux parenthèses (). Par exemple bg-[--brand-color] donne bg-(--brand-color)
• Il n'y a plus de valeurs spécifiques pour les classes utilisant le spacing. Par exemple m-13, p-26 ou border-6 existe contrairement à la v3
• Le passage de la palette de couleur au Display P3 en utilisant oklch à la place de rgb
• La variante hover n’est plus prise en charge pour les smartphones.

Pour en savoir plus et voir toutes les modifications apportées dans cette nouvelle version, je vous invite à vous rendre sur le blog post officiel de Tailwind CSS.

Tailwind CSS v4.0

We just released Tailwind CSS v4.0 — an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.

Tailwind CSS