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/webpackEnsuite, 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.
Plus besoin de configurer PostCSS séparément pour Tailwind. Le plugin gère automatiquement le scanning de vos fichiers source, la génération des classes utilitaires et l'optimisation du CSS final.
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 :
| Tag | Fonctionnalité | Description |
|---|---|---|
liga | Ligatures standard | Fusionne certaines paires de caractères (fi, fl…) |
calt | Alternates contextuels | Ajuste les glyphes selon le contexte |
tnum | Chiffres tabulaires | Chiffres de largeur fixe pour l'alignement |
smcp | Petites capitales | Transforme les minuscules en petites capitales |
frac | Fractions | Affiche les fractions en format typographique |
onum | Chiffres old-style | Chiffres avec ascendantes et descendantes |
ss01–ss20 | Stylistic sets | Jeux de glyphes alternatifs définis par la police |
Toutes les polices ne supportent pas tous les tags OpenType. Vérifiez les fonctionnalités disponibles dans votre police avant d'appliquer ces utilitaires, sinon ils n'auront aucun effet ! 😉
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
| Utilitaire Tailwind | Propriété CSS | Équivalent physique |
|---|---|---|
inline-* | inline-size | w-* (en mode horizontal) |
min-inline-* | min-inline-size | min-w-* |
max-inline-* | max-inline-size | max-w-* |
block-* | block-size | h-* (en mode horizontal) |
min-block-* | min-block-size | min-h-* |
max-block-* | max-block-size | max-h-* |
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
| Ancien (déprécié) | Nouveau (recommandé) | Propriété CSS |
|---|---|---|
start-4 | inset-s-4 | inset-inline-start: 1rem |
end-0 | inset-e-0 | inset-inline-end: 0 |
start-auto | inset-s-auto | inset-inline-start: auto |
end-full | inset-e-full | inset-inline-end: 100% |
start-px | inset-s-px | inset-inline-start: 1px |
-start-4 | -inset-s-4 | inset-inline-start: -1rem |
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>Les utilitaires dépréciés continueront de fonctionner pour le moment, mais ils seront supprimés dans une future version majeure. Nous vous recommandons de migrer dès maintenant pour éviter les surprises.
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]devientp-[1.2rem]. - Fusion des bordures directionnelles :
border-t-* border-b-*enborder-y-*, etborder-l-* border-r-*enborder-x-*. - Fusion similaire pour
scroll-m*,scroll-p*,overflow-*etoverscroll-*. - Migration automatique de
overflow-ellipsisverstext-ellipsis.
Version 4.2.4 — Résolution des imports
- Correction de la résolution des imports dans
@importet@pluginlors 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 --latestN'oubliez pas de mettre à jour les packages d'intégration si vous les utilisez :
npm install @tailwindcss/vite@latest @tailwindcss/postcss@latestOu, 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/upgradeCet 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.
Avant toute migration, créez une branche dédiée avec git et vérifiez visuellement les résultats après l'upgrade. L'outil automatique couvre la majorité des cas, mais certaines configurations custom peuvent nécessiter des ajustements manuels.
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 :
| Fonctionnalité | 4.0 | 4.1 | 4.2 |
|---|---|---|---|
| Engine Oxide (Rust) | ✅ | ✅ | ✅ |
| Plugin Vite natif | ✅ | ✅ | ✅ |
| Plugin webpack natif | ❌ | ❌ | ✅ |
| Propriétés logiques block | ❌ | ❌ | ✅ |
| Inline/block size utilities | ❌ | ❌ | ✅ |
| font-feature-settings | ❌ | ❌ | ✅ |
| Couleurs mauve, olive, mist, taupe | ❌ | ❌ | ✅ |
| Canonicalisation avancée | Basique | Améliorée | Complète |
| Support Vite 8 | ❌ | ❌ | ✅ (4.2.2+) |
Questions fréquentes
Tailwind CSS 4.2 est-il rétrocompatible avec la version 4.1 ?
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.
Faut-il utiliser les propriétés logiques CSS même si mon site est uniquement en français ?
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.
Le plugin @tailwindcss/webpack remplace-t-il @tailwindcss/postcss ?
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.
Comment migrer automatiquement de start-* / end-* vers inset-s-* / inset-e-* ?
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.
Quelles sont les prochaines fonctionnalités attendues pour Tailwind CSS 4.3 ?
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 !
Comment se former à Tailwind CSS 4.2 ?
Grâce à notre formation complète !