Tailwind CSS est un frameworkCSSopen 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
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
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...
Exemple: notice jaune
Résultat
Code
<divclass="m-4 p-4 bg-yellow-200 font-bold rounded-lg"><p>Please be careful when feeding the birds.</p></div>
Classes
Tailwind
Équivalent CSS
m-4
margin:1rem;
p-4
padding:1rem;
bg-yellow-200
background-color:rgba(229,231,235,1);
font-bold
font-weight:700;
rounded-lg
border-radius:0.5rem;
Variantes
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
Il est possible de paramétrer les classes et les variantes offertes par Tailwind via un fichier 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
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
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
Tailwind CSS utilise le versionnement sémantique pour identifier la compatibilité avec sa version.
