Tailwind CSSTailwind CSS
Tailwind CSS est un framework CSS open source. La fonctionnalité principale de cette bibliothèque est, contrairement à d'autres frameworks CSS comme Bootstrap, qu'elle ne procure pas une série de classes prédéfinies pour des éléments tels que des boutons ou des tables. À la place, Tailwind crée une liste de classes CSS « utilitaires » pouvant être utilisés pour ajouter un style à chaque élément en les mélangeant et en les agençant[3],[4]. Par exemple, dans d'autres systèmes, une classe En date du 17 mai 2023, Tailwind CSS a plus de 68 400 étoiles sur GitHub[5]. FonctionnalitésEn raison de la différence sur les concepts de base liés à d'autres frameworks CSS traditionnels tels que Bootstrap, il est important de connaitre la philosophie à partir de laquelle Tailwind a été créé, ainsi que son utilisation de base. Classes utilitairesLe concept utility-first fait référence à la fonctionnalité différentielle principale de Tailwind[6]. Au lieu de créer des classes autour des composantes (bouton, panneau, menu, champ de texte...), les classes sont conçues autour d'un élément de style spécifique (couleur jaune, police de caractère grasse, texte large, élément du centre...). Toutes ces classes sont nommées classes utilitaires (utility classes). Il y a beaucoup de classes utilitaires dans Tailwind CSS qui permettent de contrôler un grand nombre de propriétés CSS telles que les couleurs, la bordure, le type d'affichage (display), la taille du texte et sa police, la mise en page, l'ombrage...
VariantesTailwind offre la possibilité d'appliquer une classe utilitaire uniquement dans certaines situations via des media queries. Ces classes, ayant comme nom « variantes » (variants), servent principalement à créer un site web réactif pour différentes tailles d'écran[7]. Il existe également des variantes pour les différents états qu'un élément peut avoir, tels qu'un Les variantes ont deux parties : la condition à respecter et la classe qui sera appliquée si la condition est respectée. Par exemple, la variante Tailwind CSS est développé en JavaScript, est exécuté via Node.js, et s'installe avec un gestionnaire de paquets tels que npm ou yarn[10]. Paramètres et thèmesIl est possible de paramétrer les classes et les variantes offertes par Tailwind via un fichier de configuration généralement intitulé Build All et PurgeLe mode par défaut de Tailwind génère toutes les combinaisons CSS possibles selon les paramètres du projet. Puis, à l'aide d'un autre utilitaire comme PurgeCSS[11], tous les fichiers sont parcourus, et les classes inutilisées sont retirées du fichier CSS. En raison de la quantité du nombre de classes qui peuvent être générées par le nombre de variantes ainsi que par leurs combinaisons, cette méthode a comme désavantages d'avoir un long temps d'attente ainsi que des fichiers CSS lourds avant d'être purgés. Ce mode opératoire n'est plus disponible dans la version 3 de Tailwind CSS[12]. JITLe mode JIT (Just-In-Time, soit « Juste-À-Temps ») est une manière alternative de générer le CSS qui, au lieu de générer toutes les classes CSS possibles et d'enlever celles qui sont inutilisées, analyse le contenu des fichiers HTML (ou d'extensions configurées ou d'emplacements) et, de manière instantanée, génère uniquement les classes nécessaires et utilisées. Étant donné que ce ne sont plus toutes les variables qui sont générées, le temps d'attente et la taille des fichiers CSS sont grandement réduits.[réf. nécessaire] Cette amélioration technique a rendu possible l'introduction de plusieurs nouvelles variantes et classes utilitaires, ainsi que la possibilité de créer des classes utilitaires à la volée avec des valeurs arbitraires qui ne sont pas établies dans la configuration. JIT est devenu le mode par défaut de Tailwind depuis la version 3[12]. VersionsTailwind CSS utilise le versionnement sémantique pour identifier la compatibilité avec sa version. Articles connexesRéférences
Liens externes
|
|||||||||||||||||||||||||||||||||||||||||||
