Tailwind CSS, le framework totalement personnalisable

Un créateur adepte de nouveaux projets

Adam Wathan est un homme passionné par le développement web, il est à l’origine de nombreux projets tels que Laravel Valet, Jigsaw ou encore Tailwind CSS.

C’est en travaillant sur un projet nommé KiteTail en 2017, que lui vient l’idée de créer le framework Tailwind CSS. Projet pour lequel il consacre aujourd’hui tout son temps.

Qu’est-ce que Tailwind CSS ?

Tailwind CSS est un framework permettant aux développeurs de personnaliser totalement et simplement le design de leur application ou de leur site web. Avec ce framework CSS, il est possible de créer un design d’interface au sein même du fichier HTML. Cette façon de programmer n’interfère pas avec les pratiques recommandées par le W3C comme celle de séparer le HTML des feuilles de style CSS.
En effet, pour utiliser Tailwind il faut prendre les classes CSS prédéfinies par le framework en les appelant dans un fichier HTML comme ceci : class="text-3xl font-bold text-cyan-500"

Au vu de cet exemple, on peut penser que Tailwind CSS reprend la même méthodologie de programmation que Bootstrap. Pourtant, en termes de poids, Tailwind CSS est plus lourd que le framework Bootstrap, on pourrait alors se demander pourquoi l’utiliser ?

La simplicité d’utilisation du framework CSS

Des classes CSS unitaires

Tailwind CSS se différencie par son utilisation des classes CSS. Le framework n’utilise que des classes unitaires c’est-à-dire, des classes qui n’ont qu’un seul objectif. Ainsi, la classe text-gray-500 ne sert qu’à mettre le texte sur lequel on l’applique en gris.

Pour bien comprendre la différence avec Bootstrap, nous allons créer un bouton bleu.
Sans hésitation on utiliserait la propriété btn btn-primary fournie par Bootstrap. Mais imaginons que ce ne soit pas le bon bleu que l’on souhaitait utiliser, il faudrait alors créer un fichier CSS dans lequel surcharger la bonne couleur.
Tailwind CSS évite justement cette démarche supplémentaire puisque, rappelez-vous, une classe est égale à un objectif. Pour créer le bouton bleu, il faudrait utiliser les classes suivantes : w-1/6 px-0 py-2 flex justify-center text-white border rounded bg-blue-700

Aux premiers abords, c’est sûr que c’est plus long à écrire ! Cependant, il est possible, pour les éléments que l’on utilisera souvent, de créer nos propres classes avec Tailwind CSS.

Une règle @apply pour créer ses propres classes CSS

Afin d’éviter l’écriture des classes avec cette syntaxe qui peut être répétitive sur les éléments au design identique, Tailwind CSS nous propose de créer nos propres classes CSS.
Directement dans le fichier CSS, on a la possibilité de donner un nom de classe et d’y indiquer toutes les propriétés à utiliser grâce à la commande @apply. Pour reprendre l’exemple du bouton bleu, on obtiendra une classe CSS qui ressemble à ceci :
.btn-blue {
@apply w-1/6 px-0 py-2 flex justify-center text-white border rounded bg-blue-700;
}

À noter que le framework CSS accepte le mélange entre sa syntaxe et celle du CSS habituelle :
.btn-blue {
background-color : blue;
@apply w-1/6 px-0 py-2 flex justify-center text-white border rounded;
}

Résumons rapidement

Les inconvénients à l’utilisation de Tailwind CSS …

La syntaxe du framework nécessite une bonne connaissance des différents noms de classes. De plus, le fonctionnement par classes unitaires peut se révéler très long à écrire en fonction du nombre de propriétés dont on a besoin. De ce fait, Tailwind CSS n’est pas recommandé pour tous les sites.

Et les avantages apportés par le framework CSS

Grâce à Tailwind, plus besoin de se creuser la tête pour trouver des noms de classes correctes ce qui peut se révéler être un gain de temps.
Même si le framework est assez lourd (477,6 ko), le poids peut être réduit car, Tailwind CSS supprime automatiquement tous les styles CSS dont on ne s’est pas servi pour la construction du design du site.

L’installation de Tailwind CSS

Via npm
L’installation du framework via npm est classique. Il suffit d’utiliser la commande npm install -D tailwindcss@latest

Via CDN
Pour l’installation via un CDN il faut utiliser la balise link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" cependant, avec cette méthode, plusieurs fonctionnalités seront indisponibles.

Tailwind CSS possède une grande communauté active et de nombreux adeptes. Plusieurs sites ont déjà fait le choix d’utiliser ce framework en pleine expansion. Dans la continuité de celui-ci, le créateur Adam Wathan a créé Tailwind UI, une bibliothèque de composants HTML.

Si cet article vous a plu, n’hésitez pas à lire notre rubrique dédiée aux frameworks