Tailwind CSS : qu’est-ce qui rend ce framework utility-first si ex­cep­tion­nel ?

Tailwind CSS est un framework « utility-first » qui permet aux uti­li­sa­teurs de définir des com­po­sants. Ce CSS jouit d’une grande po­pu­la­rité mais nécessite un certain niveau de con­nais­sances préa­lables.

Un framework CSS est un re­grou­pe­ment de fonctions et d’éléments né­ces­saires à la con­cep­tion d’un site Internet. Le fait que les dé­ve­lop­peurs puissent utiliser les options préexis­tantes simplifie la con­cep­tion de sites et les col­la­bo­ra­tions entre équipes. Les fra­me­works CSS s’appuient sur des bi­blio­thèques de code qui sont ensuite employées dans le code HTML.

Tailwind CSS est un framework CSS populaire in­té­gra­le­ment utility-first. Il fournit aux uti­li­sa­teurs des classes CSS de bas niveau en PostCSS qui peuvent être utilisées pour définir des com­po­sants et des designs de manière in­dé­pen­dante. Tailwind CSS fut développé par Adam Wathan et est sorti pour la première fois en 2017. Depuis lors, il a été adopté par des millions d’uti­li­sa­teurs.

Les prin­ci­paux atouts des fra­me­works utility-first tels que Tailwind CSS sont leur flexi­bi­lité et les pos­si­bi­li­tés que celle-ci offre en termes de per­son­na­li­sa­tion. À la dif­fé­rence des feuilles de style en Cascade (CSS) tra­di­tion­nelles, les fra­me­works utility-first n’incluent pas de com­po­sants pré­dé­fi­nis, mais offrent des classes utility. Ces dernières con­tien­nent des styles pré­dé­fi­nis qui peuvent être appliqués à un élément. Ceci simplifie le processus, rend le code plus clair, et fournit de nom­breuses options de design qui per­met­tent d’obtenir des sites Internet plus per­son­na­li­sés.

Tailwind CSS convient tout par­ti­cu­liè­re­ment aux uti­li­sa­teurs qui possèdent des notions préa­lables de CSS et à ceux qui con­nais­sent ses fonc­tion­na­li­tés spé­ci­fiques. Une com­pré­hen­sion des bases du HTML est im­por­tante pour tra­vail­ler avec ce framework utility-first, étant donné que les com­po­sants doivent être créés in­dé­pen­dam­ment, et que tous les styles sont stockés di­rec­te­ment au sein des fichiers HTML. À l’exception de quelques basiques tels que les marges, les tailles et les couleurs, Tailwind CSS ne comprend pas d’éléments par défaut. À condition d’avoir l’ex­pé­rience suf­fi­sante, les dé­ve­lop­peurs peuvent utiliser Tailwind CSS pour concevoir en toute liberté des éléments de site et gagner du temps.

Ce framework CSS est adapté aux projets Web frontend de toute nature et peut être combiné à certains fra­me­works Ja­vaS­cript bien connus. À titre d’exemple, il est possible de recourir à Lavarel et React avec Tailwind CSS, ou Vue.js. Ce principe de com­bi­nai­son rompt avec l’approche orientée objet de nombreux autres fra­me­works.

Compte tenu de son approche par­ti­cu­lière, Tailwind CSS ne convient pas à tout le monde. Pour découvrir si une approche utility first est ce qu’il vous faut, penchez-vous sur les avantages et les in­con­vé­nients de Tailwind CSS.

