Tailwind CSS : Les bonnes pratiques pour un design system scalable

Tailwind CSS a gagné la guerre des frameworks CSS. Mais "un grand pouvoir implique de grandes responsabilités". Si vous l'utilisez mal, votre code HTML peut vite devenir illisible, rempli de chaînes de classes interminables.

Voici comment garder votre code propre et scalable avec Tailwind.

1. Penser Composants, pas Copier-Coller

L'erreur du débutant est de répéter bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 sur chaque bouton de l'application. Si vous voulez changer la couleur principale, vous devez éditer 50 fichiers.

La solution : Créez un composant <Button> (en React/Next.js) qui encapsule ces classes. Vous définissez le style à un seul endroit. C'est la base de l'architecture par composants.

2. La puissance de `cn()` (clsx + tailwind-merge)

C'est l'utilitaire indispensable. Il permet de fusionner des classes CSS de manière intelligente. Par exemple, si votre composant Button a un padding par défaut p-4, mais que vous l'appelez avec className="p-8", `cn()` va s'assurer que seul p-8 est appliqué (et non les deux en conflit).

Utilisez toujours `cn()` pour permettre à vos composants d'accepter une prop `className` externe pour des overrides ponctuels.

3. Utiliser le fichier de configuration (tailwind.config.js)

Ne codez pas les couleurs en dur (ex: bg-[#123456]). Définissez votre palette de couleurs, vos polices et vos espacements dans le fichier de configuration.

Utilisez des noms sémantiques comme primary, secondary, destructive plutôt que blue, gray, red. Cela vous permet de changer tout le thème de votre site (ou d'implémenter un Dark Mode) simplement en changeant les variables CSS, sans toucher à votre HTML.

En suivant ces règles, Tailwind devient le meilleur outil de styling au monde : rapide à écrire, facile à lire, et simple à maintenir à grande échelle.