5 raisons d'utiliser Tailwind CSS

Tailwind CSS, c’est quoi ?

Créé par Adam Wathan, Tailwind CSS est un framework CSS utilitaire (« utility first ») innovant ayant contribué à démocratiser une approche inédite pour styliser les interfaces web.

Contrairement aux approches traditionnelles du CSS, qui consistent à créer des composants en définissant un ensemble de règles dans des fichiers séparés pour chaque élément, Tailwind privilégie l’utilisation de classes utilitaires, directement dans le HTML.

Voic un exemple de code HTML utilisant l’approche CSS traditionnelle.

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

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

Ici, le CSS est rassemblé au sein d’une unique classe .btn et isolé dans un fichier distinct.

Avec Tailwind, l’approche change et l’on utilise des classes utilitaires directement dans le HTML :

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

Malgré une approche différente, on obtient ici le même résultat.

Cette méthode rappelle le style « CSS inline », longtemps critiqué pour son manque de séparation des préoccupations et sa difficulté à maintenir des styles cohérents à grande échelle.

.flex { display: flex; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
...

Inconvénients de Tailwind CSS

À première vue le martelage des classes utilitaires de Tailwind CSS peut sembler déconcertant et on voit alors vite de premiers inconvénients à l’horizon.

1. Pas de « Separation of Concerns »

L’un des principes fondamentaux du développement web est la « Separation of Concerns » (ou « séparation des préoccupations »), qui consiste à séparer le code structurel (HTML), le style (CSS) et la logique (JavaScript) dans des fichiers distincts.

Avec Tailwind CSS, ce principe est en quelque sorte abandonné, car les classes utilitaires sont directement ajoutées dans le HTML.

Cette approche nous rapelle le fameux « CSS inline » avec l’attribut HTML style, longtemps déconseillé car il mêle la structure et le style dans un même endroit.

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

Cette non séparation des préocupations vaut à Tailwind sa plus belle critique : « OMG QUE C’EST MOCHE 🫣🤯 ».

2. Soucis de réutilisabilité

À première vue, un autre inconvénient de Tailwind CSS est la potentielle perte de réutilisabilité.

En CSS traditionnel, on définit généralement des classes réutilisables pour des composants d’interface tels que des :

• Boutons
• Cartes
• Acordéons
• Etc.

Ces classes CSS contribuent à centraliser le style et peuvent ensuite être exploitées à plusieurs endroits du projet, garantissant une cohérence visuelle.

Avec Tailwind, chaque élément est stylisé individuellement à l’aide de multiples classes utilitaires, ce qui entraîne un code chargé et peu lisible.

Aussi, si vous devez apporter une modification à plusieurs éléments ayant les mêmes styles, vous devrez modifier chaque composant individuellement. Cette duplication de mise en forme complique la maintenance sur le long terme.

Ici, si vous devez changer la couleur de fond de tous vos boutons, vous devrez éditer chaque occurrence où la classe bg-amber-400 est utilisée, au lieu de simplement modifier une classe CSS globale. 👇

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

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

3. Nouvelle technologie

Adopter Tailwind CSS implique l’ajout d’une dépendance à notre projet web, requierant une phase de build pour générer du CSS et nécessite de connaître les classes utilitaires spécifiques à ce framework.

Aussi, Tailwind introduit une nouvelle façon de penser la mise en page et le design, ce qui peut être perturbant pour ceux qui sont habitués aux méthodes classiques, comme le CSS BEM (Block, Element, Modifier) ou les préprocesseurs comme Sass.

Ce changement de paradigme, la courbe d’apprentissage et les conséquences qui en découlent peuvent freiner l’adoption du framework, en particulier dans les équipes de développement où tout le monde n’est pas forcément à l’aise avec cette approche.

Avantages de Tailwind CSS

Si Tailwind CSS nous impose de mettre une croix sur le principe de « Separation of Concerns » et engage à première vue des contraintes de réutilisabilité, la réalité est toute autre lorsqu’on se penche plus en détails sur les mécaniques de ce framework CSS.

Comme les nombreux réfractaires, amoureux du « beau code », j’ai d’abord critiqué l’approche utilitaire de Tailwind, puis j’ai un jour décidé de tester ce framework, et comme le dit très justement le site officiel… l’essayer, c’est l’adopter ! Explications.

1. Separation of Concerns : à quoi bon ?

Adam Wathan pense que la séparation des préoccupations doit se faire en fonction du contexte et des besoins réels, plutôt que de suivre des règles strictes.

Contrairement à l’approche traditionnelle plébiscitée, où on isole le CSS dans un ou plusieurs fichiers de style, il prône une approche plus unifiée mêlant structure et style.

Mais écrire son CSS à part présente en réalité des inconvénients notables :

• Un fichier unique contenant tout le CSS devient vite ingérable
• Des fichiers multiples par composant compliquent la gestion des conflits avec des styles globaux

Face à cela, Tailwind permet d’exprimer le style directement dans le HTML via des classes utilitaires, ce qui améliore l’expérience de développement en facilitant :

• 👀 Lisibilité
• ⚡ Productivité
• 🛠️ Maintenabilité

Aussi, le style étant directement rattaché à un élément, Tailwind met fin à ces débats en simplifiant la gestion du style : il suffit d’ouvrir le fichier du composant d’interface et de lire les classes utilitaires, sans avoir à traquer des lignes de CSS dans des fichiers distincts.

2. Un framework utilitaire… pour créer des composants

Si Tailwind CSS offre à première vue une approche utilitaire, à l’opposé des frameworks CSS comme Bootstrap ou Bulma, qui permettent quant à eux de regrouper un ensemble de styles au sein de composants réutilisables, Tailwind est en réalité entièrement compatible et optimisé pour la création de composants.

Les contraintes de réutilisabilité n’ont en réalité plus lieu d’être en utilisant Tailwind au sein de frameworks JavaScript réactifs tels que Vue.js, reposant sur une architecture décomposée en multiples composants, ou en utilisant la directive @apply, native à Tailwind.

  <template>
    <button class="bg-amber-400 text-black py-2 px-4 rounded">
      <slot/>
    </button>
  </template>

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

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

3. Responsive simplifié

Tailwind CSS facilite également la gestion du responsive design grâce à son système de breakpoints intuitif.

Plutôt que de devoir écrire des medias queries complexes, Tailwind propose des préfixes de classes spécifiques pour divers points de ruptures associés aux tailles d’écran.

Par défaut, ces breakpoints sont au nombre de 5 et définis selon le tableau suivant :

Ici, chaque préfixe (sm, md, lg, xl et 2xl) permet de définir des styles pour différentes largeurs d’écran (small, medium, large, extra large et extra extra large).

Voici un extrait de code permettant à des éléments flexibles de s’empiler en colonne par défaut, puis lorsque l’on dépasse 1024px (lg), de se mettre les uns à côté des autres en ligne.

<div class="flex flex-col lg:flex-row">
  <div>BOX 1</div>
  <div>BOX 2</div>
  <div>BOX 3</div>
</div>

• La classe flex applique display: flex
• La classe flex-col applique flex-direction: column
• La classe lg:flex-row applique la media query :

@media screen and (min-width: 1024px) {
  element {
    flex-direction: row;
  }
}

Tailwind rend ainsi le développement responsive plus rapide et plus intuitif, éliminant la nécessité d’écrire des dizaines de lignes de CSS pour chaque breakpoint.

Il est même possible de personnaliser les breakpoints au sein d’un fichier de configuration dédié.

4. Design system cohérent

Grâce à son fichier de configuration 📄 tailwind.config.js, Tailwind permet de personnaliser votre thème global en centralisant facilement :

• Les couleurs
• Le style typographique
• Les espacements
• Etc.

Ce fichier permet de créer un design system entièrement cohérent et adaptable à votre projet, tout en conservant les bases solides fournies par Tailwind.

Aussi, Tailwind intègre un reset CSS pour uniformiser les styles de base sur tous les navigateurs, et de nombreux plugins permettant d’ajouter des fonctionnalités supplémentaires, comme la prise en charge d’un style par défaut pour les formulaires et typographies.

5. Performances accrues

En comparaison aux frameworks comme Bootstrap, qui incluent de nombreuses classes que vous n’utiliserez probablement jamais, Tailwind propose une approche bien plus ciblée, grâce à une phase de build côté serveur.

Concrètement, Tailwind CSS va analyser toutes les classes utilitaires utilisées dans votre code HTML afin de ne générer dans le fichier CSS destiné à la production que les classes utilisées dans notre projet. Cela permet de grandement optimiser le poids du fichier CSS.

Tailwind appelait initialement cette fonctionnalité la « Purge CSS » mais on parle aujourd’hui plutôt de « Détection de classes ».

En plus de cette optimisation par purge, la phase de build permet également de minifier le CSS, réduisant encore davantage la taille du fichier final.

6. Compatibilité

Lors du build, Tailwind CSS inclut automatiquement les préfixes navigateurs nécessaires (-webkit-, -ms-, -moz-, etc.), garantissant l’interpretationé de l’ensemble des propriétés CSS sur une large gamme de navigateurs, même les plus anciens.

Cela est automatiquement géré par l’outil Autoprefixer, intégré dans le pipeline de Tailwind.

Cela permet de rendre vos interfaces plus accessibles à tous les utilisateurs, sans avoir à ajouter manuellement des préfixes ou à vous préoccuper des spécificités de chaque navigateur.

7. Naming simplifié

Enfin, l’interêt d’exploiter un framework CSS est bien entendu de bénéficier d’un naming cohérent. Plus besoin de se casser la tête pour trouver des noms de classes CSS qui font sens.

Les classes utilitaires de Tailwind ont été soigneusement pensées par des professionnels de l’intégration web pour être intuitives. Exemples : w-full pour width: 100%, justify-center pour justify-content: center, grid pour display: grid, rounded-full pour un arrondi plein, etc.

Ce naming normalisé simplifie par la même occasion la collaboration en équipe et garantit une lecture facile du code pour tout développeur rejoignant un projet.

8. Intégration globale

Tailwind CSS offre plusieurs outils pour améliorer l’expérience de développement, notamment lorsqu’il s’agit de gérer des longues lignes de classes utilitaires.

Grâce à l’automatic class sorting de Prettier, vos classes Taiwlind peuvent automatiquement être triées dans un ordre logique, facilitant ainsi la recherche et la lisibilité des classes dans une longue ligne.

Aussi, le plugin Tailwind IntelliSense pour VS Code propose de l’autocomplétion, permettant d’accéder rapidement aux classes disponibles tout en réduisant les erreurs et le temps de recherche.