Publication en open source de l’avancement de Tailwind CSS v4.0

• Un nouveau moteur haute performance, Oxide, est en cours de développement pour Tailwind CSS v4.0.
• Il est conçu pour simplifier l’expérience développeur et tirer parti des dernières évolutions de la plateforme web.
• Initialement prévu pour une sortie dans une release v3.x, il a finalement été décidé de le lancer comme une nouvelle génération du framework avec v4.0.
• Le projet en est encore à ses débuts et il reste beaucoup de travail, mais une première version alpha publique a été taguée pour permettre de commencer les expérimentations.

Un nouveau moteur, conçu pour la vitesse

• Le nouveau moteur a été entièrement réécrit depuis zéro et offre plus de rapidité avec moins de code.
• Il permet des temps de build jusqu’à 10 fois plus rapides ; le site de Tailwind CSS peut être buildé en 105 ms et le kit UI Catalyst en 55 ms seulement.
• La taille d’installation du nouveau moteur a été réduite de plus de 35 %, tout en intégrant des packages natifs lourds comme Rust et Lightning CSS.
• Rust est utilisé pour prendre en charge les parties les plus coûteuses du framework, tandis que le cœur reste en TypeScript pour préserver l’extensibilité.
• Le nouveau moteur ne dépend que de Lightning CSS.
• Une propre analyseur CSS a été écrit, avec des structures de données conçues pour offrir une vitesse d’analyse 2 fois supérieure à PostCSS.

Une toolchain intégrée

• Tailwind CSS v4 n’est plus simplement un plugin, mais un outil tout-en-un pour traiter le CSS.
• La gestion de @import, le vendor prefixing, la prise en charge de l’imbrication et plus encore sont intégrés, sans configuration supplémentaire.
• Les fonctionnalités CSS modernes comme oklch() et les plages de media queries sont transformées dans une syntaxe offrant une meilleure compatibilité navigateur.
• Un plugin PostCSS continue d’être proposé, mais l’équipe explore aussi les plugins de bundler et fournit un plugin Vite officiel avec la première release alpha.

Conçu pour le web moderne

• Tailwind CSS v4 vise à construire un framework qui restera à la pointe pendant les prochaines années.
• De vraies règles @layer sont utilisées pour résoudre des problèmes de spécificité qui posaient souci auparavant.
• @property est utilisé pour définir clairement les propriétés personnalisées internes et permettre des effets comme les dégradés d’arrière-plan.
• color-mix facilite la modification de l’opacité des variables de couleur ou l’ajustement de l’opacité de currentColor.
• Les container queries sont prises en charge directement dans le cœur, avec la prise en charge des plages via les nouveaux variants @min-* et @max-*.

Des variants composables

• La nouvelle architecture permet de composer ensemble des variants qui s’appliquent à différents sélecteurs.
• Dans les versions précédentes, des variants comme group-has-* étaient définis explicitement dans le framework ; désormais, group-* peut être composé avec le variant has-* existant.

Détection de contenu zéro configuration

• Dans la release alpha initiale, il n’est pas possible de configurer les chemins content, et pour la plupart des projets il ne sera plus nécessaire de le faire.
• Si vous utilisez le plugin PostCSS ou la CLI, Tailwind parcourt l’ensemble du projet pour trouver les fichiers de template.
• Si vous utilisez le plugin Vite, il s’appuie sur le graphe de modules pour savoir précisément quels fichiers sont réellement utilisés.

Une configuration pensée CSS avant tout

• L’un des objectifs majeurs de Tailwind CSS v4.0 est de faire en sorte que le framework paraisse natif au CSS, et non comme une bibliothèque JavaScript.
• Après installation, il s’ajoute au projet avec une simple instruction CSS @import.
• Au lieu de définir toutes les personnalisations dans un fichier de configuration JavaScript, il utilise des variables CSS.

Ce qui change

• Les breaking changes ne sont pas prises à la légère, mais dans v4 certains éléments sont gérés différemment.
• Les utilitaires non documentés sont supprimés.
• Le plugin PostCSS et la CLI sont désormais fournis sous forme de packages séparés.
• La couleur de bordure par défaut est supprimée.
• Par défaut, l’utilitaire ring devient maintenant un anneau de 1 px utilisant currentColor.

La roadmap vers v4.0

• Le nouveau moteur a été entièrement réécrit depuis zéro, avec un focus total sur l’expérience développeur autour de la nouvelle approche de configuration.
• La rétrocompatibilité est considérée comme extrêmement importante et constitue un chantier majeur pour une release v4.0 stable.
• Cela inclut la prise en charge des fichiers de configuration JavaScript, la configuration explicite des chemins de contenu, la prise en charge d’autres modes sombre, le support des plugins et des utilitaires personnalisés, la configuration des préfixes de classes, le support des safelists et blocklists, la prise en charge de la configuration important, le support de la fonction theme(), le support d’une CLI autonome, etc.

Essayer la version alpha

• Plusieurs releases alpha ont déjà été taguées, et vous pouvez commencer à expérimenter dans vos projets dès aujourd’hui.
• Si vous utilisez l’extension Tailwind CSS IntelliSense, vous devez passer à la version pre-release depuis la page de l’extension VS Code.
• Si vous découvrez un problème, l’équipe vous invite à le signaler sur GitHub.

