CSS a longtemps souffert d'une réputation de spaghetti incontrôlable. Tailwind et SCSS apportent chacun des réponses différentes au même problème. Voici comment les combiner intelligemment.
La malédiction du CSS global a brisé plus d'une équipe. Une classe modifiée ici casse un composant là-bas, personne ne sait pourquoi. Les méthodologies comme BEM ou SMACSS apportaient de la discipline, mais au prix d'une verbosité importante. Tailwind a changé la donne en proposant un paradigme radicalement différent : des classes utilitaires atomiques directement dans le HTML.
L'avantage de Tailwind est sa prévisibilité. Une classe fait une chose, exactement ce que son nom indique. Pas d'effet de bord, pas d'héritage surprise. Le CSS final est minimal car Tailwind purge les classes inutilisées à la compilation. La contrepartie, c'est du HTML qui peut devenir verbeux avec des dizaines de classes sur un seul élément.
La combinaison SCSS + Tailwind via @apply offre le meilleur équilibre : on garde les classes sémantiques dans les
fichiers SCSS pour les composants complexes, et on utilise les utilitaires Tailwind pour les ajustements rapides. Une
règle d'or : si vous utilisez plus de six classes Tailwind sur un élément qui se répète, créez un composant SCSS. Si
c'est ponctuel, l'utilitaire inline est parfait.
- Centraliser les tokens de design dans les variables SCSS
- Utiliser
@applypour les composants récurrents - Réserver les classes inline pour les variations ponctuelles
- Ne jamais dupliquer une règle — créer un mixin si besoin