Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, est l'un des langages principaux du Web. Utilisé pour « styliser » un document HTML, le CSS décrit comment les éléments HTML doivent être affichés. Le 10 décembre, Adam Wathan, CEO de Tailwind Labs, a annoncé la sortie de version 3 du framework Tailwind CSS. Cette version majeure apporte des gains de performance impressionnants, des améliorations du flux de travail et une de fonctionnalités.Tailwind CSS est un utilitaire, mais aussi un framework CSS rempli de classes comme flex, pt-4, text-center et rotate-90, qui peut être composé pour construire n'importe quel design, directement dans les balises HTML. Il a été développé pour permettre de construire rapidement des sites Web modernes sans jamais quitter le code HTML. Voici, ci-dessous, quelques nouveautés apportées par la version 3 de Tailwind CSS :
Just-in-Time, un moteur stable
En mars dernier, Tailwind Labs a présenté son tout nouveau moteur Just-in-Time, qui a permis de réaliser d'énormes gains de performance, de débloquer de nouvelles fonctions, comme les valeurs arbitraires, et de faire disparaître les configurations complexes des variantes. Dans Tailwind CSS v3.0, le nouveau moteur est devenu stable et a remplacé le moteur classique, de sorte que chaque projet Tailwind peut bénéficier de ces améliorations dès sa sortie de l'emballage.
API Scroll snap
L’équipe a ajouté un ensemble complet d'utilitaires pour le module CSS Scroll Snap, ce qui permet de créer des expériences de défilement très riches directement dans le code HTML :
| Code html : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="snap-x ..."> <div class="snap-center ..."> <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="snap-center ..."> <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="snap-center ..."> <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="snap-center ..."> <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="snap-center ..."> <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> </div> <div class="snap-center ..."> <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" /> </div> </div> |
Mise en page des multi-colonnes
Les colonnes sont maintenant prises en charge le type de mise en page des journaux. Elles sont en fait très utiles, et sont parfaites pour des choses comme les dispositions de navigation en bas de page.
Contrôles des formulaires natifs
Nous avons ajouté la prise en charge de la nouvelle propriété accent-color, ainsi qu'un modificateur pour le style des boutons de saisie de fichiers, afin qu'il soit plus facile que jamais d'apporter votre propre touche aux contrôles de formulaires natifs :
| Code html : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <form> <div class="flex items-center space-x-6"> <div class="shrink-0"> <img class="h-16 w-16 object-cover rounded-full" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80" alt="Current profile photo" /> </div> <label class="block"> <span class="sr-only">Choose profile photo</span> <input type="file" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100 "/> </label> </div> <label class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-gray-600"> <input type="checkbox" class="accent-violet-500" checked/> <span>Yes, send me all your stupid updates</span> </label> </form> |
Propriétés arbitraires
L'ajout de CSS totalement arbitraires qui peuvent être combiné avec des modificateurs comme hover, lg, est désormais possible. En outre, la documentation de Tailwind a été entièrement revue et corrigée, avec des exemples récents.
Source : Tailwind CSS
Et vous ?
Que pensez-vous de Tailwind CSS ? Quelle amélioration apportée par la version 3.0 vous intéresse le plus ?Voir aussi :
Tailwind CSS v2.0 est disponible avec une toute nouvelle palette de couleurs, comprenant 220 couleurs au total, et un nouveau flux de travail pour créer vos propres modèles de couleurs WebStorm, l'EDI pour le développement d'apps Web, est disponible en version 2020.3 avec la prise en charge de Tailwind CSS et des améliorations dans l'apparence et l'ergonomie PhpStorm 2020.3 est disponible et apporte la prise en charge de PHP 8, PHPStan, Psalm, Tailwind CSS et Xdebug 3, et le développement collaboratif avec Code With Me Tailwind UI, des composants d'interface utilisateur conçus par les créateurs de Tailwind CSS, qui permettent de créer des styles personnalisés sans jamais quitter le HTML, selon ses concepteurs 
