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-wrapperjuste 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
