Tailwind CSS 4.2 : Toutes les nouveautés et améliorations

Tailwind CSS 4.2, publié le 18 février 2026, apporte des ajouts majeurs au framework utility-first le plus populaire : nouvelles palettes de couleurs, utilitaires de propriétés logiques CSS, plugin webpack natif et un contrôle typographique avancé via font-feature-settings.

Voici un tour d'horizon complet de cette version et de ce qu'elle change dans votre workflow quotidien.

Le plugin webpack officiel : @tailwindcss/webpack

Jusqu'à présent, intégrer Tailwind CSS dans un projet webpack nécessitait de passer par PostCSS, avec une configuration parfois verbeuse impliquant postcss-loader, un fichier postcss.config.js et des ajustements manuels.

La version 4.2 change la donne en introduisant un plugin webpack de première classe : @tailwindcss/webpack.

Installation et configuration

L'installation est directe :

npm install @tailwindcss/webpack

Ensuite, vous l'intégrez dans votre fichier de configuration webpack :

// webpack.config.js
import tailwindcss from '@tailwindcss/webpack';

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

C'est tout.

Quand utiliser ce plugin plutôt que Vite ou PostCSS ?

Ce plugin s'adresse principalement aux projets qui reposent encore sur webpack comme bundler principal.

C'est le cas de nombreuses applications d'entreprise, de projets Next.js avec des configurations personnalisées, ou de codebases legacy qui n'ont pas encore migré vers Vite.

Si vous utilisez déjà @tailwindcss/vite ou @tailwindcss/postcss, vous n'avez pas besoin de changer ces solutions restent parfaitement valides.

L'utilitaire font-features-* pour le contrôle typographique

La typographie est souvent sous-exploitée.

Beaucoup de polices OpenType embarquent des fonctionnalités avancées (ligatures, petites capitales, chiffres tabulaires, fractions) qui restent inaccessibles sans toucher au CSS brut.

Tailwind CSS 4.2 introduit l'utilitaire font-features-*, mappé directement sur la propriété CSS font-feature-settings.

Syntaxe et exemples d'utilisation

Vous pouvez activer des fonctionnalités OpenType spécifiques en passant leurs tags en valeur arbitraire :

<!-- Activer les ligatures et les alternates contextuels -->
<p class="font-features-['liga','calt']">
  Texte avec ligatures élégantes
</p>

<!-- Chiffres tabulaires pour un alignement parfait dans les tableaux -->
<td class="font-features-['tnum']">
  1,234.56
</td>

<!-- Petites capitales -->
<span class="font-features-['smcp']">
  Texte en Small Caps
</span>

Tags OpenType les plus courants

Voici les tags que vous utiliserez le plus fréquemment :

Les utilitaires de propriétés logiques CSS

C'est probablement l'ajout le plus structurant de Tailwind CSS 4.2. Les propriétés logiques CSS remplacent les propriétés physiques (top, right, bottom, left) par des propriétés qui s'adaptent automatiquement au mode d'écriture et à la direction du texte.

Cela les rend indispensables pour les sites multilingues supportant des langues RTL (arabe, hébreu) ou des modes d'écriture verticaux (japonais, chinois).

Padding et margin block

Les utilitaires pbs-* et pbe-* contrôlent respectivement padding-block-start et padding-block-end. De la même façon, mbs-* et mbe-* gèrent margin-block-start et margin-block-end :

<!-- Padding block : haut/bas en mode d'écriture horizontal -->
<div class="pbs-4 pbe-8">
  Padding logique vertical
</div>

<!-- Margin block -->
<section class="mbs-6 mbe-12">
  Section avec marges logiques
</section>

En mode d'écriture horizontal (le plus courant), pbs-4 équivaut à pt-4 et pbe-8 équivaut à pb-8.

Mais en mode d'écriture vertical, ces mêmes utilitaires s'adapteront automatiquement pour cibler les bons côtés physiques.

Bordures logiques block

Les utilitaires border-bs-* et border-be-* permettent de définir des bordures sur les côtés logiques block :

<div class="border-bs-2 border-bs-blue-500 border-be border-be-gray-200">
  Bordure en haut (block-start) bleue, bordure en bas (block-end) grise
</div>

Scroll padding et scroll margin block

Pour les layouts avec du scroll snap ou des ancres de navigation, les utilitaires scroll-pbs-*, scroll-pbe-*, scroll-mbs-* et scroll-mbe-* offrent le même contrôle logique sur le scroll :

<div class="scroll-pbs-16">
  Compensation du header fixe lors du scroll vers une ancre
</div>

Inset logiques

Tailwind CSS 4.2 ajoute aussi inset-s-*, inset-e-*, inset-bs-* et inset-be-* qui correspondent respectivement à inset-inline-start, inset-inline-end, inset-block-start et inset-block-end :

<!-- Positionnement logique d'un élément absolu -->
<div class="absolute inset-s-4 inset-bs-0">
  Positionné à 1rem du début inline et collé au block-start
