Tailwind CSS 📖 Wikipedia

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.

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...

<div class="m-4 p-4 bg-yellow-200 font-bold rounded-lg">
  <p>Please be careful when feeding the birds.</p>
</div>

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].

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.

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^[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].

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^[12].

Tailwind CSS utilise le versionnement sémantique pour identifier la compatibilité avec sa version.

• Bootstrap
• Bulma
• Foundation
• Framework d'interface

• (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).

• Documentation officielle de Tailwind.
• Tailwind Play, un environnement de test en temps réel.

•   Portail des logiciels libres