Tailwind CSS : la boîte à outils qui a révolutionné le front-end !
Si tu as traité des sujets d’UI ou de design system ces dernières années tu as dû entendre parler de Tailwind ? Mais qu’est-ce que c’est et en quoi ça diffère de Bootstrap ?
Commençons par expliquer le concept à ta grand-mère
Imagine que tu fais un puzzle. Habituellement, tu dois chercher et assembler chaque pièce une par une, ce qui peut prendre beaucoup de temps. Tailwind CSS, c'est comme si t’avais un ensemble de pièces de puzzle magiques qui s'assemblent instantanément pour former l'image que tu veux. Chaque petite pièce (ou classe utilitaire) a un rôle spécifique, et en les combinant, tu obtiens rapidement un beau tableau (ou interface utilisateur) sans trop d'effort.
Let’s dive in !
Pourquoi c’est cool Tailwind ?
Tailwind CSS est un framework CSS utilitaire qui offre une approche différente de la conception web. Contrairement aux frameworks traditionnels comme Bootstrap, qui fournissent des composants préfabriqués (boutons, cartes, formulaires), Tailwind offre une boîte à outils de classes utilitaires que l’on peut combiner pour créer des designs personnalisés.
Voici quelques concepts clés qui font de lui, l’un des framework les plus en vogue:
Rapidité de Développement :
Il permet aux développeurs de styliser les éléments HTML directement dans le code HTML, sans avoir à écrire de CSS personnalisé. Cela accélère le processus de développement et réduit le temps nécessaire pour créer des interfaces utilisateur.
Exemple : Au lieu d'écrire du CSS pour définir la couleur de fond, la taille de la police et les marges, vous pouvez simplement ajouter des classes utilitaires comme
bg-blue-500,text-lgetm-4directement dans votre HTML.Cohérence et Flexibilité :
Il encourage une conception cohérente en utilisant des classes utilitaires standardisées. Cela permet de maintenir une apparence uniforme sur l'ensemble de l'application. De plus, il offre une grande flexibilité pour personnaliser les styles selon les besoins spécifiques.
Exemple : En utilisant des classes utilitaires comme
bg-blue-500pour la couleur de fond ettext-whitepour la couleur du texte, vous pouvez facilement appliquer des styles cohérents à tous les boutons de votre application.Réduction de la Complexité :
Il élimine la nécessité de gérer des fichiers CSS séparés et de maintenir des styles personnalisés. Cela réduit la complexité du code et facilite la maintenance à long terme.
Exemple : En utilisant des classes utilitaires, vous n'avez pas besoin de créer et de maintenir des fichiers CSS séparés pour chaque composant de votre application. Tout est géré directement dans le HTML.
Responsive Design :
Il inclut des classes utilitaires pour créer des designs réactifs, permettant à votre application de s'adapter à différentes tailles d'écran sans effort supplémentaire.
Exemple : Vous pouvez utiliser des classes comme
sm:text-lg,md:text-xletlg:text-2xlpour ajuster la taille de la police en fonction de la taille de l'écran.Personnalisation :
Même si des classes utilitaires prêtes à l'emploi sont fournies, il offre également la possibilité de personnaliser les styles en modifiant le fichier de configuration. Cela permet d'adapter les styles aux besoins spécifiques de votre application.
Exemple : Vous pouvez modifier le fichier
tailwind.config.jspour ajouter des couleurs personnalisées, des tailles de police ou des espacements spécifiques à votre projet.Performance :
En utilisant Purge CSS, il élimine automatiquement toutes les classes utilitaires non utilisées dans le CSS final ce qui permet de rendre le code léger et plus performant.
Exemple : La couleur
text-pink-800est définie par défaut mais vous n’avez aucun texte en rose foncé dans votre application ? Purge CSS va le supprimer et votre CSS final ne définira que les couleurs de textes qui sont actuellement utilisée spar votre application.
Et par rapport à Bootstrap ?
Bootstrap se différentie de Tailwind sur différents aspects :
Philosophie et approche : Bootstrap adopte une approche basée sur les composants. Il fournit une série de composants prêts à l'emploi comme des boutons, des formulaires, des modales, etc.
Flexibilité et personnalisation : Avec Bootstrap, bien que l’on puisse personnaliser les composants, on est vite limité par les styles par défaut et les conventions du framework.
Maintenance : Les classes utilitaires de Tailwind rendent le code CSS plus facile à lire et à maintenir, car chaque classe a une seule responsabilité (par exemple,
bg-blue-500pour la couleur de fond,text-centerpour l'alignement du texte).Poids et performance : Bootstrap inclut beaucoup de styles et de composants par défaut, ce qui peut rendre le fichier CSS final assez lourd.
Exemple
Imaginons que l’on veuille créer un bouton de connexion pour une application :
Avec Bootstrap :
Avec Tailwind CSS :
Au premier abord, Tailwind va paraitre plus compliqué mais imaginons que le bouton de connexion doit être vert et pas bleu comme les autres bouton primary ? Compliqué avec Bootstrap, ce changement se fait en un instant avec Tailwind.
Et d’un point de vue Product ?
En tant que Product Manager le plus gros avantage que peut apporter Tailwind c’est la cohérence de l’UI qu’il apporte même lorsque celle ci évolue beaucoup comme dans les start-ups. En effet, si vous n’avez pas encore de design system, que la vision de votre UI se cherche encore ou s’il y a un gros turn-over de vos composants, il est important de garder une cohérence pour ne pas perdre les utilisateurs et c’est ce que va permettre Tailwind.
Exemple : si vous souhaitez vous souhaitez faire évoluer votre palette de couleur en passant de couleurs vives à des plus pastel, un changement de configuration dans Tailwind mettra à jour toute l’UI vous permettant ainsi de garder de la cohérence.