Habitués aux différents frameworks css du type Bootstrap, Materialize ou encore d’autres ? Ils ont souvent la même philosophie, où l’on va avoir un style de base, des classes hyper spécialisées, et des classes utilitaires pour nous arranger. ( Ce qui est aussi le cas de Tailwind CSS)
Très efficace dans un premier temps, ces frameworks montre vite leurs limites lorsque l’on doit implémenter un vrai webdesign custom. Toutefois là commence les difficultés, on doit souvent surcharger des classes, ou encore redéfinir du code css pour vraiment faire ce que l’on veut, ce qui vient à l’encontre des intentions initiales du framework.
Tailwind CSS prends une approche totalement différente en misant tout sur de l’utilitaire, pas de composants ou de bouton stylisé par défaut, et le style remis à 0 (h1 ont le même résultat visuel que le p, etc…).
Pour nous la meilleure façon d’expliquer cette philosophie est la suivante :
Écrivez des instructions CSS via vos classes en HTML.
Grâce à ses classes utilitaires qui restent très proche du CSS de base, on peut facilement comprendre et savoir quelles classes nous devons mettre.
( Souvent les classes CSS de tailwind correspondent à une seule ligne CSS, comme le montre la documentation des différentes classes )
Ci-dessous un petit exemple d’intégration avec Tailwind CSS. Vous pouvez voir le style assez verbeux du framework où l’on identifie bien chaque commande CSS. (N’hésitez pas à faire glisser le panneau vers la droite pour voir le code associé)
Vous pouvez retrouver plus d’exemples sur Tailwind UI
Par ailleurs, Tailwind ce n’est pas seulement de l’utilitaire, une grosse partie de celui ci se cache dans son fichier de configuration
Configuration de tailwind
En effet, le fichier de configuration a un rôle très important dans ce framework css.
Au sein de la configuration, vous allez pouvoir configurer les choses suivantes :
- De nouvelles couleurs et leurs variantes
- De nouvelles fonts
- Étendre les classes déjà existantes
- Ajouter des plugins pour plus de fonctionnalités
- Désactiver des fonctionnalités de tailwind
- Utiliser des systèmes de thèmes pour customiser facilement vos sites
- Utiliser les variantes pour déterminer si les éléments doivent être affectés par du responsive, hover, focus, etc.
- Et encore beaucoup d’autres choses, je vous invite à aller voir la partie dédiée de la documentation pour découvrir toutes les possibilités
Vous trouverez ci dessous un petit exemple que configuration assez basique
module.exports = {
theme: {
extend: {
colors: {
customyellow: '#fcc10c',
customorange: '#f6a119',
customblack: '#32363d'
},
spacing: {
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.666667%',
'2/6': '33.333333%',
'3/6': '50%',
'4/6': '66.666667%',
'5/6': '83.333333%',
'1/12': '8.333333%',
'2/12': '16.666667%',
'3/12': '25%',
'4/12': '33.333333%',
'5/12': '41.666667%',
'6/12': '50%',
'7/12': '58.333333%',
'8/12': '66.666667%',
'9/12': '75%',
'10/12': '83.333333%',
'11/12': '91.666667%'
}
},
linearGradientColors: theme => theme('colors')
},
variants: {
backgroundColor: ['responsive', 'hover', 'focus', 'active']
},
plugins: [require('tailwindcss-gradients')]
};
Notre retour d’expérience
À Oktopod, nous l’avons utilisé sur quelques projets et nous sommes conquis, les projets qui nécessitaient des centaines de lignes css à travers plusieurs fichiers font maintenant une centaine de lignes tout au plus.
À vrai dire, Tailwind CSS nous aide au quotidien à standardiser nos pratique à travers les sites. Minimiser la partie custom du CSS nous permet aussi d’avoir des intégrations web avec des rendus prévisibles et une réutilisation simple.
Performance
Pour conclure, un mot sur la performance ?
Quand on évoque des frameworks css, souvent on pense à des frameworks qui viennent avec l’artillerie lourde et qui coûtent quelques centaines de kb…
Tailwind n’est pas non plus différent sur ce point-là, il souffre du même problème.
Mais rassurez-vous des solutions existent, et directement dans la documentation Tailwind CSS ! Ils vous expliquent ici, comment utiliser purge-css pour garder seulement les classes css que vous utilisez !
( Attention à react, il vous faudra changer légèrement le regex pour que ce soit fonctionnel)
Grâce à ce petite configuration, on passe de plusieurs centaines de kb à une dizaine seulement, sans compression gzip ou brotli. 🎉
Pourquoi d’aussi gros gains ?
Cela s’explique par plusieurs choses :
- Tailwind CSS gères une dizaine de couleurs et une dizaine de variante pour chaque couleur
- Tailwind CSS gères chaque breakpoint pour chaque classe
- etc
Au final, Tailwind va essentiellement dupliquer beaucoup de classes dans sa version non purgée. (Essentiel pour le framework car il doit prévoir tous les cas : responsive, hover, focus, etc.)
Pour illustrer ce que fait le le framework allons voir un petit peu ce qui se passe dans ses fichiers générés :
/*
Nous allons nous concentrer sur la classe .mt-8 pour l'exemple
Ci dessous la classe de base
*/
.mt-8 {
margin: 2rem;
}
/* ci dessous les variantes responsives de cette même classe */
.sm\:mt-8 {
margin-top: -2rem;
}
.md\:mt-8 {
margin-top: 2rem;
}
.lg\:mt-8 {
margin-top: 2rem;
}
.xl\:mt-8 {
margin-top: 2rem;
}
/* sans oublier les variantes avec les états */
.mt-8:hover { ... }
.mt-8:focus { ... }Donc au total, si la classe .mt-8 n’est pas utilisée c’est au minimum 7 classes CSS qui restent inutiles.
Au final, Multipliez ça par le nombre de classes qu’il existe dans Tailwind CSS, et ça vous donne l’étendue des potentiels gains si l’on inclut que ce que l’on utilise.
Où commencer pour apprendre tailwind ?
Afin d’apprendre, je ne peux que vous recommander le cours vidéo réalisé par le créateur de Tailwind CSS lui-même, Adam Wathan : https://egghead.io/playlists/design-with-tailwind-css-masterclass-f0db#
