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 :

CSS Logical Properties - Vignette

Utilisez-vous les propriétés logiques CSS ?

Les propriétés logiques CSS ont été introduites dans l’objectif d’améliorer l’accessibilité d’un site. En effet, la traduction des contenus sur le web est de plus en plus courante. Cependant, toutes les langues n’ont pas les mêmes spécificités. Nous pouvons avoir un sens d’écriture de la gauche vers la droite mais aussi de la droite vers la gauche, …

Pour apporter une solution à cela vous pouvez vous familiariser avec les propriétés logiques CSS.

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 de l'article sur Preact

Preact : une bibliothèque javascript React-Like de seulement 3 ko !

Preact est souvent considérée comme une version miniature de React
Si l’on peut lire régulièrement ce raccourci c’est tout simplement parce que ces deux bibliothèques javascripts partagent beaucoup de similitudes.
Cependant Preact se distingue de son paronyme de plusieurs façons, notamment en se focalisant sur la manipulation du DOM.
Si vous ne connaissez pas encore Preact, on vous propose une définition en trois points juste en dessous. Tout d’abord nous aborderons l’ADN de Preact, ensuite il sera question d’étudier sa différence avec React, et enfin nous verrons comment intégrer Preact à un projet ?.