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

Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs

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.

Framework Original Size Minified Gzip Brotli
Tailwind 477.6kb 350.4kb 58.8kb 17.1kb
Bootstrap 187.8kb 152.1kb 22.7kb 16.7kb
Bulma 205.6kb 172.4kb 23.0kb 18.0kb
Foundation 154.1kb 119.2kb 15.9kb 12.9kb
Tachyons 111.7kb 71.8kb 13.4kb 7.5kb
Semantic UI 809.4kb 613.8kb 100.6kb 77.8kb
Materialize 175.0kb 138.5kb 21.1kb 17.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

mike

mike

Chef de projet web, Mike assure la réussite de projets digitaux depuis 2011. Son but est d'aider les webmasters et les freelances à tirer le meilleur des outils comme WordPress, WooCommerce et Elementor. Sur ce blog il partage son expérience, ses astuces et les pépites dénichées sur le web. Mike aime les afters, faire des shoots de baskets et les films d'horreur,

Laisser un commentaire

Votre adresse e-mail 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.

Thématiques

Vous recherchez des astuces dans un secteur donné ? Vous pouvez accéder directement à la catégorie qui vous intéresse !