Qu'est-ce que Tailwind CSS, pourquoi l'utiliser en 2023 (vs. Bootstrap) ?

Tailwind, le framework CSS utility-first et atomique, est mon outil de prédilection lorsque j'ai besoin de faire du CSS. Et Tailwind CSS pourrait bien être l'outil qu'il vous faut ! Ensemble, nous allons passer en revue les forces et les faiblesses de ce framework populaire, notamment par rapport à Bootstrap. Mon objectif est de vous donner les moyens de déterminer si c'est le bon choix pour vos projets !

Pourquoi Tailwind ? Pour plusieurs raisons. Tailwind apporte une approche moderne et nouvelle des outils CSS que j'ai trouvée rafraîchissante après avoir utilisé Bootstrap. J'ai trouvé le développement avec Tailwind plus amusant, et si vous me connaissez un peu, vous savez que la DX (ou l’Expérience Developer) est très importante pour moi.

Ces points forts (que nous explorerons plus tard en détail) ont également plusieurs inconvénients. Mais avant d'aborder tout cela, commençons par le début. J'ai dit que Tailwind est un framework atomique utility-first. Qu'est-ce que cela signifie, et pourquoi est-ce intéressant ?

Quel est (l'intérêt d') un framework atomique utility-first ?

Le CSS atomique se concentre sur la création de classes CSS qui ne font qu'une seule chose. L'idée est de construire votre interface en combinant des classes minuscules et réutilisables. Il est ainsi plus facile de comprendre ce qui se passe dans votre code, car chaque classe dit ce qu'elle fait et fait ce qu’elle dit, sans effets secondaires inattendus.

Par exemple, au lieu de créer une classe qui ressemble à ceci :

.button {
  background-color: blue;
  color: white;
  padding: 1rem;
}

Le framework crée trois classes, par exemple :

.bg-blue { background-color: blue; }
.text-white { color: white; }
.p-3 { padding: 1rem; } 

Si vous y réfléchissez bien, cela revient à remplacer element de style “inline” par une classe CSS. Maintenant, quel est l'intérêt, et pourquoi ne pas utiliser simplement des styles inline ?

Pourquoi ne pas utiliser des styles en ligne ?

Le but des classes dans Tailwind (et Atomic CSS en général) n'est pas d'écrire moins de code.

En utilisant un ensemble prédéfini de classes, vous encouragez la **cohérence du style **dans toute l'application. J'ai vu des designers UX juniors (qui travaillaient sans système de conception solide) proposer des couleurs et un espacement incohérents sur différentes pages. Si vous utilisez le style en ligne, rien ne vous empêche de définir n'importe quelle valeur arbitraire. Mais les classes définissent des valeurs distinctes et imposent une cohérence.

En prime, si ce que vous construisez utilise une conception atomique, les classes CSS à utilité atomique sont une solution naturelle.

Examinons maintenant les implications pour Tailwind CSS et plongeons dans ses forces et ses faiblesses.

Quels sont les points forts de Tailwind CSS ?

Comme nous l'avons mentionné, Tailwind CSS vous permet de créer un système de conception cohérent. En utilisant le fichier de configuration, vous pouvez facilement définir les couleurs, la typographie, l'espacement, etc. Cela garantit un "look and feel" cohérent dans l'ensemble de votre projet en définissant clairement les valeurs valides.

Cependant, contrairement à d'autres frameworks, Tailwind propose un large éventail de paramètres et offre une plus grande flexibilité. Je m'explique en prenant l'exemple de Bootstrap. Bootstrap est basé sur un système de grille à 12 colonnes. Douze, c'est bien parce que vous pouvez organiser 12 colonnes en groupes de 2, 3, 4 ou 6. Il est donc facile de créer une présentation en 2, 3 ou 4 colonnes.

Cependant, si vous devez créer une présentation en 5 colonnes pour une raison ou une autre, vous êtes bloqué. Tailwind, cependant, vous permet de créer des mises en page en 5 ou 7 colonnes si cela a un sens dans la conception.

Bootstrap, par exemple, ne vous offre pas cette flexibilité car chaque classe définie par un framework signifie plus de code CSS à charger. Cependant, Tailwind lit votre code et ne génère que les classes que vous utilisez réellement. Cela permet à Tailwind d'offrir une large gamme de classes sans sacrifier la vitesse du site web.

Et bien sûr, comme Bootstrap (et à vrai dire, la plupart des autres frameworks CSS), Tailwind CSS est mobile-first et fournit des classes utilitaires pour mettre en œuvre des mises en page réactives.

Tailwind est donc une excellente solution. Il présente cependant quelques inconvénients.

Les faiblesses de Tailwind CSS

Tout d'abord, si le CSS utility-first peut accélérer le développement une fois que vous savez comment il fonctionne, il peut être écrasant pour les débutants ou ceux qui sont habitués aux frameworks CSS traditionnels. Le nombre de classes à mémoriser peut être intimidant. Toutefois, Visual Code Studio fournit une IntelliSense et une complétion de code, ce qui atténue quelque peu ce problème.

Deuxièmement, les classes utilitaires peuvent encombrer le code HTML et le rendre plus difficile à lire. J'ai rencontré des modèles où le simple volume de classes utilitaires compliquait la compréhension de ce qui se passait.

Troisièmement, parce que Tailwind CSS se concentre sur les classes utilitaires, il n'est pas livré avec des composants intégrés comme Bootstrap. Et créer ses propres composants peut prendre du temps, surtout pour les interfaces utilisateur complexes. Heureusement, il existe des bibliothèques pour gérer cela. Par exemple, Daisy UI ou Headless UI.

Tailwind CSS est un framework CSS utilitaire puissant et flexible qui peut rationaliser votre processus de développement et vous aider à créer des designs cohérents. Cependant, il est essentiel de peser ses forces et ses faiblesses avant de s'y plonger la tête la première.

Alors, êtes-vous prêt à essayer Tailwind CSS ? Ou peut-être l'avez-vous déjà utilisé et souhaitez-vous nous faire part de vos impressions ?