Tailwind CSS

Un article de Wikipédia, l'encyclopédie libre.
Tailwind CSS
Description de l'image Tailwind CSS logo.svg.

Informations
Créateur Adam Wathan, Jonathan Reinink, David Hemphill, et Steve Schoger
Développé par Tailwind Labs[1]
Dernière version 3.4.3 ()
Dépôt github.com/tailwindlabs/tailwindcssVoir et modifier les données sur Wikidata
Écrit en CSS
Système d'exploitation MultiplateformeVoir et modifier les données sur Wikidata
Environnement Web
Langues Anglais
Type Framework CSS (en)
Bibliothèque JavaScriptVoir et modifier les données sur Wikidata
Licence Licence MIT[2]
Site web tailwindcss.com

modifier - modifier le code - voir Wikidata (aide) Consultez la documentation du modèle

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

Exemple: notice jaune
Résultat FExample Tailwind yellow warning.png
Code 
<div class="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[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]

  1. ↑ « Tailwind Labs »
  2. ↑ « Github: tailwindlabs/tailwindcss, LICENSE »
  3. ↑ Ivaylo Gerchev, Tailwind CSS, Sebastopol, O'Reilly Media, (ISBN 1-0981-4099-0, OCLC 1314257318, lire en ligne)
  4. ↑ Noel Rappin, Modern CSS with Tailwind flexible styling without the fuss, Raleigh, (ISBN 978-1-68050-857-4, OCLC 1277046918, lire en ligne)
  5. ↑ « tailwindlabs/tailwindcss », Tailwind Labs, (consulté le )
  6. ↑ (en) « Utility-First - Tailwind CSS », sur tailwindcss.com (consulté le )
  7. ↑ (en) « Responsive Design - Tailwind CSS », sur tailwindcss.com (consulté le )
  8. ↑ (en) « Hover, Focus, & Other States - Tailwind CSS », sur tailwindcss.com (consulté le )
  9. ↑ (en) « Dark Mode - Tailwind CSS », sur tailwindcss.com (consulté le )
  10. ↑ (en) « Installation - Tailwind CSS », sur tailwindcss.com (consulté le )
  11. ↑ a et b (en) « Release v3.0.0-alpha.1 tailwindlabs/tailwindcss », sur GitHub (consulté le )

Liens externes[modifier | modifier le code]

Ce document provient de « https://fr.wikipedia.org/w/index.php?title=Tailwind_CSS&oldid=213845841 ».