Tailwind CSS – le nouveau framework CSS pour designer vos sites

Être développeur, c’est aussi suivre les dernières nouveautés et se mettre régulièrement à jour. Dans cet article, je vais vous présenter le résultat de mes recherches sur Tailwind CSS. Il s’inscrit dans la nouvelle génération de frameworks autour du CSS. En d’autres termes, tout ce qui concerne le style/design des sites Web. Actuellement, le leader sur ce créneau est Bootstrap de Twitter. Mais peut-être que Tailwind le surpassera – ou sera intégré à Bootstrap… seul l’avenir nous le dira !

Une écriture / lecture simplifiée dans le HTML avec Tailwind CSS

Ce framework vous propose d’écrire le style de vos pages Web directement dans votre code HTML. Comment est-ce possible ? Tailwind CSS possède une feuille de style assez complète de classe utilitaire. En d’autres termes, on devine facilement ce qui se cache derrière le nom des classes définies par la librairie. L’exemple ci-dessus présente bien le concept. Le rendu obtenu est le suivant :

Une petite traduction s’impose si cette écriture ne vous est pas familière :

  • font-medium => font-weight: 500;
  • text-center => text-align: center;
  • p-8 => padding: 2rem;
  • text-red-700 => –tw-text-opacity: 1; color: rgba(185, 28, 28, var(–tw-text-opacity));
  • text-gray-500 => –tw-text-opacity: 1; color: rgba(107, 114, 128, var(–tw-text-opacity));

Notez que Tailwind CSS possède une palette de couleurs assez impressionnante, adaptée à toutes vos fantaisies.

Tailwind CSS : un avantage de poids

Tailwind CSS fonctionne avec autoprefixer : celui-ci lui permet de rendre le code CSS compatible avec les navigateurs modernes.

En le couplant avec PostCSS, vous obtenez un fichier CSS final très léger. En effet, PostCSS analyse votre code HTML, Vue… et supprime automatiquement les classes Tailwind CSS que vous n’utilisez pas. Il est conseillé d’utiliser cette fonction de suppression uniquement lors de la mise en production. Car lorsqu’on développe, on a besoin de toutes les classes afin de prototyper sans perdre trop de temps. La différence de taille entre le fichier en développement et celui en production est impressionnante.

Lors de mon test, je suis passé de 7.39Mb à 6.91Kb.

Les désavantages de cette librairie

Depuis l’arrivé de Bootstrap, je l’avoue : je me suis beaucoup moins pris la tête sur du code CSS. J’ai utilisé des composants pré-fabriqués en les ajustant si besoin. Avec Tailwind CSS, j’ai l’impression de repartir de zéro puisque je dois réapprendre ce qui se cache derrière les classes que j’ai l’habitude d’utiliser. Cependant, il existe des solutions pour éviter de réinventer la roue : des bibliothèques de composants à copier-coller.

En ce qui concerne le business model, il se peut que nous assistions avec Tailwind à un changement par rapport à ce que propose Bootstrap. En effet, il existe une bibliothèque officielle – et majoritairement payante – de composants tout prêts nommée Tailwind UI.

Un dernier inconvénient : cette manière de faire du style alourdit les fichiers et les lignes HTML. Et encore plus lorsqu’on duplique du code pour utiliser le même style.

Pour parer à cette problématique, le framework vous propose de créer des classes à « l’ancienne ».

La petite histoire de Tailwind CSS

L’histoire de ce framework débute en août 2017 avec Adam Wathan, développeur FullStack et créateur de Tailwind CSS. A cette époque, Adam a rédigé un article expliquant ce qui l’a poussé à créer un tel framework.

Pour lui, l’écriture de classes CSS sémantiques est complexe à maintenir dans nos projets Web. (Si vous vous demandez ce qu’est une classe CSS sémantique, vous trouverez un exemple ci-dessus).

Il n’y a pas si longtemps, il était recommandé de créer des classes CSS qui « parlent ». Typiquement, dans l’exemple ci-dessus, la classe salutation doit être utilisée pour tout les blocs qui saluent le lecteur.

L’idée était de donner un nom fonctionnel aux propriétés CSS. Mais avec cette approche, on écrit beaucoup plus de classes CSS. Et surtout, on passe beaucoup de temps à trouver le bon nom de classe qui décrit son utilité. Sans parler de la maintenabilité d’une telle feuille de style.

Si vous êtes intéressé par les différentes manières de nommer des classes CSS, je vous invite à lire l’article de l’auteur de Tailwind CSS.

En conclusion, pour Adam, le plus simple consiste à appliquer le principe d’utility-first. C’est-à-dire de faire des classes CSS simples avec des noms qui correspondent aux propriétés CSS. De cette manière, plus besoin de lire la feuille de style, il suffit de lire l’attribut class du HTML.

Voici une transformation de notre exemple précédent :

Conclusion

Pour réaliser cet article, je me suis lancé dans un petit projet : créer une page de présentation digne d’un freelance avec Tailwind CSS, publié sur Netlify.

💬 Que pensez-vous du framework Tailwind CSS ? Tenterez-vous de l’implémenter dans vos projets actuels ou futurs ?

Pour poursuivre l’apprentissage de ce framework, je vous invite à lire l’article suivant. Celui-ci vous aide à tester rapidement et simplement Tailwind CSS. Si vous souhaitez en savoir plus sur cette librairie, je vous invite à consulter la documentation associée.

Vous y découvrirez notamment d’autres fonctionnalités un peu plus avancées, comme le Dark mode (mode sombre).

Articles Similaires

Comment sauvegarder vos sites, serveurs… sans exploser la facture énergétique

OhMyForm – Vos sondages sans GAFAM, écoconçus et installables localement

Scrcpy – Sauvez les données d’un smartphone à l’écran brisé… et recyclez-le