Tailwind CSS

Aujourd’hui je vous parle d’un framework CSS que j’affectionne pour sa simplicité de configuration et sa polyvalence de class. Celui-ci est actuellement en plein essor et le créateur, Adam Wathan, est très actif. Il s'agit de Tailwind CSS

Class & Furious

"A utility-first CSS framework for rapidly building custom designs"

En effet l’objectif principal de Tailwind CSS est de “faire vite” mais également avec le plus de flexibilité possible. J’entends par là que vous pouvez mettre de côté le CSS, voir le SCSS, puisqu’avec Tailwind vous possédez un large choix de classes permettant de mettre en forme vos éléments de page de manière précise et unique. 

Pimp my size

Si parmi toutes les classes disponibles, aucunes ne vous conviendraient, il vous est possible d’étendre (“extends” pour les anglophones) celles déjà présentes, le tout en gardant les préfixes par défaut définit par Tailwind. Pour illustrer mon propos voici un exemple :

.bg-red-500

Ci-dessus, une classe existante de Tailwind permettant d'appliquer une couleur de fond, ici rouge, sur l'élément qui contient la classe.

Lorsque vous regardez plus attentivement la documentation, spécialement dans la partie des class concernant les couleurs de fonds, vous remarquerez qu’elles sont toute préfixées de bg- pour background, suivi du nom de la couleur puis du degré d’intensité de celle-ci. Jusqu’ici, rien de choquant.

Eternel insatisfait

Admettons, que parmi toute les couleurs proposées, aucunes ne vous conviennent. L’ idée serait de définir une classe, une variable SCSS (voir CSS) ou autre manière d’appliquer votre couleur “custom” en tant que couleur de fond sur votre élément.

Et bien avec Tailwind c’est différent. En effet lors de son installation vous remarquerez la présence d’un fichier tailwind.config.js (ou tailwind.js). À l’intérieur on distingue l’export d’un objet javascript contenant plusieurs propriétés. Et bien c'est dans cet objet que toute la magie / configuration opère.

NB : En fonction du type d’installation de Tailwind, minimal ou complète, le contenu de ce fichier diffère. Dans un premier temp, je vais supposer que vous avez opté pour le premier type d’installation, à savoir celle dite “minimale”.

Parmi celles-ci, intéressons nous pour l’instant à l’objet theme. Cet objet nous permet de configurer tout ce qui concerne la conception visuelle de notre application. Les types de polices utilisées, les points d’arrêts, les tailles de bordures et j’en passe… Intéressons nous maintenant à extend contenu dans theme. Comme je vous l’expliquais plus haut, extend va nous permettre d’étendre les class disponibles sans pour autant les écraser.

Cas pratique

Revenons donc sur notre besoin initial : Le rouge proposé ne me convient pas, je veux utiliser mon propre rouge sans pour autant devoir définir manuellement, une nouvelle class en css ou autre. Qu'à cela ne tienne :

Tester ensuite la classe suivante :

.bg-mon-rouge

Waw ! ça fonctionne, pourtant j’ai défini le nom mon-rouge , pas bg-mon-rouge ? Je ne comprends pas ? Pourquoi ? Comment ? Qui-sui.. Hum.

Sans plus d’explication je vais vous demander d’appliquer sur un élément <p> la classe suivante :

.text-mon-rouge

Wait, quelle est cette sombre magie ?

En effet lorsque nous avons défini la propriété mon-rouge dans l’objet colors nous avons automatiquement créée les classes suivantes : 

• .text-mon-rouge
• .bg-mon-rouge
• .border-mon-rouge

Et si vous allez sur la section correspondant aux propriétés modifiées, dans la documentation de Tailwind, vous noterez que les préfixes des classes sont équivalents. Pratique, n’est-ce pas ? Sachez également que cela ne concerne pas uniquement les couleurs.

Je vous laisse ici la liste des propriétés que vous souhaiterez surement étendre: tailwindcss.com/docs/theme/#configuration-reference

Amusez-vous bien !