Tailwind est un framework CSS très controversé. J’ai l’occasion de l’utiliser en ce moment même en entreprise pour un projet de refonte d’un site à fort trafic et je dois avouer que je suis très agréablement surpris par les nombreux avantages de ce framework.
Étant plutôt un développeur avec une appétence pour le front-end depuis quelques années, j’avais l’habitude de travailler avec des fichiers CSS d’un côté et HTML de l’autre. Je n’étais donc pas convaincu par l’approche de Tailwind, qui consiste à faire du CSS dans du HTML en s’inspirant des propriétés CSS comme nom de classe par exemple :
<!-- du texte large avec une font moyenne -->
<p class="text-lg font-medium">
...
</p>Mais derrière ce concept qui pourrait s’apparenter à une mauvaise pratique (car on nous a toujours dit qu’il fallait séparer le HTML du CSS…) se cache en fait de nombreuses bonnes pratiques et avantages en matière d’efficacité de performance et de modularité que je vais vous présenter dans cet article.
Tailwind, un framework efficace
Le 1er avantage de Tailwind qui est le plus frappant lors de sa première utilisation c’est le fait de ne pas avoir à switcher entre votre fichier CSS et HTML ce qui fait gagner, mine de rien, énormément de temps ! On ne se retrouve plus perdu dans nos fichiers CSS de plusieurs centaines de lignes surtout quand on commence à utiliser des médias queries…
Autres avantages, on a plus besoin de chercher un nom de classe ( les vrais savent que cela prend du temps...) et les médias queries sont gérées par défaut “à la bootstrap” (sm, md, lg...)
<!-- padding: 6px sur écran mobile puis 8px sur petit écran et 10px sur écran large -->
<div class="p-6 sm:p-8 lg:p-10">
...
</div>Ce qui est une bonne chose pour ma part.
D'ailleurs la documentation est très claire et permet au débutant de pouvoir s'initier au CSS et même aux néophytes de progresser et de découvrir de nouvelles propriétés CSS !
Inconvénients
Il y a effectivement 2 inconvénients à Tailwind :
D'une part votre page HTML peut vite devenir illisible (même si personnellement, je me suis vite habitué à ce format)
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
<img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
... D'autre part, quand on a l'habitude du CSS natif, on perd un peu de temps au début à switcher sur la documentation pour "traduire" notre code en classe Tailwind. Mais il existe bien entendu des add-on sur VS Code ou autres pour contrer ces problèmes :
- Inline Fold qui permet de masquer nos classes CSS
- Tailwind CSS IntelliSense qui gère l'autocompletion des classes Tailwind
Du code modulaire
En temps normal, nous avons l’habitude de créer des classes comme ceci :
<div class="chat-notification">
<div class="chat-notification-logo-wrapper">
<img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div class="chat-notification-content">
<h4 class="chat-notification-title">ChitChat</h4>
<p class="chat-notification-message">You have a new message!</p>
</div>
</div>.chat-notification {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.chat-notification-logo-wrapper {
flex-shrink: 0;
}
.chat-notification-logo {
height: 3rem;
width: 3rem;
}
.chat-notification-content {
margin-left: 1.5rem;
padding-top: 0.25rem;
}
.chat-notification-title {
color: #1a202c;
font-size: 1.25rem;
line-height: 1.25;
}
.chat-notification-message {
color: #718096;
font-size: 1rem;
line-height: 1.5;
}Ce code marche très bien mais il est souvent difficile à réutiliser sur une autre page de votre site.
Il y aura toujours une légère différence entre 2 éléments HTML et on a souvent tendance à recréer une nouvelle classe CSS pour chaque élément puis une autre classe puis une autre… et ainsi de suite jusqu'à arriver à un point où nous n’osons plus nettoyer notre code par peur de casser le site… ( cette situation s’est présentée dans quasiment tous mes projets Front )
Avec Tailwind les classes CSS ne sont pas liées à un élément HTML mais à une propriété CSS et certaines de ces propriétés / classes sont très souvent réutilisées comme les margin padding font-size ou display… le code est ainsi beaucoup plus modulaire.
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
<div class="shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-slate-500">You have a new message!</p>
</div>
</div>Dans ce cas, nous avons un peu plus de classes dans notre HTML mais aucune ligne de CSS ! Nous n'avons créé aucune classe mais seulement utilisé celle de Tailwind. C'est le principe Utility-First.
Dans certains cas, nous pouvons avoir des composants avec plusieurs propriétés CSS très souvent réutilisées notamment les boutons.
Nous pouvons donc utiliser la fonction @apply qui permet de créer de nouvelles classes customisées mais attention à ne pas en abuser ! C’est à utiliser sur des microcomposants. Le but étant de ne pas se retrouver avec le problème de clean code que j’évoquais juste avant.
Dans le cas où vous utilisez Tailwind sur un ancien projet ayant déjà des classes css ( c’est le cas sur notre projet actuel ), vous pouvez dans votre config tailwind ajouter un préfixe par exemple tw- pour différencier les anciennes classes des classes tailwind on aura donc <div class="tw-p-6 tw-text-center"... par exemple.
La performance au rendez-vous
Le plus gros avantage de Tailwind ! En effet seules les classes présentent dans votre projet sont utilisés dans votre fichier CSS généré en production. Cela veut donc dire que si vous retirez un bloc contenant une classe utilisée uniquement à cet endroit, cette classe sera enlevée du fichier CSS généré. Votre CSS se refactorise automatiquement.
En général votre fichier CSS final ne dépassera rarement les 100 ko.
Conclusion
Pour conclure, Je dirais qu'une fois qu'on a gouté à Tailwind, il est difficile de revenir en arrière !
Je vois pas mal de gens dire que Tailwind est le nouveau Bootstrap, à mon avis, ce sont 2 Framework qui n’ont pas du tout les mêmes objectifs.
Bootstrap s’adresse plutôt à des développeurs back qui ne veulent pas trop s’embêter avec le design et avoir une interface un minimum correct… ( cela peut se comprendre sur certains projets interne ou logiciel SAAS avec très peu de clients )
Tailwind au contraire s’adresse au développeur front ( expérimentés ou débutants) qui font quotidiennement du CSS et qui veulent gagner en performances et en rapidité.
En tout cas, j'espère vous avoir convaincus de tester voire d'adopter ce framework ! Pour ma part je compte dorénavant l'utiliser sur mes projets personnels. Peut- être que dans certains cas où je voudrais faire du CSS "tricky" je reviendrais au CSS "à l'ancienne" mais ce sont des cas relativement rares.
A propos de l'auteur
Pierre Olivier Chevreuil
Développeur web FullStack (Symfony / VueJS).
Passionné de voyage, et de barbecue.
Cyclotouriste des terres bretonnes.