CSS du vent arrière

Tailwind CSS est un framework CSS open source . Contrairement à d'autres frameworks, comme Bootstrap , il ne fournit pas une série de classes prédéfinies pour des éléments tels que des boutons ou des tableaux. Au lieu de cela, il crée une liste de classes CSS « ​​utilitaires » qui peuvent être utilisées pour styliser chaque élément en les mélangeant et en les associant.

Par exemple, dans d'autres systèmes traditionnels, il y aurait une classe message-warningqui appliquerait une couleur d'arrière-plan jaune et du texte en gras. Pour obtenir ce résultat dans Tailwind, il faudrait appliquer un ensemble de classes créées par la bibliothèque : bg-yellow-300et font-bold.

Au 5 août 2024, Tailwind CSS compte plus de 81 000 étoiles sur GitHub .

En raison de la différence des concepts de base par rapport aux autres frameworks CSS traditionnels tels que Bootstrap, il est important de connaître la philosophie à partir de laquelle Tailwind a été créé, ainsi que son utilisation de base.

Le concept utility-first fait référence à la principale caractéristique différenciante de Tailwind. Au lieu de créer des classes autour de composants (bouton, panneau, menu, zone de texte...), les classes sont construites autour d'un élément de style spécifique (couleur jaune, police en gras, texte très grand, élément central...). Chacune de ces classes est appelée classes utilitaires .

Il existe de nombreuses classes utilitaires dans Tailwind CSS qui permettent de contrôler un grand nombre de propriétés CSS comme les couleurs, la bordure, le type d'affichage ( display ), la taille de la police et la police, la mise en page, l'ombre...

Tailwind offre la possibilité d'appliquer une classe utilitaire uniquement dans certaines situations via des requêtes multimédias , ce que l'on appelle une variante. L'utilisation principale des variantes est de concevoir une interface réactive pour différentes tailles d'écran. Il existe également des variantes pour les différents états qu'un élément peut avoir, comme hover:lorsqu'il est survolé, focus:lorsque le clavier est sélectionné ou active:lorsqu'il est utilisé, ou lorsque le navigateur ou le système d'exploitation a activé le mode sombre .

Les variantes comportent deux parties : la condition à respecter et la classe qui est appliquée si la condition est respectée. Par exemple, la variante md:bg-yellow-400appliquera la classe bg-yellow-400si la taille de l'écran est au moins égale à la valeur définie pour md.

Tailwind CSS est développé à l'aide de JavaScript , s'exécute via Node.js et s'installe avec des gestionnaires de packages d'environnement comme npm ou yarn .

Il est possible de configurer les classes utilitaires et les variantes que Tailwind propose via un fichier de configuration généralement nommé tailwind.config.js. Dans la configuration, on peut définir les valeurs des classes utilitaires, comme la palette de couleurs ou les tailles entre les éléments pour les marges.

Le mode par défaut de Tailwind est que le système génère toutes les combinaisons CSS possibles en fonction des paramètres du projet. Ensuite, au moyen d'un autre utilitaire tel que PurgeCSS, tous les fichiers sont parcourus et les classes qui ne sont pas utilisées sont supprimées du fichier CSS résultant.

En raison du nombre de classes pouvant être générées par le nombre de variantes et leurs combinaisons, cette méthode présente les inconvénients de longs délais d'attente et de tailles importantes de fichiers CSS avant d'être purgés. Ce mode de fonctionnement n'est plus disponible dans la version 3 de Tailwind CSS.

Le mode JIT ( Just-In-Time ) est une manière alternative de générer le CSS qui, au lieu de générer toutes les classes possibles puis de supprimer toutes celles qui ne sont pas utilisées, analyse le contenu des fichiers HTML (ou des extensions ou emplacements configurés) et génère instantanément uniquement les classes nécessaires et utilisées.

En générant uniquement le CSS nécessaire, JIT réduit considérablement la taille du fichier CSS. Cette amélioration technique a permis d'introduire de nombreuses nouvelles variantes et classes utilitaires, ainsi que la possibilité de créer des classes utilitaires à la volée avec des valeurs arbitraires non définies dans la configuration.

À partir de la version 3 de Tailwind CSS, le mode JIT est devenu la valeur par défaut.

Tailwind CSS utilise le versionnage sémantique pour identifier sa compatibilité de version.