Tailwind CSS

Qu’est-ce que Tailwind CSS ?

Tailwind CSS est une toute petite librairie CSS, utilitaire d’abord↗, permettant de créer des designs personnalisées, sans le changement de contexte requis par le CSS classique. Il s’agit purement d’une librairie CSS et ne fournit aucun composant ou logique prédéfini, elle offre un ensemble d’avantages très différent↗ par rapport à une librairie de composants comme Material UI.

Cela rend le CSS incroyablement facile et rapide à écrire, comme le montre l’exemple suivant :

Ancien CSS :

1. Écrire du CSS, souvent dans un fichier séparé

.my-class {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  padding: 1rem;
}

2. Importer le CSS dans votre composant

import "./my-class.css";

3. Ajouter la classe à votre code HTML

<div class="my-class">...</div>

Équivalent dans Tailwind :

1. Écrivez simplement des classes dans votre HTML

<div class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4">
  ...
</div>

Lorsqu’elle est utilisé avec des composantes React, cela permet de créer des interfaces utilisateur de façon extrêmement puissant et rapidement.

Tailwind CSS dispose d’un magnifique système de conception intégré, qui sort de l’oeuf avec une palette de couleurs soigneusement choisie, des modèles de dimensionnement pour des styles tels que la width/height et le padding/margin pour une conception uniforme, ainsi que des points d’arrêt (breaking points) pour créer des mises en page. Ce système de conception peut être personnalisé et étendu pour créer la boîte à outils exacte de styles dont votre projet a besoin.

Tru Narla mieux connu sous le nom de mewtru↗ a donné une conférence étonnante sur la construction d’un système de conception à l’aide de Tailwind CSS↗.

Utilisation

Assurez-vous d’avoir installé des plugins pour Tailwind dans votre éditeur de code afin d’améliorer votre expérience d’écriture avec Tailwind.

Extensions et plugins

• Extension VSCode↗
• Integration avec JetBrains↗
• Neovim LSP↗

Formatage

Les classes CSS Tailwind peuvent facilement devenir un peu désordonnées, donc un formateur pour les classes est indispensable. Tailwind CSS Prettier Plugin↗ trie les classes dans l’ordre recommandé↗ afin que les classes correspondent au bundle CSS généré. Lorsque vous sélectionnez Tailwind dans la ligne de commande, nous l’installons et le configurons pour vous.

Appliquez les classes de façon conditionnelle

L’ajout conditionnel de classes à l’aide de ternaires peut devenir très compliqué et difficile à lire. Ces packages vous aident à organiser vos classes lorsque vous utilisez une logique conditionnelle.

• clsx↗
• classnames↗

Ressources utiles