Tailwind CSS v4.0 est une toute nouvelle version du framework optimisée pour la performance et la flexibilité, avec une configuration et une expérience de personnalisation réimaginées, et tirant pleinement parti des dernières avancées que la plateforme web a à offrir.Voici les particularités de cette nouvelle version :
- Nouveau moteur haute performance : où les constructions complètes sont jusqu'à 5 fois plus rapides, et les constructions incrémentales plus de 100 fois plus rapides - et mesurées en microsecondes.
- Conçu pour le web moderne : construit sur des fonctionnalités CSS de pointe comme les couches en cascade, les propriétés personnalisées enregistrées avec @property, et color-mix().
- Installation simplifiée : moins de dépendances, zéro configuration, et une seule ligne de code dans votre fichier CSS.
- Plugin Vite de première partie : intégration étroite pour des performances maximales et une configuration minimale.
- Détection automatique du contenu : tous vos fichiers de modèles sont découverts automatiquement, sans aucune configuration requise.
- Prise en charge intégrée de l'importation : aucun outil supplémentaire n'est nécessaire pour regrouper plusieurs fichiers CSS.
- Configuration CSS prioritaire : une expérience de développement repensée où vous personnalisez et étendez le framework directement dans CSS au lieu d'un fichier de configuration JavaScript.
- Variables de thème CSS : tous vos jetons de conception sont exposés en tant que variables CSS natives afin que vous puissiez y accéder n'importe où.
- Valeurs utilitaires dynamiques et variantes : arrêtez de deviner quelles valeurs existent dans votre échelle d'espacement, ou d'étendre votre configuration pour des choses comme les attributs de données de base.
- Palette de couleurs P3 modernisée : une palette de couleurs redessinée et plus vivante qui tire pleinement parti de la technologie d'affichage moderne.
- Requêtes sur les conteneurs : API de première classe pour styliser les éléments en fonction de la taille de leur conteneur, sans nécessiter de plugins.
- Nouveaux utilitaires de transformation 3D : transformez les éléments dans l'espace 3D directement dans votre HTML.
- API de dégradé étendues : dégradés radiaux et coniques, modes d'interpolation, etc.
- Prise en charge du style @starting : une nouvelle variante que vous pouvez utiliser pour créer des transitions d'entrée et de sortie, sans avoir besoin de JavaScript.
- Variante not-* : ne stylisez un élément que lorsqu'il ne correspond pas à une autre variante, à un sélecteur personnalisé ou à une requête de média ou de fonctionnalité.
- Encore plus de nouveaux utilitaires et de variantes : y compris la prise en charge de la trame de couleur, de la taille des champs, des ombres complexes, de l'inertage, et plus encore.
Nouveau moteur haute performance
Tailwind CSS v4.0 est une réécriture complète du framework, qui prend en compte les enseignements sur l'architecture au fil des ans et l'optimise pour qu'il soit aussi rapide que possible.
Selon les évaluations, les reconstructions complètes étaient plus de 3,5 fois plus rapides et les constructions incrémentielles étaient plus de 8 fois plus rapides.
Voici les temps de construction médians observés en comparant Tailwind CSS v4.0 à Catalyst :
L'amélioration la plus impressionnante concerne les constructions incrémentielles qui n'ont pas besoin de compiler de nouvelles feuilles de style CSS - ces constructions seraient plus de 100 fois plus rapides et se terminent en quelques microsecondes. Et plus vous travaillez longtemps sur un projet, plus vous rencontrez de ces constructions parce que vous utilisez simplement des classes que vous avez déjà utilisées auparavant, comme flex, col-span-2, ou font-bold.
Conçu pour le web moderne
La plateforme a beaucoup évolué depuis la sortie de Tailwind CSS v3.0, et la v4.0 tire pleinement parti de ces améliorations.
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | @layer theme, base, components, utilities; @layer utilities { .mx-6 { margin-inline: calc(var(--spacing) * 6); } .bg-blue-500\/50 { background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent); } } @property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; } |
Voici quelques fonctionnalités CSS modernes :
- Les couches de cascade natives qui donnent plus de contrôle sur la façon dont les différentes règles de style interagissent les unes avec les autres.
- Propriétés personnalisées enregistrées permettant de faire des choses comme animer des gradients, et améliorant de manière significative les performances sur les grandes pages.
- color-mix() qui permet d'ajuster l'opacité de n'importe quelle valeur de couleur, y compris les variables CSS et currentColor.
- Propriétés logiques simplifiant le support RTL et réduisant la taille de votre CSS généré.
Beaucoup de ces fonctionnalités ont simplifié Tailwind en interne, réduisant la surface pour les bogues et rendant le framework plus facile à maintenir.
Installation simplifiée
Le processus d'installation dans la v4.0 a été simplifié, en réduisant le nombre d'étapes et en supprimant de nombreux éléments parasites.
1. Installer Tailwind CSS
| Code : | Sélectionner tout |
npm i tailwindcss @tailwindcss/postcss;
2. Ajouter le plugin PostCSS
| Code : | Sélectionner tout |
1 2 3 | export default { plugins: ["@tailwindcss/postcss"], }; |
3. Importer Tailwind dans votre CSS
| Code : | Sélectionner tout |
@import "tailwindcss";
Avec les améliorations apportées à ce processus pour la v4.0, Tailwind semble plus léger que jamais :
- Une seule ligne de CSS : plus besoin de directives @tailwind, il suffit d'ajouter @import "tailwindcss" et de commencer à construire.
- Zéro configuration : vous pouvez commencer à utiliser le framework sans rien configurer, pas même les chemins d'accès à vos fichiers de template.
- Aucun plugin externe n'est nécessaire : les règles @import sont regroupées pour vous dès le départ, et utilisent Lightning CSS sous le capot pour la préfixation des fournisseurs et les transformations syntaxiques modernes.
Bien sûr, vous n'aurez à le faire qu'une fois par projet, mais cela s'accumule lorsque vous démarrez et abandonnez un projet secondaire différent tous les week-ends.
Encore plus d'utilitaires et de variantes
Cette version contient de nouveaux utilitaires et variantes, y compris :
- Nouveaux utilitaires inset-shadow-* et inset-ring-* permettant d'empiler jusqu'à quatre couches d'ombres sur un seul élément.
- De nouveaux utilitaires de redimensionnement des champs pour redimensionner automatiquement les zones de texte sans écrire une seule ligne de JavaScript.
- Nouveaux utilitaires de jeux de couleurs pour vous débarrasser enfin de ces affreuses barres de défilement lumineuses en mode sombre.
- Nouveaux utilitaires d'étirement des polices pour ajuster avec soin les polices variables qui prennent en charge différentes largeurs.
- Nouvelle variante inert pour styliser les éléments non interactifs marqués par l'attribut inert.
- Nouvelles variantes nth-* pour faire des choses vraiment intelligentes que vous finirez par regretter.
- Nouvelle variante in-* qui ressemble beaucoup à group-*, mais sans avoir besoin de la classe group.
- Prise en charge de :popover-open en utilisant la variante open existante pour cibler également les popovers ouverts.
- Nouvelle variante descendant pour styliser tous les éléments descendants, pour le meilleur ou pour le pire.
Source : Annonce de Tailwind CSS v4.0
Et vous ?
Pensez-vous que ces nouvelles fonctionnalités sont crédibles ou pertinentes ? Quel est votre avis sur cette version ?Voir aussi :
Tailwind CSS v3.3 est désormais disponible, et apporte un large éventail de nouvelles fonctionnalités, dont une palette de couleurs étendue pour les tons sombres et un support pour ESM/TS La version 3.0 de Tailwind CSS, le framework qui permet de créer rapidement des sites Web modernes, est disponible, il apporte des gains de performance incroyables CSS (Les feuilles de style en cascade ) serait à nouveau redevenu « amusant » d'après l'ingénieur logiciel Jeff Sandberg, mais c'est loin d'être un avis généralement partagé