Retour • 17/01/2025

Pourquoi j'utilise TailwindCSS ?

Écris par Melvyn Malherbe le 17/01/2025

TailwindCSS fait débat et des personnes ne comprennent toujours pas pourquoi il faut l'utiliser.

Post Reddit qui demande pourquoi les gens aiment Tailwind.

Quand on va sur YouTube ou sur Twitter, on a l'impression que tout le monde utilise TailwindCSS.

Et on peut se demander : pourquoi ?

Je vais éplucher les raisons principales pour lesquelles moi et beaucoup d'autres personnes utilisons presque exclusivement TailwindCSS.

Il y a 5 arguments principaux :

Changement facile de contexte entre HTML et CSS
Optimisation des styles non utilisés
Design system déjà présent
Cohérence entre nos styles
Docs et communauté

1. Changement facile de contexte entre HTML et CSS

La première magie de TailwindCSS, c'est qu'il te permet de rester dans ton fichier HTML/JSX sans avoir à jongler entre plusieurs fichiers.

Prenons un exemple concret. Sans TailwindCSS, pour styliser une simple carte, tu dois :

Créer un fichier HTML
Créer un fichier CSS
Lier les deux fichiers
Alterner constamment entre les deux fichiers pour :
- Écrire la structure HTML
- Définir les classes CSS
- Vérifier que les sélecteurs correspondent
- Ajuster les styles
- Revenir au HTML pour voir le résultat
- Et ainsi de suite...

C'est un processus qui ralentit considérablement le développement et qui peut créer des frustrations.

Voici à quoi ressemble ce workflow sans TailwindCSS :

Créer un fichier HTML
Écrire ta structure HTML et tes classes en même temps

De la même manière, ça évite de devoir "mémoriser" des classes CSS qui seraient dans un autre fichier. Tu peux simplement utiliser les classes Tailwind atomic et tu n'auras jamais de classes HTML ou autres à mémoriser.

2. Optimisation des styles non utilisés

Un autre avantage majeur de TailwindCSS est son système d'optimisation des styles non utilisés. En effet, Tailwind va automatiquement "purger" les styles qui ne sont pas utilisés dans ton code.

Tailwind n'ajoute dans le bundle que les classes utilisées

Ce problème intervient typiquement quand tu ajoutes des classes, ou remplaces des classes pour un élément et que tu oublies de supprimer les classes CSS qui ne sont plus utilisées.

Surtout que souvent tu as peur de les supprimer car tu n'es pas sûr que tu ne les utilises pas ailleurs.

Avec Tailwind, tu n'as pas ce problème. Tailwind va purger les styles non utilisés et tu n'as pas à te soucier de ça.

3. Design system déjà présent

Tailwind vient avec des :

couleurs
spacing
shadow
typography
border radius

Déjà définis pour toi.

Les couleurs par défaut de Tailwind

Ceci te permet d'avoir une UI directement plus "agréable" à utiliser et plus "pro" que si tu faisais tout toi-même. C'est un énorme gain de temps quand on compare à CSS Module ou du simple CSS.

4. Cohérence

Une règle importante d'un bon design c'est d'avoir une cohérence. D'avoir des padding, margin, width, height etc... qui sont toujours cohérents entre eux.

Typiquement c'est pour ça qu'on a tendance à toujours utiliser des multiples de 4 ou 8 pour ça.

Voici comment les spacings de Tailwind sont gérés :

Les espacements par défaut de Tailwind

On peut voir que les espacements sont intelligemment définis ce qui permet d'avoir un style cohérent et canon.

Ce détail peut paraître anodin mais les développeurs qui sont vraiment mauvais en design font souvent cette erreur d'avoir des spacing pas du tout cohérents ou des valeurs comme 61px.

5. Docs et communauté

Le dernier point et peut-être le plus important c'est la documentation de Tailwind et surtout sa communauté. Déjà la documentation est juste magnifique, il est simple de trouver tout ce dont tu as besoin et beaucoup de développeurs s'accordent pour dire que c'est une des meilleures documentations tech :

Les outils de la communauté Tailwind

Ensuite la communauté a tendance à vraiment faire des miracles. Personnellement j'ai des dizaines voire centaines de sites, d'outils ou même de ressources sur TailwindCSS :

Les outils de la communauté Tailwind

Mais on pourrait aussi parler du projet qui a le plus fait parler de lui dernièrement, ShadcnUI qui a explosé les réseaux sociaux et sa popularité a explosé.

Tu as sûrement en tête sa documentation :

ShadcnUI

Ces raisons créent une sorte de boucle de viralité et de fomo de la part des développeurs :

ils voient que l'écosystème Tailwind est le plus rapide et populaire
ils utilisent Tailwind
ils font grandir l'écosystème via leurs projets et parlent de Tailwind et créent encore plus de buzz

C'est pour ça que TailwindCSS est devenu LE framework CSS à utiliser.