Composed
Langages et Runtimes

Tailwind CSS v4.3 : les nouveautés

Découvrez les nouveautés de Tailwind CSS v4.3 (et de 4.2)

Publié le par Emmanuel LASTRA 2 min de lecture

Tailwind CSS v4.3 : les nouveautés

L’équipe de Tailwind a publié la version 4.3 de son framework CSS, avec plusieurs nouveautés intéressantes. Voici un aperçu des principales fonctionnalités introduites dans cette version. La release note contient également les nouveautés de la v4.2, qui n’avait pas fait l’objet d’un article de release dédié.

Les nouveautés de Tailwind CSS v4.2

Reprenons rapidement les nouveautés de Tailwind CSS v4.2 qui n’avaient pas fait l’objet d’une release note dédiée :

  • Quatres nouvelles palettes de couleurs : mauve, olive, mist et taupe.
  • Une classe dédiée @tailwindcss/webpack pour une meilleure intégration avec les projets utilisant Webpack qui évite un détours par PostCSS avec des gains de performance significatifs.
  • de nouveaux utilitaires dont pbs-*, mbs-*, inline-* et block-*.
  • Ajout d’un utilitaire font-features-* pour piloter la propriété CSS font-feature-settings, dont les features OpenType.

Les nouveautés de Tailwind CSS v4.3

  • De nouveaux utilitaires pour la scrollbar : scrollbar-auto, scrollbar-thin et scrollbar-none contrôlent scrollbar-width ; scrollbar-thumb-* et scrollbar-track-* gèrent la couleur, avec support des modificateurs d’opacité ; scrollbar-gutter-auto, scrollbar-gutter-stable et scrollbar-gutter-both évitent les décalages de mise en page lors de l’apparition d’une scrollbar.

  • Ajout de @container-size pour créer des conteneurs de type size (plutôt qu’inline-size), permettant d’utiliser des unités comme cqb ou cqh qui dépendent de la dimension block du conteneur. Les conteneurs nommés sont supportés via @container-size/{name}.

  • La propriété CSS zoom est supportée depuis Chrome 1 (2008) mais n’a atteint un support universel qu’en 2024. Tailwind v4.3 lui consacre des utilitaires dédiés (zoom-75, zoom-100, zoom-125…), compatibles avec les valeurs arbitraires et les variables CSS.

  • Les utilitaires tab-* permettent de définir la largeur visuelle des caractères de tabulation via tab-size, utiles pour les blocs de code et les éditeurs. Valeurs numériques (tab-2, tab-8), arbitraires et variables CSS sont supportées.

  • La directive @variant supporte désormais les variantes empilées (hover:focus) et les variantes composées (un même bloc CSS partagé entre plusieurs variantes séparées par une virgule), pour les cas où l’on préfère styler en CSS plutôt que dans le balisage.

  • Les @utility fonctionnels gagnent le support de --default(…) : passé à --value(…), il permet à un utilitaire de fonctionner avec ou sans valeur explicite. Ainsi tab résout à 4 par défaut, tandis que tab-2 résout à 2. Pratique pour concevoir des API cohérentes dans les plugins et les utilitaires personnalisés.

Comment mettre à jour vers Tailwind CSS v4.3

Selon votre configuration utilisez l’une des commandes suivantes pour mettre à jour vers Tailwind CSS v4.3 et bénéficier de ces nouvelles fonctionnalités :

# Tailwind CLI
npm install tailwindcss@latest @tailwindcss/cli@latest

# Vite
npm install tailwindcss@latest @tailwindcss/vite@latest

# PostCSS
npm install tailwindcss@latest @tailwindcss/postcss@latest

# Webpack
npm install tailwindcss@latest @tailwindcss/webpack@latest

Source

Article de release officiel.

Tags

tailwind css