Sortie de Tailwind CSS v4.0

• Sortie de Tailwind CSS v4.0

  • Nouvelle version optimisée pour les performances et la flexibilité, qui tire pleinement parti des avancées des plateformes web modernes
  • Grâce à un nouveau moteur hautes performances, la vitesse des builds complets est jusqu’à 5 fois plus rapide, et celle des builds incrémentaux plus de 100 fois plus rapide
  • Conçu pour le web moderne en exploitant les fonctionnalités CSS les plus récentes

• Nouveau moteur hautes performances

  • Tailwind CSS v4.0 est une réécriture complète du framework, avec une architecture optimisée pour maximiser la vitesse
  • Les builds incrémentaux sont plus de 100 fois plus rapides et se terminent en quelques microsecondes

• Conçu pour le web moderne

  • Exploite les dernières fonctionnalités CSS comme les cascade layers natives, les propriétés personnalisées enregistrées et color-mix()
  • Utilise des propriétés logiques pour simplifier la prise en charge du RTL et réduire la taille du CSS généré

• Installation simplifiée

  • Le processus d’installation a été simplifié, avec moins de dépendances, et il suffit d’ajouter une seule ligne de code dans le fichier CSS
  • Prise en charge native de la directive @import, sans plugin externe

• Plugin Vite

  • Les utilisateurs de Vite peuvent intégrer Tailwind avec @tailwindcss/vite
  • L’utilisation du plugin Vite améliore encore davantage les performances

• Détection automatique du contenu

  • Détecte automatiquement les fichiers de template, sans configuration nécessaire
  • Ignore automatiquement les éléments présents dans le fichier .gitignore pour éviter les analyses inutiles

• Prise en charge intégrée des imports

  • @import permet d’intégrer en ligne d’autres fichiers CSS
  • Le système d’import optimisé pour Tailwind CSS améliore encore les performances

• Configuration prioritairement en CSS

  • Le projet peut être configuré directement en CSS au lieu de JavaScript
  • Personnalisation directe dans les fichiers CSS, sans fichier tailwind.config.js

• Variables de thème CSS

  • Les design tokens sont fournis sous forme de variables CSS, faciles à référencer à l’exécution

• Valeurs utilitaires et variantes dynamiques

  • Simplification pour permettre à diverses utilitaires et variantes d’accepter des valeurs arbitraires
  • Facilite la définition de tailles de grille ou d’attributs de données personnalisés

• Palette de couleurs P3 modernisée

  • La palette de couleurs par défaut passe de rgb à oklch pour offrir des couleurs plus vives

• Container queries

  • Fournit nativement une API pour styliser les éléments selon la taille du conteneur

• Nouveaux utilitaires de transformation 3D

  • Ajout d’une API permettant de transformer des éléments dans l’espace 3D

• API de dégradés étendue

  • Ajout d’utilitaires pour créer des dégradés linéaires, coniques et radiaux

• Prise en charge de @starting-style

  • Ajout d’une fonctionnalité permettant de faire transiter les propriétés lors de l’affichage initial d’un élément, sans JavaScript

• Variante not-*

  • Ajout de la prise en charge de la pseudo-classe CSS :not()

• Nouveaux utilitaires et variantes supplémentaires

  • Ajout de divers nouveaux utilitaires et variantes comme inset-shadow-*, field-sizing, color-scheme, etc.

Tailwind CSS v4.0 est une version récente qui pousse au maximum les performances et la flexibilité, avec de nombreuses nouvelles fonctionnalités et améliorations.

[GN⁺]

Avis Hacker News

• Évaluation positive de l’évolution de Tailwind v4, avec comme gros atouts la prise en charge des variables CSS et d’une configuration uniquement en CSS. Tailwind remplirait désormais très bien son rôle d’utilitaire

• CSS est devenu plus convivial qu’autrefois, et utiliser directement les propriétés de style dans le HTML peut être plus simple. Cependant, certains préfèrent toujours éviter les attributs de style

• L’intérêt de Tailwind est de pouvoir lire les styles à un seul endroit. Les noms de classes sont longs, mais il est facile de modifier les styles, ce qui le rend utile

• Lors de la première découverte de Tailwind, le fait de devoir réapprendre le CSS semblait pesant. Mais son utilité pour le travail en équipe et l’évolutivité a fini par s’imposer. Une préférence demeure toutefois pour les feuilles de style de base

• Sur des projets utilisant Tailwind, l’outil a été apprécié pour son côté intuitif et sa documentation bien faite. Il fait gagner du temps en évitant d’avoir à réfléchir aux noms de styles

• La dernière mise à jour de Tailwind a réduit les temps de build et supprimé le besoin d’une configuration JS. Le CSS peut désormais prendre en charge l’essentiel du travail

• Tentative d’adoption de Tailwind, mais le résultat n’a pas été jugé meilleur qu’avec Bootstrap. La question reste ouverte de savoir comment obtenir un rendu correct sans être designer

• Le design propre mais générique de Tailwind est désormais très répandu. Cela illustre à la fois les avantages et les limites des styles inline de Tailwind

• La mise à jour vers Tailwind v4 a eu un impact sur des applications existantes. En raison de problèmes de compatibilité, il faut soit rester sur la v3, soit modifier les scripts de build