Utiliser Vite

• Installez l’alpha de Tailwind CSS v4 ainsi que le nouveau plugin Vite.
• Ajoutez le plugin dans le fichier vite.config.ts.
• Importez Tailwind dans le fichier CSS principal.

Utiliser PostCSS

• Installez l’alpha de Tailwind CSS v4 ainsi que le package séparé du plugin PostCSS.
• Ajoutez le plugin dans le fichier postcss.config.js.
• Importez Tailwind dans le fichier CSS principal.

Utiliser la CLI

• Installez l’alpha de Tailwind CSS v4 ainsi que le package CLI séparé.
• Importez Tailwind dans le fichier CSS principal.
• Compilez le CSS à l’aide de l’outil CLI.

L’avis de GN⁺

• La publication en open source de Tailwind CSS v4.0 donne à la communauté de développeurs l’occasion de découvrir en avance de nouvelles fonctionnalités et améliorations. Cela signifie aussi que les développeurs peuvent fournir du feedback sur le framework et contribuer à une release finale plus stable.
• Les gains de performance du nouveau moteur semblent réduire fortement les temps de build, ce qui devrait être particulièrement utile pour les projets de grande taille ou les environnements où les cycles de développement rapides sont essentiels.
• La combinaison de Rust et de TypeScript reflète une approche moderne visant à concilier performance et extensibilité. Les parties écrites en Rust maximisent les performances, tandis que TypeScript permet aux développeurs d’étendre et de maintenir plus facilement l’ensemble.
• La nouvelle méthode de configuration basée sur des variables CSS est plus proche de CSS que les réglages existants basés sur JavaScript, et pourrait faciliter l’intégration avec les design systems.
• Ces changements pourront demander un certain travail de migration aux utilisateurs existants, mais ils devraient à long terme aboutir à une base de code plus simple et plus facile à maintenir.

[GN⁺]

Avis Hacker News

• Tailwind CSS est la deuxième meilleure chose qui soit arrivée au frontend, seule Vue 3 le surpasse.

  • Plus besoin de se fatiguer à nommer les classes CSS, et il n’y a ni CSS dupliqué ni problèmes de classes en conflit.
  • Tout le code est dans un seul fichier, donc on peut visualiser un composant rien qu’en lisant son code.
  • Je ne reviendrai pas à SCSS, et je pense que la combinaison Vue 3, TailwindCSS et Vite est ce qu’il y a de mieux.

• En tant que critique acharné de Tailwind, toutes les annonces autour de la configuration CSS-first sont très bienvenues.

  • On peut tirer parti des design tokens, des resets, etc. de Tailwind, tout en personnalisant via du vrai CSS.
  • Cela propose une nouvelle façon d’utiliser Tailwind « légèrement », sans abandonner l’architecture moderne du CSS, la cascade, ni même le Shadow DOM des Web Components.

• CTRL+u montre bien la qualité de la syntaxe.

  • Par exemple, il faut une ligne de code intuitive pour créer une boîte aux coins arrondis avec des sections en haut et en bas.

• Ils n’ont pas encore travaillé sur le CLI autonome, mais il sera impérativement terminé avant la sortie de la v4.0.

  • Vu le reste des annonces de cette release, j’imagine que ce sera construit en Rust.
  • Je préfère qu’il n’embarque pas Node, surtout si cela implique de dépendre de l’outil pkg de Vercel, désormais abandonné.

• Il y a beaucoup d’améliorations prometteuses.

  • Ce qui m’enthousiasme le plus, c’est la possibilité de contrôler le thème via le CSS au lieu de l’étendre via du JS.

• J’aimerais que Tailwind prenne en charge l’attributify comme unocss.

  • C’est bien plus lisible pour les mises en page complexes.

• Je ne suis pas développeur frontend, mais je maintiens quelques sites web, et ils utilisent tous Tailwind.

  • Les mainteneurs de Tailwind ont un très bon instinct pour définir les priorités, ainsi qu’un excellent sens du design.
  • Tailwind ne se comprend pas tant qu’on ne l’a pas essayé, mais à chaque version ils livrent un produit plus abouti.
  • Dans cette version, il n’y a pas grand-chose qui ait changé du point de vue de la compatibilité, mais il pourrait y avoir plus de changements une fois la version 4 officialisée.
  • Les perspectives du nouveau moteur sont très impressionnantes, et des builds plus rapides sont toujours les bienvenus.

• Je me demande s’il existe un bon tutoriel/guide sur Tailwind.

• Je me demande si quelqu’un utilise tailwindcss avec htmx ou une autre approche HATEOAS.

  • En principe, l’hypertexte ne devrait pas avoir de lien avec le styling, mais quelque chose comme Tailwind peut aller à l’encontre de cela.
  • CSS et HATEOAS vont parfaitement ensemble parce que le markup et le styling sont séparés, mais je me demande comment les gens s’y prennent avec quelque chose comme tailwindcss.

• J’ai voulu l’utiliser dans un projet de démo, mais import from "node:@tailwindcss/postcss@latest" déclenche une erreur liée au champ exports de package.json.

  • Malgré cela, le billet de blog mentionne qu’il n’est pas nécessaire d’utiliser postcss-import, tout en l’incluant quand même comme dépendance.