</div>

Ces utilitaires remplacent les anciens start-* et end-* qui sont désormais dépréciés (nous y revenons plus bas).

Les utilitaires inline-size et block-size

Dans la même logique que les propriétés logiques de positionnement, Tailwind CSS 4.2 introduit des utilitaires pour le dimensionnement logique. Les propriétés CSS inline-size et block-size sont les équivalents logiques de width et height.

Liste des utilitaires de dimensionnement

Exemple pratique

<!-- Carte avec dimensionnement logique -->
<div class="inline-80 max-inline-full block-auto min-block-48">
  <p>Cette carte a une largeur logique de 20rem,
     ne dépasse pas 100% de son parent,
     et a une hauteur logique minimale de 12rem.</p>
</div>

L'intérêt de ces utilitaires par rapport à w-* et h-* est qu'ils s'adaptent automatiquement lorsque le mode d'écriture change. Si votre site supporte le japonais en mode vertical, inline-80 deviendra la hauteur physique et block-auto la largeur.

Quatre nouvelles palettes de couleurs

Tailwind CSS 4.2 enrichit la palette de couleurs par défaut avec quatre nouvelles nuances qui comblent des zones de l'espace colorimétrique jusqu'ici absentes du framework :

Mauve

Un gris-violet subtil, parfait pour les interfaces qui recherchent une ambiance douce et contemporaine sans basculer dans un violet franc :

<div class="bg-mauve-50 text-mauve-900 p-6 rounded-lg">
  <h3 class="text-mauve-700 font-semibold">Notification</h3>
  <p>Votre compte a été mis à jour avec succès.</p>
</div>

Olive

Un vert-brun terreux qui apporte de la chaleur organique. Idéal pour les sites liés à la nature, l'alimentation ou le développement durable :

<div class="bg-olive-100 border border-olive-300 text-olive-800 p-4 rounded">
  Produit issu de l'agriculture biologique
</div>

Mist

Un bleu-gris délicat, entre le slate et le sky. Mist est particulièrement adapté aux arrière-plans neutres et aux interfaces techniques :

<nav class="bg-mist-900 text-mist-100 px-6 py-3">
  <span class="text-mist-300">Dashboard</span>
</nav>

Taupe

Un beige-gris chaud qui complète parfaitement les palettes de stone et zinc. Taupe est idéal pour les designs élégants et minimalistes :

<section class="bg-taupe-50 text-taupe-800">
  <div class="border-b border-taupe-200 pb-4 mb-4">
    <h2 class="text-taupe-900">Notre collection</h2>
  </div>
</section>

Chaque palette est disponible en 11 teintes (de 50 à 950), comme toutes les couleurs existantes.

Elles s'intègrent naturellement avec toutes les utilitaires de couleur : bg-*, text-*, border-*, ring-*, shadow-*, etc.

Dépréciations : start-* et end-* remplacés

Pour maintenir la cohérence du système de nommage des propriétés logiques, les utilitaires start-* et end-* sont officiellement dépréciés dans Tailwind CSS 4.2. Ils sont remplacés par inset-s-* et inset-e-*.

Tableau de migration

Migration automatique

L'outil de canonicalisation de Tailwind CSS, disponible via l'upgrade tool et le plugin Prettier, gère automatiquement cette migration. Si vous utilisez la commande npx @tailwindcss/upgrade, vos fichiers seront mis à jour :

<!-- Avant (déprécié) -->
<div class="absolute start-4 end-0">...</div>

<!-- Après (recommandé) -->
<div class="absolute inset-s-4 inset-e-0">...</div>

Correctifs et améliorations dans les versions 4.2.x

Depuis la sortie initiale de la 4.2.0, plusieurs patches ont été publiés pour corriger des bugs et améliorer les performances. Voici un résumé des correctifs les plus importants.

Version 4.2.1 — Corrections mineures

• Correction de la détection de classes contenant des caractères . dans les fichiers MDX à l'intérieur d'accolades.
• Rétablissement de la compatibilité avec les tirets finaux dans les noms d'utilitaires fonctionnels.

Version 4.2.2 — Support de Vite 8

• Ajout du support de Vite 8 dans @tailwindcss/vite, garantissant la compatibilité avec la dernière version du bundler.
• Correction d'un crash lors de l'étape de canonicalisation avec des utilitaires contenant des règles @property.
• Amélioration de la canonicalisation pour les valeurs dépassant l'échelle d'espacement par défaut.

Version 4.2.3 — Canonicalisation avancée

Cette version apporte une série d'améliorations majeures à la canonicalisation :

• Fusion automatique des valeurs arbitraires en utilitaires raccourcis : px-[1.2rem] py-[1.2rem] devient p-[1.2rem].
• Fusion des bordures directionnelles : border-t-* border-b-* en border-y-*, et border-l-* border-r-* en border-x-*.
• Fusion similaire pour scroll-m*, scroll-p*, overflow-* et overscroll-*.
• Migration automatique de overflow-ellipsis vers text-ellipsis.

