Tailwind : Qu’est-ce que c’est et Pourquoi l’Utiliser ?

Vous entendez parler de Tailwind CSS partout mais ne savez pas ce que c’est ? Pas de panique.

Ce guide vous explique ce qu’est ce framework et pourquoi vous devriez l’utiliser pour vos projets web.

Qu’est-ce que Tailwind CSS ? Une approche « utility-first »

Tailwind CSS est un framework CSS « utility-first ». C’est une façon différente de styliser vos pages web. Au lieu d’écrire du CSS personnalisé pour chaque élément, vous utilisez des petites classes déjà prêtes, directement dans votre code HTML. Chaque classe a une seule fonction : `p-4` ajoute du padding, `bg-red-500` met un fond rouge, `font-bold` met le texte en gras.

Pour bien comprendre, comparons les deux méthodes pour créer un simple bouton.

L’approche CSS traditionnelle

D’habitude, on donne un nom à notre bouton dans le HTML, comme `.btn`, puis on le décore dans un fichier CSS à part.

Le code HTML :

<button class="btn">Mon Bouton</button>

Le code CSS (dans un fichier style.css) :

.btn {
  display: inline-block;
  background-color: #FBBF24;
  color: #000000;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

L’approche avec Tailwind CSS

Avec Tailwind, il n’y a pas de fichier CSS à écrire. On applique directement les classes utilitaires sur l’élément HTML. Chaque classe correspond à une propriété CSS.

Le code HTML (et c’est tout) :

<div class="inline-block bg-amber-400 text-black py-2 px-4 rounded">Bouton</div>

Le résultat est exactement le même. La différence, c’est la méthode : tout se passe dans le HTML. C’est ça, l’approche « utility-first ». On assemble des briques de style au lieu de créer de nouvelles règles à chaque fois.

Les 8 raisons d’adopter Tailwind CSS

Cette approche « utility-first » peut sembler étrange au début, surtout si vous avez l’habitude de bien séparer HTML et CSS. Pourtant, elle apporte des avantages concrets dans le développement web moderne.

1. Une productivité et une maintenabilité améliorées

Le premier gain est la vitesse. Vous n’avez plus besoin de naviguer entre votre fichier HTML et votre fichier CSS pour styler un élément. Tout est au même endroit. Ça évite de perdre du temps à chercher la bonne classe ou à s’assurer qu’un changement n’impacte pas un autre élément par erreur.

Certains diront que ça casse le principe de « séparation des préoccupations » (Separation of Concerns). Mais en réalité, le style est maintenant colocalisé avec sa structure HTML. Quand vous supprimez un élément, vous supprimez aussi son style. La maintenance devient plus simple, car il n’y a pas de CSS orphelin qui traîne.

2. Créer des composants réutilisables

Une critique courante est que le HTML devient surchargé et difficile à lire, et qu’il est compliqué de réutiliser un style. C’est faux si on utilise Tailwind correctement.

Ce framework est conçu pour fonctionner avec une architecture à base de composants. Il s’intègre parfaitement avec des outils comme React, Vue.js ou Svelte. Vous créez un composant « Bouton » une seule fois, avec toutes ses classes, puis vous le réutilisez partout dans votre application.

Et si vous n’utilisez pas de framework JavaScript, Tailwind propose la directive `@apply`. Elle permet de regrouper une série de classes utilitaires dans une seule classe personnalisée. C’est pratique pour des éléments qui reviennent souvent, comme un bouton ou une alerte.

Exemple avec @apply :

.btn {
  @apply bg-amber-400 text-black py-2 px-4 rounded;
}

Il est conseillé d’utiliser `@apply` avec modération, uniquement pour des composants vraiment réutilisables, pour garder la flexibilité du « utility-first ».

3. Un design responsive simplifié et intuitif

Gérer le responsive design est souvent un casse-tête en CSS. Tailwind rend ça simple. Il utilise un système de préfixes qui s’appliquent avant les classes utilitaires pour définir des styles à partir d’une certaine taille d’écran. Plus besoin d’écrire des `media queries` à la main.

Par exemple, `lg:flex-row` signifie « applique la classe `flex-row` uniquement sur les écrans larges (large) et plus grands ». C’est très lisible.

Voici les breakpoints par défaut :

Avec cet exemple, les éléments sont en colonne sur mobile, puis passent en ligne sur les grands écrans :

<div class="flex flex-col lg:flex-row">
  <!-- Vos éléments ici -->
</div>

4. Un design system cohérent et personnalisable

Quand on travaille sur un projet long, il est facile de se retrouver avec 15 nuances de bleu ou des espacements incohérents. Tailwind impose une discipline de design.

Tout est défini dans le fichier `tailwind.config.js`. C’est le cœur de votre projet. Vous pouvez y centraliser toutes vos règles de design : votre palette de couleurs, vos tailles de police, vos espacements, vos ombres, etc. Ça garantit que tous les développeurs de l’équipe utilisent les mêmes valeurs.

Tailwind inclut également « Preflight », un ensemble de styles de base qui annule les styles par défaut des navigateurs. Ça assure que votre site s’affiche de la même manière sur Chrome, Firefox ou Safari, sans mauvaises surprises.

5. Des performances optimisées pour la production

Un des plus gros avantages de Tailwind est la performance. Le framework utilise un moteur appelé JIT (Just-In-Time). Il scanne tous vos fichiers (HTML, JavaScript, Vue…) et génère uniquement les classes CSS que vous utilisez réellement.

Le reste est supprimé. Ce processus, parfois appelé « Purge CSS », est automatique. Résultat : vous avez accès à des milliers de classes pendant le développement, mais le fichier final envoyé aux utilisateurs est minuscule.

6. Une compatibilité navigateur assurée

Pour s’assurer que les styles fonctionnent sur un maximum de navigateurs, les développeurs doivent souvent ajouter des « préfixes vendeurs » (`-webkit-`, `-moz-`, `-ms-`). C’est une tâche répétitive et facile à oublier.

Tailwind s’en occupe pour vous. Il intègre un outil appelé Autoprefixer. Lors du processus de `build`, il analyse votre CSS et ajoute automatiquement tous les préfixes navigateurs nécessaires. Vous n’avez même pas à y penser.

7. Fini la prise de tête sur le nommage des classes

Trouver des noms de classes clairs et cohérents est l’une des tâches les plus difficiles en CSS. Comment appeler ce conteneur ? `.card-header-title` ? `.main-title` ? Ça devient vite un bazar.

Avec Tailwind, ce problème disparaît. Vous n’avez plus besoin d’inventer des noms de classes. Vous utilisez simplement les classes utilitaires qui décrivent le style. `w-full` est toujours `width: 100%` et `justify-center` est toujours `justify-content: center`. Ça facilite la collaboration en équipe, car tout le monde parle le même langage.

8. Un écosystème d’outils performant

Tailwind n’est pas juste un framework CSS, c’est tout un écosystème qui facilite la vie du développeur. Voici deux outils essentiels :

• Prettier Plugin for Tailwind CSS : Prettier est un formateur de code populaire. Son plugin pour Tailwind trie automatiquement vos classes dans un ordre logique. Ça rend le code HTML plus propre et plus facile à lire pour tout le monde.
• Tailwind IntelliSense : C’est une extension pour l’éditeur de code VS Code. Elle fournit l’autocomplétion pour les noms de classes, affiche les styles CSS correspondants au survol, et détecte les erreurs. C’est un gain de temps énorme.

Il existe aussi des bibliothèques de composants prêts à l’emploi, comme Tailwind UI, qui proposent des éléments d’interface déjà construits avec Tailwind CSS.

Fiche d’identité de Tailwind CSS

Pour résumer, voici les informations clés sur ce framework :

• Créateurs : Adam Wathan, Jonathan Reinink, David Hemphill, et Steve Schoger (société Tailwind Labs).
• Date de création : La première version a été lancée le 13 mai 2019.
• Licence : C’est un projet open-source sous licence MIT, donc totalement gratuit.
• Popularité : Le projet a plus de 93 300 étoiles sur GitHub, ce qui montre son adoption massive par la communauté des développeurs.
• Technologies : Le framework est principalement écrit en TypeScript, Rust et CSS.
• Site officiel : tailwindcss.com
• Dépôt GitHub : github.com/tailwindlabs/tailwindcss

Tailwind CSS est donc un outil moderne qui change la façon de penser le CSS. Il mise sur la rapidité, la cohérence et la performance, sans sacrifier la personnalisation.

Ce n’est pas juste un autre framework comme Bootstrap. C’est une approche plus basse, qui vous donne le contrôle total sur le design tout en vous fournissant les outils pour aller vite. Pour beaucoup de développeurs web, l’essayer, c’est l’adopter.