Tailwind est un framework CSS utilisant l’approche Utility first. C’est-à-dire l’isolement de chaque propriété css avec sa valeur dans une classe unique.
Par exemple on aura la classe m-0 qui correspondra à la classe appliquant une marge de 0 :
.m-0 {
margin: 0;
}
Voici un exemple de comment utiliser tailwind pour créer un composant :
<div class="grid grid-cols-10 h-40 w-96 text-gray-700 shadow-md rounded-3xl">
<div class="col-span-3 bg-blue-100 rounded-l-3xl"></div>
<div class="col-span-7 flex flex-col justify-between p-2">
<span
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor
elit nisl. Vestibulum iaculis sit amet leo vitae pretium.</span
>
<span class="text-gray-900 font-bold">John Doe</span>
</div>
</div>
Et voici le résultat que l’on obtient :
Nous allons voir dans cet article en quoi Tailwind est intéressant, notamment dans la mise en place d’un Design System.
L’objectif de cette approche “Utilisty First” est de rendre chaque classe réutilisable. Cela a beaucoup d’avantages, par exemple :
m-0 est déclarée une seule fois dans le css produit par Tailwind, et utilisable n’importe où.Pour parler plus spécifiquement de Tailwind, l’un de ses avantages est d’être hautement personnalisable. Que ce soit pour les couleurs, les tailles d’écran, les polices d’écriture, les espacements… L’objectif est de pouvoir configurer un design cohérent et propre à l’application ou au service que l’on souhaite développer.
De plus, un autre avantage est qu’il permet la purge du css produit. Cela signifie que toutes les classes css générées par tailwind qui ne sont utilisées nulle part dans le code seront purgées (dans l’idéal, la purge est conseillée dans les envrionnements de production). Ce qui réduit considérablement la taille du fichier css produit. Il est également possible de manipuler la manière dont la purge est effectuée : des regex peuvent être appliquées lors de la purge pour créer une “safelist” de classes css à ne pas supprimer.
Tailwind permet aussi de préfixer ses classes css produites de sorte à ne pas causer de conflits avec d’autres librairies css ou tout simplement d’autres classes css. Ce sera très utile si l’on décide d’utiliser Tailwind en parallèle d’autres frameworks, librairies CSS, où les noms de classes css pourraient être les mêmes que celles générées par Tailwind.
Toutes ces règles sont définies dans le fichier de configuration de tailwind (tailwind.config.js) écrit en javascript, donc facilement manipulable. Cela donnera un fichier comme ci-dessous :
// tailwind.config.js
const colors = require("./tailwind/colors"); // JSON de couleurs
const purgeSafelist = require("./tailwind/purge"); // Tableau de regex
module.exports = {
purge: {
content: ["./src/**/*.vue"],
options: {
safelist: purgeSafelist,
},
},
darkMode: false, // or 'media' or 'class'
prefix: "myApp-",
theme: {
colors,
extend: {
spacing: {},
borderRadius: {},
boxShadow: {},
},
},
variants: {
extend: {
backgroundColor: ["active"],
},
},
plugins: [],
};
On peut observer l’utilisation des champs extend, qui vont permettre d’ajouter des configurations aux configurations existantes. Par exemple, si l’on veut ajouter des possibilités de box-shadow (avec des valeurs et des couleurs différentes) tout en gardant les valeurs proposées initialement par Tailwind, ce sera dans le champ extend de theme qu’il faudra les ajouter.
Si par contre on ne souhaite pas garder les valeurs par défaut de Tailwind, il faudra ajouter les nouvelles valeurs de box-shadow directement à la racine de theme.
Pour ce qui est des variants, il s’agit des circonstances durant lesquelles des propriétés et classes css vont être activées. Ces circonstances peuvent être des hover, active, focus, etc. Dans l’exemple ci-dessus, on peut voir qu’on étend le variant backgroundColor à l’état active. Cela va permettre de pouvoir appliquer des classes Tailwind sur le changement de couleur du background lors de l’état active (lorsque que le clic gauche de la souris est appuyé sur un bouton par exemple).
→ Comme évoqué précédemment, Tailwind est un framework hautement personnalisable. Ce qui permet d’établir les règles du design system très facilement, qu’il s’agisse des règles d’espacement, des fonts à utiliser, des couleurs, etc.
→ La configuration de Tailwind se faisant dans un fichier javascript, il est très simple de le manipuler. On peut donc le configurer depuis des données externes. Prenons l’exemple des “design tokens” : certains outils de design, comme Zeroheight (application permettant de documenter un design system), permettent de générer et d’exposer des fichiers JSON via des URL. Ces fichiers peuvent être générés depuis des extraits de données venant d’autres outils de Design tels que Figma (outil de maquettage d’écrans d’applications en collaboratif), où les designers peuvent spécifier leurs règles de design, telles que les couleurs, les box-shadows, les fonts, etc. Voyons cela à l’aide d’un schéma, qui sera plus parlant.
→ La cohérence qu’il permet d’apporter au design de l’application en fait une très bonne solution pour mettre en place un design system, en appliquant facilement les mêmes codes dans chacun des composants.
→ Aucun thème par défaut n’est appliqué contrairement à d’autres librairies css. Il faudra donc définir soi-même tous les styles à appliquer.
→ Tailwind fournit des outils pour traiter un grand nombre de problématiques, dont le dark mode. Il suffira alors de préfixer les classes de couleurs par dark:, et d’en définir les couleurs dans le design system.
→ Enfin, il permet d’appliquer des règles pour rendre une application responsive, en donnant la possibilité de définir les comportements des composants développés selon les tailles d’écrans.
La première est que Tailwind, contrairement à Bootstrap, n’est pas un “UI kit” : il n’embarque ni de thème par défaut, ni de composants. Cela ne signifie pas que Tailwind ne propose rien pour autant. Des valeurs par défaut pour les palettes de couleurs ou les espacements sont à la disposition des développeurs, mais sont également très simples à écraser ou compléter. L’idée derrière cette logique est de ne pas imposer de règles de design.
Bootstrap va également apporter beaucoup sur le plan du responsive, tandis que Tailwind va plus s’axer autour d’une grande personnalisation.
En termes de chiffres, voici la comparaison des deux frameworks réalisée sur npm trends :
Et pour ce qui est de l’utilisation des deux frameworks, Bootstrap est utilisé entre autres par Spotify, Twitter, et Lyft, tandis que Tailwind est utilisé par BlaBlaCar, überdosis et Superchat.
Un grand nombre de solutions existent pour faciliter la mise en place d’un design dans une application, et Tailwind en fait partie. Il rendra le développement UI plus rapide et plus cohérent et permettra de configurer ses propres règles de design en toute simplicité.
Ainsi, son utilisation est tout à fait adaptée dans la mise en place d’un design system.