Version 4.2.4 — Résolution des imports

• Correction de la résolution des imports dans @import et @plugin lors de l'utilisation d'alias Vite avec @tailwindcss/vite.

Guide de mise à jour vers Tailwind CSS 4.2

Que vous soyez sur Tailwind CSS 4.0, 4.1 ou même 3.x, voici comment effectuer la mise à jour proprement.

Depuis Tailwind CSS 4.0 ou 4.1

La mise à jour est triviale si vous êtes déjà sur la branche 4.x :

# npm
npm install tailwindcss@latest

# pnpm
pnpm update tailwindcss

# yarn
yarn upgrade tailwindcss --latest

N'oubliez pas de mettre à jour les packages d'intégration si vous les utilisez :

npm install @tailwindcss/vite@latest @tailwindcss/postcss@latest

Ou, si vous souhaitez adopter le nouveau plugin webpack :

npm install @tailwindcss/webpack@latest

Depuis Tailwind CSS 3.x

Si vous migrez depuis la version 3, utilisez l'outil d'upgrade automatique :

npx @tailwindcss/upgrade

Cet outil analyse votre code, migre la configuration et met à jour les classes dépréciées.

Depuis la 4.2.3, il utilise config.content pour déterminer les fichiers à migrer, ce qui améliore significativement la précision de la migration.

Bonnes pratiques pour tirer parti de Tailwind CSS 4.2

Voici quelques recommandations pour exploiter au maximum les nouveautés de cette version.

Adoptez les propriétés logiques dès maintenant

Même si votre site n'est pas encore multilingue, utiliser les propriétés logiques est une bonne habitude. Si vous ajoutez un jour le support RTL ou un mode d'écriture vertical, votre layout s'adaptera sans modification de code :

<!-- Préférez ceci -->
<div class="pbs-4 pbe-4 inline-full">...</div>

<!-- Plutôt que cela (physique) -->
<div class="pt-4 pb-4 w-full">...</div>

Exploitez les nouvelles couleurs avec parcimonie

Les quatre nouvelles palettes sont séduisantes, mais résistez à la tentation de toutes les utiliser dans un même projet. Choisissez une ou deux palettes complémentaires et restez cohérent dans votre design system.

Utilisez font-features-* pour les interfaces data-heavy

Si vous développez des dashboards ou des interfaces affichant beaucoup de données numériques, activez font-features-['tnum'] sur vos tableaux. Les chiffres tabulaires améliorent considérablement la lisibilité en garantissant un alignement parfait des colonnes.

Migrez les dépréciations proactivement

N'attendez pas qu'une future version supprime les utilitaires dépréciés. Utilisez l'outil d'upgrade ou un simple rechercher-remplacer dans votre éditeur pour passer de start-*/end-* à inset-s-*/inset-e-*.

Comparaison avec les versions précédentes

Pour mieux situer cette release dans l'évolution de Tailwind CSS 4.x, voici un comparatif des fonctionnalités clés :

Questions fréquentes

Oui, Tailwind CSS 4.2 est entièrement rétrocompatible avec les versions 4.0 et 4.1. Les seuls changements "breaking" concernent la dépréciation des utilitaires start-* et end-*, qui continuent de fonctionner mais génèrent un avertissement. Tous vos styles existants resteront valides après la mise à jour.

Ce n'est pas obligatoire, mais c'est une bonne pratique. Les propriétés logiques ne changent rien au rendu en mode LTR horizontal, mais elles préparent votre code à une éventuelle internationalisation. De plus, elles permettent aux outils de canonicalisation de Tailwind de mieux optimiser vos classes.

Non, ce sont deux approches complémentaires. Le plugin webpack est conçu pour les projets qui utilisent webpack comme bundler et souhaitent éviter la couche PostCSS supplémentaire. Si votre setup actuel avec PostCSS fonctionne bien, vous n'avez aucune raison de migrer vers le plugin webpack. C'est une option supplémentaire, pas un remplacement.

Vous pouvez utiliser l'outil d'upgrade officiel avec npx @tailwindcss/upgrade qui gère cette migration automatiquement. L'étape de canonicalisation (disponible aussi via le plugin Prettier de Tailwind) transforme également ces utilitaires lors du formatage de votre code. Alternativement, un simple rechercher-remplacer dans votre IDE fera l'affaire pour les cas simples.

L'équipe de Tailwind Labs n'a pas encore publié de roadmap officielle pour la version 4.3. Cependant, au vu de la trajectoire du projet (renforcement du support des propriétés logiques CSS, amélioration continue de la canonicalisation, et expansion des intégrations avec les bundlers) nous pouvons nous attendre à un approfondissement de ces axes. Nous vous en parlerons ici !

Grâce à notre formation complète !