Bien utiliser TailwindCSS : comprendre la logique CSS derrière les classes

TailwindCSS n'est pas du CSS inline

Première chose à éclaircir : utiliser des classes utilitaires comme bg-red-500 ou text-center, ce n’est pas du style inline. Là où les styles inline (ex. style="color: red;") encapsulent directement des propriétés CSS dans le HTML, les classes utilitaires sont des abstractions CSS minimales, réutilisables et maintenables.

Dans cet article d’Adam Wathan, le créateur de Tailwind explique que les classes utilitaires brisent le mythe selon lequel tout style doit être découplé dans des fichiers CSS séparés. À la place, on co-localise les styles avec les composants qu’ils concernent. Résultat : une meilleure lisibilité et une flexibilité accrue.

Pourquoi c'est différent ?

• Pas de cascade à gérer : chaque classe utilitaire correspond à une propriété CSS isolée.
• Moins de règles CSS globales : les styles ne "débordent" pas d’un composant à l’autre.
• Un workflow plus rapide : tout est au même endroit, vous passez moins de temps à chasser des sélecteurs dans plusieurs fichiers.

Comprendre les bases CSS derrière Tailwind

Pour bien utiliser Tailwind, il faut connaître les fondamentaux CSS qu’il encapsule. Voici trois concepts clés à garder en tête.

1. La granularité des classes utilitaires

Les classes utilitaires de Tailwind se basent sur une approche "atomique" : chaque classe ne fait qu’une chose, mais elle le fait bien. Cela vous permet de composer des styles complexes en combinant ces classes.

<div class="p-4 bg-gray-100 rounded-lg shadow-md">
  <p class="text-lg text-gray-700">Hello, Tailwind !</p>
</div>
    

2. Le pouvoir des pseudo-classes

Tailwind simplifie des concepts comme les états (:hover, :focus, :disabled) avec des préfixes intuitifs. Vous pouvez styliser les interactions directement dans votre HTML.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Cliquez-moi
</button>
    

3. Flexbox et Grid simplifiés

Tailwind expose les systèmes de mise en page modernes comme Flexbox et Grid via des classes intuitives, sans avoir à vous souvenir de propriétés CSS complexes.

<div class="grid grid-cols-3 gap-4">
  <div class="bg-gray-200 p-4">1</div>
  <div class="bg-gray-200 p-4">2</div>
  <div class="bg-gray-200 p-4">3</div>
</div>
    

Évitez les mauvaises pratiques avec Tailwind

1. Ne tombez pas dans le piège de @apply

La directive @apply peut sembler magique : elle permet de regrouper des classes utilitaires dans un fichier CSS, ce qui allège visuellement votre HTML. Mais attention, l’abstraction prématurée est une ennemie sournoise.

Problèmes avec un usage abusif de @apply :

• Vous recréez du CSS classique : Cela vous oblige à nommer chaque style, ce qui ralentit votre workflow.
• Changements plus compliqués : Modifier un style global devient risqué, car il peut impacter des zones inattendues de votre site.
• Bundle CSS gonflé : Chaque règle que vous ajoutez est du CSS supplémentaire à charger.

Bonnes pratiques : Utilisez @apply uniquement pour des éléments hautement réutilisables comme des boutons ou des styles de formulaires, et seulement si vous ne pouvez pas utiliser un framework comme React pour gérer ces composants.

2. Ne confondez pas Tailwind avec une excuse pour mal structurer

Un des dangers de Tailwind, c’est qu’il peut encourager des pratiques désordonnées si vous n’êtes pas vigilant. Par exemple : ajouter des classes inutiles ou redondantes (p-4 + p-2, pourquoi ?), ou ignorer l’accessibilité et la sémantique.

3. Tirez parti du fichier de configuration

Tailwind permet de personnaliser votre design system dans le fichier tailwind.config.js. Ne passez pas à côté : adaptez les couleurs, espacements et typographies à votre projet pour éviter la répétition et améliorer la cohérence.

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: '#1DA1F2',
          dark: '#0A95DD',
        },
      },
    },
  },
};
    

Conclusion : Construire avec Tailwind, pas contre lui

TailwindCSS est un outil qui accélère le développement et offre une flexibilité redoutable. Mais il exige de la discipline. Ne tombez pas dans le piège de vouloir trop abstraire ou d’essayer de "nettoyer" votre HTML au détriment des avantages que Tailwind propose.

Le vrai pouvoir de Tailwind, c’est dans sa simplicité. Les classes utilitaires peuvent sembler désordonnées, mais elles réduisent la complexité du CSS traditionnel, améliorent la maintenabilité et permettent de garder vos styles proches des composants qu’ils concernent.

Restez pragmatique : n’utilisez pas Tailwind pour forcer un style "propre". Utilisez-le pour construire des interfaces efficaces, évolutives et cohérentes. Et surtout, souvenez-vous que la vraie propreté, c’est dans le code qui marche bien et qui est facile à faire évoluer. Pas dans la chasse aux classes "trop nombreuses". 😉