Tailwind CSS
Créateur | Adam Wathan, Jonathan Reinink, David Hemphill, et Steve Schoger |
---|---|
Développé par | Tailwind Labs[1] |
Dernière version | 3.4.10 () |
Dépôt | github.com/tailwindlabs/tailwindcss |
Écrit en | CSS |
Système d'exploitation | Multiplateforme |
Environnement | Web |
Langues | Anglais |
Type |
Framework CSS (en) Bibliothèque JavaScript |
Licence | Licence MIT[2] |
Site web | tailwindcss.com |
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, il y aurait une classe message-warning
qui appliquerait le jaune comme couleur d'arrière-plan et du texte gras. Pour avoir ce résultat dans Tailwind, il faudrait appliquer un ensemble de classes créé par la bibliothèque: bg-yellow-200
et font-bold
.
En date du 17 mai 2023, Tailwind CSS a plus de 68 400 étoiles sur GitHub[5].
Fonctionnalités
[modifier | modifier le code]En 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 utilitaires
[modifier | modifier le code]Le 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...
Variantes
[modifier | modifier le code]Tailwind 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 hover :
lorsque le curseur survole un objet, focus:
lorsque le clavier est sélectionné ou active:
lorsqu'un objet est utilisé[8], ou lorsque le mode sombre du navigateur ou du système d'exploitation est activé[9].
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 md:bg-yellow-400
appliquera la classe bg-yellow-400
si la taille de l'écran est plus grande que la valeur définie pour md
.
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èmes
[modifier | modifier le code]Il est possible de paramétrer les classes et les variantes offertes par Tailwind via un ficher de configuration généralement intitulé tailwind.config.js
. Dans ce fichier, il est possible de régler les valeurs des classes utilitaires telles que la palette de couleurs ou les tailles de la séparation entre les éléments pour les marges.
Build All et Purge
[modifier | modifier le code]Le 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, 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[11].
JIT
[modifier | modifier le code]Le 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[11].
Versions
[modifier | modifier le code]Tailwind CSS utilise le versionnement sémantique pour identifier la compatibilité avec sa version.
Article connexe
[modifier | modifier le code]Références
[modifier | modifier le code]- (en) Cet article est partiellement ou en totalité issu de l’article de Wikipédia en anglais intitulé « Tailwind CSS » (voir la liste des auteurs).
- « Tailwind Labs »
- « Github: tailwindlabs/tailwindcss, LICENSE »
- Ivaylo Gerchev, Tailwind CSS, Sebastopol, O'Reilly Media, (ISBN 1-0981-4099-0, OCLC 1314257318, lire en ligne)
- Noel Rappin, Modern CSS with Tailwind flexible styling without the fuss, Raleigh, (ISBN 978-1-68050-857-4, OCLC 1277046918, lire en ligne)
- « tailwindlabs/tailwindcss », Tailwind Labs, (consulté le )
- (en) « Utility-First - Tailwind CSS », sur tailwindcss.com (consulté le )
- (en) « Responsive Design - Tailwind CSS », sur tailwindcss.com (consulté le )
- (en) « Hover, Focus, & Other States - Tailwind CSS », sur tailwindcss.com (consulté le )
- (en) « Dark Mode - Tailwind CSS », sur tailwindcss.com (consulté le )
- (en) « Installation - Tailwind CSS », sur tailwindcss.com (consulté le )
- (en) « Release v3.0.0-alpha.1 tailwindlabs/tailwindcss », sur GitHub (consulté le )
Liens externes
[modifier | modifier le code]- Documentation officielle de Tailwind.
- Tailwind Play, un environnement de test à temps réel.