Tailwind css : un framework css avec une approche différente

Tailwind css : un framework css avec une approche différente
Temps de lecture estimé : 3 minutes

La plupart des frameworks CSS en font trop

Si vous avez déjà utilisé un framework css (comme Boostrap ou autre) sur plusieurs projets, vous avez sans doute déjà ressenti cela. Ils sont faits avec tout un set d’éléments prédéfinis comme des boutons, cards, alertes etc. qui vous permettent d’aller vite dans un premier temps, mais qui au final peut poser problème lorsque vous voulez personnaliser un design, sans compter les éléments dont vous ne vous servirez jamais mais qui alourdissent le css.

On se retrouve généralement à importer le css du framework, puis à charger un autre fichier css contenant toutes les personnalisations qu’on souhaite apporter non seulement à notre design, mais également aux valeurs par défaut du framework qu’on veut modifier.

Si vous en avez marre de vous battre avec votre framework css, à surcharger des styles de base qui ne vous conviennent pas, en faisant bien évidemment à être spécifique, car vous avez besoin de changer le bouton de cette page, et non tous les boutons sur toutes les pages, fini la guerre des spécifications, Tailwind est fait pour vous.

Tailwind utilise une approche différente : au lieu d’utiliser des éléments préconçus, il vous permet d’utiliser des classes de bas-niveaux vous permettant de personnaliser votre design just en éditant votre HTML, ceci vous permettant de créer rapidement des design de pages.

Responsive jusqu’au bout des ongles

Tailwind utilise le préfixe {screen}: ce qui vous permet de voir facilement dans le code les classes s’appliquant à tel taille d’écrans, tout en conservant le nom d’origine de la classe de base. Voici un petit exemple pour comprendre

Dans l’exemple suivant :

  • sur toutes les tailles d’écran cette pagination sera justifiée au début,
  • pour les écrans mobile portrait en justifié centré,
  • mobile paysage justifié à la fin,
  • ordinateur portable justifié entre
  • grand écran aura le style par défaut spécifié au début, justify-start

Les avantages d’utiliser le framework Css Tailwind

L’idée derrière Tailwind est donc de réaliser son design en utilisant uniquement les classes low-level, presque sana voir à toucher au css. Travailler ainsi directement dans le fichier html apporte plusieurs avantages

  • Vous n’avez plus à vous triturer l’esprit pour inventer des noms de classe. Plus besoin d’utiliser des noms louches comme sidebar-inner-wrapper juste pour pouvoir styler quelque chose, ni de chercher el nom de classe abstrait parfait alors qu’il s’agit just d’un container flex.
  • Votre fichier CSS arrête de grossir. Avec une approche traditionnelle, votre css devient de plus en plus gros à chaque nouvel élément surchargé. En utilisant Tailwind, tout est réutilisable et vous devez très rarement écrire du nouveau code css
  • Les modifications se font de façon plus sécurisé. Le CSS est global et vous en savez jamais ce que vous casser lorsquie vous faites une modif. Les classes utilisées dans votre html sont locales définissent un style propre à votre page, vous pouvez donc les modifier sans crainte de tout péter ailleurs sur le site

Attention au poids du CSS de Tailwind !

De base avec les options par défaut, Tailwind pèse assez lourd, et est un poids lourd parmi les autres framework. En utilisant la compression Brotli, on arrive à un poids raisonnable de17.1ko, mais il existe d’autres alternatives vous permettant de réduire le poids.

FrameworkOriginal SizeMinifiedGzipBrotli
Tailwind477.6kb350.4kb58.8kb17.1kb
Bootstrap187.8kb152.1kb22.7kb16.7kb
Bulma205.6kb172.4kb23.0kb18.0kb
Foundation154.1kb119.2kb15.9kb12.9kb
Tachyons111.7kb71.8kb13.4kb7.5kb
Semantic UI809.4kb613.8kb100.6kb77.8kb
Materialize175.0kb138.5kb21.1kb17.1kb

Retirer tout le css inutilisé

Mozilla’s Firefox Send utilise Tailwind, pourtant leur fichier css est de seulement 13.1ko minifié et 4.7kb gzippé! Quel est ce prodige ?

Le secret est d’utiliser Purgecss, un outil qui permet de supprimer toutes les déclarations CSS dont vous ne vous servez pas dans votre projet. PurgeCss est tout particulièrement efficace sur Tailwind car Tailwing génère des centaines de classe pour vous, dont vous n’aurez sans doute pas besoin pour la plupart.

Concrètement, pour les margin par exemple, Tailwind génère une taille spécifique pour chaque taille d’écran et pour chaque coté d’un élément. Ceci conduit à des centaines de combinaisons différents, et toutes sont loin d’être nécessaires.

en utilisant Purgecss avec Tailwind, il est difficile d’avoir un fichier de plus de 10ko une fois nettoyé et compressé.

Pour en savoir plus sur comment utiliser PurgeCss avec Tailwind : tout est dans la doc ici : https://tailwindcss.com/docs/controlling-file-size

Send a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.