Framework, Front-end

Utiliser un framework CSS apporte de nombreux avantages tels qu’une augmentation de la productivité, ou encore une meilleure maintenabilité du code.
Dans cet article, nous allons vous présenter Tailwind CSS, le framework totalement personnalisable. Vous y découvrirez ses avantages et son utilisation.

Un créateur adepte de nouveaux projets

Adam Wathan est un homme passionné par le développement web, il est à l’origine de nombreux projets tels que Laravel Valet, Jigsaw ou encore Tailwind CSS.

C’est en travaillant sur un projet nommé KiteTail en 2017, que lui vient l’idée de créer le framework Tailwind CSS. Projet pour lequel il consacre aujourd’hui tout son temps.

 

Qu’est-ce que Tailwind CSS ?

Tailwind CSS est un framework permettant aux développeurs de personnaliser totalement et simplement le design de leur application ou de leur site web. Avec ce framework CSS, il est possible de créer un design d’interface au sein même du fichier HTML. Cette façon de programmer n’interfère pas avec les pratiques recommandées par le W3C comme celle de séparer le HTML des feuilles de style CSS.
En effet, pour utiliser Tailwind il faut prendre les classes CSS prédéfinies par le framework en les appelant dans un fichier HTML comme ceci : class="text-3xl font-bold text-cyan-500"

Au vu de cet exemple, on peut penser que Tailwind CSS reprend la même méthodologie de programmation que Bootstrap. Pourtant, en termes de poids, Tailwind CSS est plus lourd que le framework Bootstrap, on pourrait alors se demander pourquoi l’utiliser ?

 

La simplicité d’utilisation du framework CSS

Des classes CSS unitaires

Tailwind CSS se différencie par son utilisation des classes CSS. Le framework n’utilise que des classes unitaires c’est-à-dire, des classes qui n’ont qu’un seul objectif. Ainsi, la classe text-gray-500 ne sert qu’à mettre le texte sur lequel on l’applique en gris.

Pour bien comprendre la différence avec Bootstrap, nous allons créer un bouton bleu.
Sans hésitation on utiliserait la propriété btn btn-primary fournie par Bootstrap. Mais imaginons que ce ne soit pas le bon bleu que l’on souhaitait utiliser, il faudrait alors créer un fichier CSS dans lequel surcharger la bonne couleur.
Tailwind CSS évite justement cette démarche supplémentaire puisque, rappelez-vous, une classe est égale à un objectif. Pour créer le bouton bleu, il faudrait utiliser les classes suivantes : w-1/6 px-0 py-2 flex justify-center text-white border rounded bg-blue-700

Aux premiers abords, c’est sûr que c’est plus long à écrire ! Cependant, il est possible, pour les éléments que l’on utilisera souvent, de créer nos propres classes avec Tailwind CSS.

 

Une règle @apply pour créer ses propres classes CSS

Afin d’éviter l’écriture des classes avec cette syntaxe qui peut être répétitive sur les éléments au design identique, Tailwind CSS nous propose de créer nos propres classes CSS.
Directement dans le fichier CSS, on a la possibilité de donner un nom de classe et d’y indiquer toutes les propriétés à utiliser grâce à la commande @apply. Pour reprendre l’exemple du bouton bleu, on obtiendra une classe CSS qui ressemble à ceci :
.btn-blue {
@apply w-1/6 px-0 py-2 flex justify-center text-white border rounded bg-blue-700;
}

À noter que le framework CSS accepte le mélange entre sa syntaxe et celle du CSS habituelle :
.btn-blue {
background-color : blue;
@apply w-1/6 px-0 py-2 flex justify-center text-white border rounded;
}

 

Résumons rapidement

Les inconvénients à l’utilisation de Tailwind CSS …

La syntaxe du framework nécessite une bonne connaissance des différents noms de classes. De plus, le fonctionnement par classes unitaires peut se révéler très long à écrire en fonction du nombre de propriétés dont on a besoin. De ce fait, Tailwind CSS n’est pas recommandé pour tous les sites.

 

Et les avantages apportés par le framework CSS

Grâce à Tailwind, plus besoin de se creuser la tête pour trouver des noms de classes correctes ce qui peut se révéler être un gain de temps.
Même si le framework est assez lourd (477,6 ko), le poids peut être réduit car, Tailwind CSS supprime automatiquement tous les styles CSS dont on ne s’est pas servi pour la construction du design du site.

L’installation de Tailwind CSS

Via npm
L’installation du framework via npm est classique. Il suffit d’utiliser la commande npm install -D tailwindcss@latest

Via CDN
Pour l’installation via un CDN il faut utiliser la balise link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" cependant, avec cette méthode, plusieurs fonctionnalités seront indisponibles.

Tailwind CSS possède une grande communauté active et de nombreux adeptes. Plusieurs sites ont déjà fait le choix d’utiliser ce framework en pleine expansion. Dans la continuité de celui-ci, le créateur Adam Wathan a créé Tailwind UI, une bibliothèque de composants HTML.

Si cet article vous a plu, n’hésitez pas à lire notre rubrique dédiée aux frameworks

Partager

Twitter Linkedin

Vous serez peut-être aussi intéressé par :

Crystallize CMS e-commerce

Crystallize, un nouveau type de CMS e-commerce

Que peut apporter Crystallize à un site e-commerce ? En quoi est-il différent des autres CMS ? Dans cet article, nous vous présentons le CMS Crystallize, ses avantages et ses inconvénients dans une utilisation de site web e-commerce.

Créé par deux frères norvégiens Brad et Aleksander Farstad, le CMS e-commerce Crystallize répond aux exigences des CMS actuels, à savoir : avoir la capacité de gérer n’importe quel type de contenu, que ce soit du texte, une image, une vidéo, … indépendamment du support utilisé.

Vignette blog Svelte

Svelte, un framework JavaScript inégalé sur sa rapidité

Un framework JavaScript est apparu il y a quelques temps, faisant face directement à React et VueJs. Il s’agit du framework Svelte, qui concurrence ses aînés sur plusieurs points que nous allons vous détailler dans cet article.

Sachez que Svelte n’est pas tout nouveau, il a commencé à se faire connaître depuis sa dernière mise à jour, Svelte 3.0.

Ayant pour slogan “Cibernetically enhanced web apps”, Svelte se veut plus simple, plus réactif et moins chronophage dans son code.

Pourquoi utiliser TypeScript pour vos projets ?

Pourquoi utiliser TypeScript pour vos projets ?

C’est le langage sur lequel miser en ce moment ! Créé par Microsoft en 2012 dans le but d’améliorer et de sécuriser le développement en JavaScript, il est aujourd’hui un élément fondamental pour le développeur web. TypeScript est un langage destiné à être compilé en JavaScript.