Marre de Bootstrap ? Tailwind CSS à la rescousse !
Préambule
Mettre en place tout un site à son image (ou à celle de son graphiste…) peut être un processus très long et complexe. De plus, l’ajout de classes à tout va avec un grand nombre de répétitions de classes et propriétés similaires peut très vite alourdir le code de l’application.
C’est pour palier à ces problèmes récurrents que Twitter sort la première version stable de son framework CSS en 2011 : Bootstrap. Avant cela il fallait, soit tout écrire soi-même, soit avoir plusieurs bibliothèques plus ou moins spécialisées, ce qui amenait à une maintenabilité réduite.
Suite au succès de Bootstrap, beaucoup de nouvelles bibliothèques ont vu le jour, telles que Material Design de Google, Semantic UI, Foundation, et un tas d’autres…
Dans cet article, nous allons nous intéresser à un de ces frameworks sorti très récemment : Tailwind CSS (nous parlons bien ici de framework CSS, et non de UI Kit).
Présentation du framework
Tailwind CSS est un framework CSS très récent (du moins au moment où j’écris cet article…) qui a vu sa première version stable sortir en mai 2019, suite à 1 an et demi de développement après sa toute première version alpha de novembre 2017. Un récapitulatif des “Release Notes” est disponible à cette page.
Optimisation
Intéressons-nous à un détail important qui peut faire toute la différence lors du choix du framework : la taille.
En regardant le tableau comparatif ci-dessus, on peut (légitimement) se poser la question : Pourquoi utiliser Tailwind, s’il est l’un des frameworks CSS les plus lourds actuellement ?
Une des fonctionnalités qui fait la force de Tailwind, c’est qu’il est hautement configurable, ce qui permet de n’utiliser que ce dont on a besoin dans le projet, et par conséquent réduire sa taille.
Pour faire cela, il est possible de retirer certaines valeurs du thème qui sont inutilisées.
Avant de poursuivre, je précise que nous verrons des exemples de configuration dans la suite de l’article et donc comment mettre en place les changements que je vais évoquer dans cette section.
La première manipulation, et sûrement la plus importante, est que l’on peut réduire le nombre de couleurs disponibles dans la palette de base. En effet, de base Tailwind propose une très large palette composée de 93 couleurs (ayant chacune des classes pour les backgrounds, les borders et les textes, ayant elles-mêmes chacune des variantes :hover
et :focus
) !
Pour donner un ordre d’idée, cela correspond à la génération de 4185 classes sur les 8271 classes disponibles au total dans le build par défaut.
Dans un cas réel, il est très rare d’avoir besoin d’une palette avec 93 couleurs. On remarque qu’en descendant à 25 couleurs (ce qui n’est déjà pas mal du tout), on réduit déjà beaucoup la taille de notre import Tailwind. Rien qu’en modifiant cette configuration, nous pouvons descendre à 12.2kb seulement avec Brotli, ce qui est déjà moins que toutes les autres librairies CSS (à l’exception de Tachyons, qui est une librairie moins complète…).
Le second exemple donné sur le site de Tailwind est sur la réduction du nombre de breakpoints qui est par défaut de 4.
Désormais, avec des écrans de smartphone de plus en plus grands, la nécessité d’avoir 4 breakpoints se pose de plus en plus… Par défaut, les breakpoints suivants sont disponibles : 640px, 768px, 1024px et 1200px.
Même si le passage à seulement 1 même 2 breakpoints semble compliqué pour certains sites ou applications complètement responsive, n’en avoir que 3 semble tout de même suffisant dans tous les cas.
On peut voir ici que, même si la réduction est minime par rapport à la réduction du nombre de couleurs, elle reste non négligeable… Il faut surtout imaginer les deux réductions combinées ! Le passage de 93 couleurs à par exemple 15 couleurs, et de 4 breakpoints a seulement 3, réduit considérablement la taille de notre import Tailwind !
Les tableaux comparatifs et leurs explications sont disponibles sur cette page.
Personnalisation
En plus de l’optimisation poussée qu’il est possible d’en faire, le framework permet une personnalisation très avancée.
Voyons un exemple de personnalisation.
Imaginons que nous ayons une application qui nécessite seulement les éléments suivants :
- Couleurs : noir, gris, blanc qui font partie du package de base, puis vert et bleu ainsi que leurs dégradés (que nous définirons précisément) que nous personnaliserons ;
- Breakpoints : 3 breakpoints seulement (md, lg & xl) ;
- Spacing : ajout de quelques spacing, en plus de ceux déjà existants de base ;
- Autres : nous savons que nous n’utiliserons par exemple pas les propriétés :
float
,visibility
, ou encore lesobject-position
.
Dans un projet plus important, il y aura évidemment bien plus de configuration, mais cette configuration simple permet de montrer la façon de faire et sa simplicité.
Voici le fichier de configuration tailwind.config.js
que cela nous donne :
Explications :
- Personnalisation des couleurs : vous pouvez aller de 100 à 900, mais ce n’est pas obligatoire si ce n’est pas nécessaire, la 500 étant la couleur “de base”. Exemple d’utilisation dans le CSS :
theme('colors.blue.500')
pour utiliser notre couleur personnalisée bleue avec le dégradé 500 ; - Gestion des breakpoints : ici, nous disons que nous ne voulons utiliser que 3 breakpoints au lieu de 4 par défaut. Tout en sachant que les noms de ceux-ci peuvent être changés comme on le souhaite ;
- Ajout de spacing : l’ajout de ces spacings permet la génération de classe pour les
padding
,margin
etheight
du type :.p-72
,.m-72
et.h-72
pour chacun des ajouts ; - Suppressions d’utilitaires : en mettant à
false
ces quelques utilitaires, nous disons que nous n’avons pas besoin des classes associées, et nous évitons donc de les importer afin de gagner en taille d’import. Par exemple avec la configuration ci-dessus, nous n’aurons plus accès aux classes comme.float-right
,.invisible
,.object-left-bottom
, entre autres…
Il faut avoir en tête que toutes les propriétés disponibles dans Tailwind sont personnalisables de cette façon ! Ce qui rend le framework très flexible.
Vous pouvez trouver un exemple de configuration très complet sur le GitHub de l’application Firefox Send faite avec Tailwind, en suivant ce lien.
Voyons maintenant comment ajouter Tailwind CSS dans son projet…
Ajout de Tailwind CSS dans un projet
Voici les méthodes pour intégrer simplement Tailwind CSS à son projet selon la technologie utilisée :
Vue.js
Afin d’intégrer Tailwind CSS à son projet Vue.js, c’est très simple, une fois le projet créé, voici les étapes à suivre :
- Ajout du package au projet
// using NPM
$ npm install tailwindcss --save-dev// OR using Yarn
$ yarn add tailwindcss --dev
2. Création du fichier de configuration
La commande ci-dessous va générer un fichier de configuration pré-construit à la racine du projet (à lancer depuis la racine).
// using npx
$ npx tailwind init// OR without npx
$ ./node_modules/.bin/tailwind init tailwind.config.js
3. Configuration de PostCSS (facultatif)
L’étape suivante permet de configurer PostCSS. Ce n’est pas obligatoire, mais tellement utile et pratique : je vous conseille vraiment de le faire !
PostCSS est un outil qui permet d’automatiser certaines tâches rébarbatives du CSS. Par exemple, l’Autoprefixer va automatiquement ajouter les préfixes CSS -webkit-
, -moz-
, etc… lorsque ceux-ci sont nécessaires. Vous n’aurez donc plus à vous soucier des compatibilités navigateurs de certaines propriétés.
La liste des fonctionnalités est visible sur leur site. Pour cela, il suffit d’entrer la configuration suivante dans le fichier postcss.config.js
(si le fichier n’existe pas, créez le simplement avec la commande touch postcss.config.js
lancée à la racine du projet) :
Si dans la configuration initiale de votre projet vous aviez mis la configuration de PostCSS à l’intérieur du fichier package.json, supprimez le bloc postcss
.
4. Import des fichiers de Tailwind CSS
La dernière étape va être d’importer automatiquement les fichiers de Tailwind CSS pour avoir accès à toutes ses classes, depuis n’importe quel composant. Pour cela, il faudra créer un fichier SCSS que vous pouvez mettre à l’emplacement suivant : src/assets/scss/tailwind.scss
et dont voici le contenu (selon les éléments que vous souhaitez utiliser dans votre projet) :
La règle @tailwind
ne sera très probablement pas reconnue par votre éditeur de texte, mais pas de panique, la commande est correcte !
Une fois que ce fichier est prêt, il ne nous reste plus qu’à dire à notre application de le charger par défaut, en ajoutant tout simplement la ligne suivante au début de notre fichier main.js
:
import '@/assets/scss/tailwind.scss';
Une autre façon de faire si vous avez un fichier SCSS global (ce qui est très souvent le cas) est de faire l’import précédent dans ce même fichier SCSS global, et n’avoir que l’import de ce fichier global dans votre fichier main.js
.
EDIT Juin 2021
Suite à des mises à jour, vous pourrez faire face à des problèmes de version avec PostCSS/Autoprefixer, pour remédier à cela, il faudra forcer l’installation de certaines versions. Pour cela, lancez la commande suivante (ou l’équivalent yarn
) :
$ npm i --save-dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Après toutes ces étapes, place aux tests ! Utilisez les classes de Tailwind CSS dans vos composants pour vérifier qu’elles sont bien reconnues et prises en compte !
Nuxt.js
Pour Nuxt.js, il y a 2 possibilités :
- Vous êtes sur un projet existant. Dans ce cas, la procédure est la même que pour Vue.js ;
- Vous voulez partir sur un nouveau projet. Dans ce cas, rien de plus simple pour intégrer Tailwind CSS, puisque son intégration est directement proposée par défaut dans la CLI(*) :
// using npx
$ npx create-nuxt-app <project-name>// OR using yarn
$ yarn create nuxt-app <project-name>
Ensuite, après quelques questions, la CLI demande quel framework UI vous voulez installer. Ici, Tailwind CSS est directement proposé, comme le montre la capture d’écran ci-dessous :
Une fois que cela est fait, aucune configuration n’est nécessaire, tout est fait pour vous 🙂
(*) : Si vous n’avez pas yarn
, la CLI de Nuxt.js nécessite d’avoir npx
, qui est installé par défaut avec npm
à partir de sa version 5.2.0.
Je n’ai donné les exemples d’intégration que pour des applications Vue.js et Nuxt.js car ce sont les 2 frameworks auxquels je m’intéresse particulièrement en ce moment, mais il est évidemment possible de l’intégrer à des applications Angular, React, etc… Des tutoriels plutôt bien faits sont disponibles en ligne… Je ne vais pas détailler l’intégration à chaque framework puisque ce serait trop long, trop répétitif (la manipulation est sensiblement la même pour les différents frameworks), et ce n’est pas le but de cet article…
En pratique : comparaison Bootstrap/Tailwind
Afin de voir Tailwind dans la pratique, je vais construire un exemple d’IHM simple réalisé avec Bootstrap (qui est le framework CSS le plus connu et utilisé), puis montrer l’équivalent Tailwind de cette portion de code.
Avec Bootstrap :
Avec Tailwind :
On remarque que les deux codes sont assez similaires, les seules différences se font dans la syntaxe des noms de classes.
À noter que si quelques légères différences apparaissent entre les deux résultats, cela se joue tout simplement dans la configuration de Bootstrap et/ou Tailwind comme vu précédemment, notamment sur les couleurs du thème, ou la taille du padding pour les classes spécifiques dans Tailwind.
Le plus de Tailwind
Il y a une chose que Tailwind permet et que Bootstrap ne permet pas (ou du moins pas encore, au moment d’écrire ces lignes), c’est ce qui est appelé les Pseudo-Class Variants dans Tailwind.
En effet, il est possible de gérer l’ajout de classes lorsqu’un élément est dans un état différent, par exemple : hover
, focus
, etc…
Reprenons l’exemple précédent, en y ajoutant un petit quelque chose. Imaginons que sur les liens, nous voulions qu’au survol, les couleurs du texte et du fond soient inversées. C’est-à-dire passer d’un fond bleu avec texte blanc, à un fond blanc avec texte bleu.
Avec Bootstrap, il nous faudrait créer du CSS personnalisé afin d’effectuer ce changement et inverser l’application des couleurs au moment du hover
. Si l’on suppose que l’on ajoute une classe nommée custom-btn-blue
à ces boutons, afin de faciliter l’exemple, il faudrait faire :
.custom-btn-blue:hover {
color: $primary;
background-color: white;
}
Avec Tailwind, les Pseudo-Class Variants nous permettent de faire cela très simplement, sans avoir à créer de CSS personnalisé, de la manière suivante :
<a class="border border-blue-600 rounded py-2 mt-3 text-center cursor-pointer bg-blue-600 text-white hover:bg-white hover:text-blue-600">Link to details</a>
Cela permet également de ne cibler que certains éléments accessibles via les pseudo-sélecteurs, par exemple si l’on veut un border-top
sur chaque élément d’une liste, sauf le premier :
<div class="border rounded">
<div v-for="item in items" class="border-t first:border-t-0">
{{ item }}
</div>
</div>
Conclusion
Tailwind est un framework CSS très récent qui promet de grandes choses. Sa grande flexibilité et sa configuration poussée permet de s’ajuster au plus près de nos besoins, sans avoir à faire d’imports de classes inutiles.
Au-delà de ça, la doc extrêmement claire et bien faite du framework est un énorme plus… Dans cette doc, on peut même y trouver une solution pour supprimer la moindre classe du framework inutilisée en plus de la configuration, grâce à un mini-tuto sur l’installation et la configuration de PurgeCSS ! Parfait si vous ne voulez pas vous perdre dans une configuration trop précise…
Bonus 1 : Si vous voulez voir Tailwind en action, quelques “gros sites” ont déjà adopté le framework, comme Firefox Send (dont le code source se trouve sur ce repo GitHub, si vous voulez plus de détails, dont la configuration du framework dans le projet) ou encore Laracasts.
Bonus 2 : Si vous utilisez VSCode, un plugin très bien fait est là pour vous aider, Tailwind CSS IntelliSense. Le plugin vous permet de vous aider à retrouver les classes dont vous avez besoin grâce à de l’auto-complétion lorsque vous ajoutez des classes CSS à vos balises HTML. Et si vous n’utilisez pas VSCode… Faites-le ! 😀
Si vous avez apprécié cet article ou qu’il vous a été utile, n’hésitez pas à le 👏 et le partager ! 🙂