Aujourd’hui je voulais vous parler d’un Framework CSS qui a la cote sur le Web en ce moment. Bien pensé, ce dernier offre la possibilité de manipuler vos balises HTML à l’aide de classes CSS afin d’obtenir un résultat stylisé très rapide. Je voulais vous le présenter.
Un Framework CSS ?
Les Frameworks CSS sont assez nombreux sur la toile, mais je n’en ai jamais vraiment utilisé. J’ai toujours voulu, peut-être à mes dépens, mais surtout pour mon plaisir, commencer un projet par une page blanche. Il n’empêche que j’ai évidemment été confronté aux Frameworks CSS manipulés par d’autres et pour lesquels j’ai dû me documenter pour pouvoir intervenir. J’ai également utilisé des librairies CSS qui fonctionnent de la même manière.
Le plus célèbre d’entre eux et auquel j’ai été le plus souvent confronté, est Bootstrap. Mais aujourd’hui, je voulais vous parler de Tailwind.
Tailwind CSS
Comme les autres, Tailwind (Traduction : vent arrière) fonctionne de la même manière, en ajoutant les classes CSS tout de suite dans votre HTML, vous obtenez un résultat rapide et bien structuré :
<p class="block w-8/12 lg:hidden px-6 text-center font-bold">Lorem ipsum dolor sit amet ...</p>Dans l’exemple ci-dessus, vous affichez un texte gras, centré et avec un espacement de 6px sur chaque côté. Il a une largeur de 66.6666% (2/3) par rapport à son parent et sur les écrans large (1024px), il disparait.
Avantage et inconvénient
Vous l’aurez compris, les classes CSS sont bien pensées pour effectuer du style très rapidement. Mais le langage CSS a la capacité de réaliser un style sur plusieurs éléments, ce qui n’est pas le cas ici puisqu’on doit ajouter les classes sur chaque balise HTML. Autre cas de figure, vous pourriez avoir des éléments distincts, mais des classes très longues pour les styliser, ce qui pourrait en déplaire au développeur comme moi, rien qu’en regardant le code.
Pour contourner ce problème, vous pouvez passer par un compilateur ou un gestionnaire de dépendances. Avec Gulp ou Webpack, vous pouvez configurer Postcss qui inclut la fonction « @apply » pouvant combiner plusieurs classes. Dans notre exemple, voilà à quoi cela ressemblerait :
<style>
.paragrah {
@apply block w-8/12 lg:hidden p-6 text-center font-bold
}
</style>
<p class= »paragraph »>Lorem ipsum dolor sit amet …</p>
Si vous utilisez cette façon de faire, et ce plus proprement, comme dans un fichier CSS à part (ici c’était pour l’exemple), vous ne vous éloigneriez pas tant que ça de ce que vous faisiez avant. L’avantage dans ce cas-ci, c’est qu’en plus d’utiliser Tailwind, vous ne perdez pas de temps à trouver un nom pour vos classes, qui est un problème pour beaucoup de codeurs et dont je fais partie 😉
Tailwind CSS est avantageux dans le fait qu’il est très complet et qu’on peut obtenir un résultat très rapide, mais il ne convient pas à tous les projets bien sûr. Comme inconvénients, je les ai déjà cités, cela peut faire beaucoup de classes CSS dans l’HTML et sans compilation, le fichier CSS minifié de Tailwind est vraiment très lourd.
L’ancien site de mon agence en test
Pour tester l’outil, j’ai refait l’ancien site de mon agence (qui vient de changer) avec Tailwind. J’ai vraiment trouvé que le positionnement des éléments est très intéressant, notamment grâce aux classes propres au flex-boxes, dont je ne sais plus me passer. La gestion des largeurs et du responsive sont aussi vraiment bien foutu.
Au final, le projet fait tout de même appel à des feuilles de style indépendantes. J’en ai créé une pour les boutons, pour les textes et pour des éléments trop spécifiques qui nécessitait trop de CSS. J’aurais pu m’en passer pour les textes si j’avais utilisé un compilateur, mais ça n’a pas été le cas, je voulais vraiment aller vite. D’ailleurs, le site perd entre autre en performance à cause de cela, le fichier tailwind.min.css est vraiment lourd, comme je le disais (mais ce n’est pas seulement pour cela, le site est un one page avec des images de bonne qualité …)
Vous pouvez voir ce test via le lien ci-dessous, afin d’y inspecter les éléments. Vous verrez que pour les balises qui se répètent (formulaire, partenaires, créations, …) c’est très perturbant de voir autant de classes !
https://arpeggio.lintermediaire.be/
En fait, vous pouvez vous-même tester l’outil grâce à ce lien : https://play.tailwindcss.com/
Conclusion
Je comprends que Tailwind surf sur le web avec un vent arrière, mais il ne conviendra pas à tous les projets.
Personnellement, je pense qu’il serait intéressant pour un projet plus sérieux, où le style serait secondaire, comme une plateforme d’administration par exemple, quelque chose de très carré et qui permettrait à plusieurs développeurs qui travaillent sur un même projet de garder une même base pour le style, en utilisant un Framework très complet bien documenté.
Je vous laisse pour terminer le lien officiel de Tailwind si je vous ai donné envie de le tester : https://tailwindcss.com/ – bon code !