• Il n’est pas né­ces­saire de basculer des fichiers HTML aux fichiers CSS. En principe, cela fluidifie le dé­rou­le­ment du travail.
• Tra­vail­ler avec Tailwind CSS donne accès à des solutions plus per­son­na­li­sées pour les éléments im­por­tants d’un site Internet. Ceci permet à ce dernier de sortir du lot.
• Du fait des classes pré­dé­fi­nies et de l’uti­li­sa­tion des requêtes Média CSS, le framework Tailwind CSS est responsif, il fonc­tionne donc tout aussi bien sur les appareils mobiles.
• De manière générale, le dé­ve­lop­pe­ment est plus rapide et plus facile du fait des classes utility.
• Les classes pré­dé­fi­nies aident à com­pres­ser le CSS.
• L’im­plé­men­ta­tion d’un composant modal avec Tailwind CSS devient plus facile.
• Le framework est stable et rarement sujet à des bugs ou des erreurs.
• Si vous avez déjà des notions de CSS, la structure et l’approche logiques du framework utility-first cons­ti­tuent un bonus et votre courbe d’ap­pren­tis­sage sera plus ou moins plate.
• Si vous êtes ac­tuel­le­ment en cours d’ap­pren­tis­sage du CSS et souhaitez utiliser Tailwind CSS en même temps, vous pourrez vous appuyez sur sa do­cu­men­ta­tion ex­haus­tive et facile à com­prendre pour vous orienter.

• Malgré tout, la toute première uti­li­sa­tion du framework s’avèrera assez ardue si vous n’avez pas l’ex­pé­rience des spé­ci­fi­ci­tés du CSS et des obstacles qui lui sont propres.
• Le code peut laisser perplexe étant donné la multitude d’in­for­ma­tions stockées dans le fichier HTLM. Mélanger design et HTML enfreint le principe de la « sé­pa­ra­tion des préoc­cu­pa­tions ».
• Lorsque vous installez Tailwind CSS, les styles CSS par défaut sont supprimés. Vous devez commencer par recréer tous les éléments. Y-compris les com­po­sants tels que les boutons, les en-têtes et les barres de na­vi­ga­tion.
• Certains éléments HTML se répètent dans le balisage, le code viole donc le principe « Ne vous répétez pas ! ». Ceci se produit, par exemple, lorsqu’un certain élément doit être utilisé plusieurs fois sur le site.

À l’instar d’autres fra­me­works, Tailwind CSS vise à faciliter le processus de création de sites Internet. Certaines classes pré­dé­fi­nies ainsi que certaines règles CSS bien connues per­met­tent une création de sites Internet plus rapide. Comme le principe est toujours le même, les uti­li­sa­teurs ex­pé­ri­men­tés peuvent basculer d’un framework à un autre plus ra­pi­de­ment. Tandis que les solutions con­ven­tion­nelles offrent des com­po­sants fixes tels que des boutons et des barres de na­vi­ga­tion, Tailwind CSS cible les pro­fes­sion­nels qui ont des notions préa­lables étendues en CSS.

Le plus simple pour ajouter Tailwind CSS est d’utiliser un ges­tion­naire de paquets. Il faut que Node.js soit installé au préalable sur votre machine. Voici comment procéder.

Créez un nouveau projet sur le terminal.

Cela créera un fichier package.json dans le ré­per­toire racine. L’extension « -y » est utilisée en vue de définir les valeurs par défaut.

Pour installer la dernière version stable en date de Tailwind CSS en tant que dé­pen­dance, utilisez la commande suivante :

L’ins­tal­la­tion peut prendre quelques minutes.

Pour générer le fichier tailwind.config.js, entrez la commande suivante :

Le contenu du fichier devrait res­sem­bler à ceci :

Accédez au dossier src et ajoutez les lignes suivantes à votre fichier CSS :

Enfin, entrez la commande suivante dans le terminal pour lancer le processus de cons­truc­tion :

La po­pu­la­rité de Tailwind CSS n’est que peu sur­pre­nante. Les dé­ve­lop­peurs qui savent tra­vail­ler avec les astuces CSS ap­pré­cie­ront le fait que cette structure leur ga­ran­tisse un travail plus rapide et moins entravé. Néanmoins, les débutants seront mieux servis par une al­ter­na­tive car la structure est plus difficile à saisir et fait courir un risque d’erreurs plus important.