Tailwind CSS : guide pratique pour des interfaces modernes

Tailwind CSS est devenu le framework CSS le plus populaire auprès des développeurs. Son approche utility-first divise, mais les résultats parlent d'eux-mêmes.

Pourquoi Tailwind ?

Le problème du CSS traditionnel

Avec le CSS classique, vous finissez par :

• Inventer des noms de classes (.card-wrapper-inner-content)
• Dupliquer des styles entre composants
• Avoir un fichier CSS qui grossit sans jamais maigrir
• Perdre du temps à naviguer entre HTML et CSS

L'approche utility-first

Tailwind inverse la logique : au lieu de créer des classes CSS, vous composez des utilitaires directement dans votre markup :

<div class="flex items-center gap-4 rounded-lg bg-white p-6 shadow-lg">
  <img class="h-12 w-12 rounded-full" src="..." alt="..." />
  <div>
    <h3 class="text-lg font-bold text-gray-900">Titre</h3>
    <p class="text-sm text-gray-500">Description</p>
  </div>
</div>

Configuration avancée

Thème personnalisé

Tailwind 4 utilise la directive @theme pour personnaliser les design tokens :

@import 'tailwindcss';

@theme inline {
  --color-main-500: #449DD7;
  --color-bg-card: #00051e;
  --color-border-card: #1d3546;
}

Plugins utiles

• @tailwindcss/typography : styles prose pour le contenu riche
• @tailwindcss/forms : reset des formulaires
• @tailwindcss/container-queries : media queries par conteneur

Bonnes pratiques

Extraire les composants, pas les classes

Plutôt que d'utiliser @apply pour créer des classes utilitaires, créez des composants :

// Bon : composant réutilisable
function Button({ children }) {
  return (
    <button className="rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
      {children}
    </button>
  );
}

Responsive design

Tailwind utilise un système mobile-first. Les breakpoints s'appliquent vers le haut :

• text-sm : mobile
• md:text-base : tablette et plus
• lg:text-lg : desktop et plus

Dark mode

Avec la stratégie class, vous contrôlez le dark mode programmatiquement :

<div class="bg-white dark:bg-gray-900">
  <p class="text-gray-900 dark:text-gray-100">Contenu</p>
</div>

Conclusion

Tailwind CSS accélère considérablement le développement front-end une fois la courbe d'apprentissage passée. La clé est de penser en composants et de tirer parti du système de design tokens.