Découvrez les nouveautés de Tailwind CSS v4

Dans cet article, nous allons explorer les nouveautés apportées par la version 4 de Tailwind CSS. Pour rappel Tailwind CSS est un outil qui permet d'utiliser des classes utilitaires pour composer rapidement des interfaces depuis l'HTML. Avec cette nouvelle version, Tailwind CSS introduit plusieurs améliorations avec principalement une nouvelle méthode de configuration.

Configuration simplifiée avec Vite

L’intégration de Tailwind CSS avec Vite est maintenant plus fluide. Pour commencer, on installe tailwindcss et le plugin @tailwindcss/vite :

bun add -d tailwindcss @tailwindcss/vite

Ensuite, dans le fichier de configuration vite.config.js on ajoute le plugin :

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

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

Enfin, dans le fichier CSS on importe Tailwind CSS :

@import "tailwindcss";

Et voila, on peut maintenant commencer à utiliser les classes utilitaires de Tailwind et le CSS se génèrera automatiquement en fonction des classes utilisées.

Transition vers une configuration basée sur le CSS

Un changement majeur dans cette version 4 est l’abandon de la configuration en JavaScript via le fichier tailwind.config.js au profit d’une configuration écrite directement dans le CSS. Cette configuration se fait au travers de l'utilisation de variable CSS (variables qu'il est aussi possible d'utiliser dans son CSS personnalisé).

Personnalisation par des variables CSS

Par exemple, pour définir une couleur personnalisée on va utiliser la directive @theme

@import "tailwindcss";

@theme {
  --color-dusk: oklch(52% 0.1 245);
}

Cette déclaration rend automatiquement des classes comme bg-dusk ou text-dusk disponible pour changer la couleur de fond ou de texte d'un élément.

Optimisation des styles générés

Par défaut Tailwind va générer des variables pour tous les styles de bases. Cependant, si vous n’utilisez qu’une partie des couleurs ou des styles par défaut, vous pouvez les réduire pour optimiser le fichier CSS généré :

@import "tailwindcss";

@theme {
  --color-*: initial; /* On retire les couleurs de bases de Tailwind */
  --color-dusk: oklch(52% 0.1 245);
}

Il est possible de faire de même pour les autres styles afin de ne conserver que les éléments que vous avez l'intention d'utiliser.

Création de classes utilitaires personnalisées

Autre point notable, la simplification de la création de classes utilitaires personnalisées à l'aide de la directive @utility.

@import "tailwindcss";

/* Utilitaire simple */
@utility card {
  @apply bg-white shadow-sm rounded-sm;
}

/* Utilitaire dynamique */
@utility stack-* {
  display: flex;
  flex-direction: column; 
  gap: calc(var(--spacing) * --value(integer));
}

Le --value() permet d'interpréter la valeur reçu en paramètre. Cette classe est ensuite utilisable dans votre HTML.

<div class="stack-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

L'avantage par rapport à une classe classique est qu'elle ne sera pas générée si elle n'est pas utilisée.

Compatibilité et migration

Cette nouvelle version change aussi certaines règles, et ces changements peuvent impacter votre site.

• shadow-sm devient shadow-xs
• shadow sans suffixe devient shadow-sm

Ces changements se retrouvent aussi sur les propriétés rounded, drop-shadow, backgroupd-blur mais vous pouvez trouver les changements sur la page listant les modifications. Il est aussi possible d'utiliser un outil pour lancer la migration de manière automatique (pensez à faire un commit avant car cela va modifier vos fichiers).

npx @tailwindcss/upgrade@next

Aussi, on notera que les règles numériques ne sont plus limitées à un nombre limité de valeur.

<div class="size-48"></div>

Conclusion

Même si cette nouvelle manière de configurer Tailwind CSS peut sembler étrange au premier abord cette évolution apporte des bénéfices intéréssants :

• La barrière d'entrée est plus basse car il n'est pas nécessaire de comprendre le JavaScript pour configurer.
• Les variables CSS peuvent être réutilisées dans ses propres règles CSS.
• La création de classes utilitaires permet de créer de nouvelles règles rapidement.
• Une composition plus simple car il suffit d'importer d'autres fichiers CSS pour importer des thèmes ou des nouvelles classes.

A voir maintenant comment la communauté réagit vis à vis de ce changement et comment cette approche est adoptée de manière plus générale.