Tailwind CSS

Tailwind CSS adopte une approche utility-first, ce qui signifie que chaque classe correspond à une propriété CSS unique ou à une combinaison de propriétés. Cette méthode permet de :

• Écrire moins de CSS personnalisé.
• Construire des interfaces cohérentes et modulaires.
• Créer des designs responsives rapidement grâce aux classes pour différentes tailles d’écran.

Tailwind CSS est compatible avec tous les frameworks front-end modernes comme React, Vue, Angular et peut être intégré dans n’importe quel projet HTML/CSS traditionnel.

Installation

Avec npm :

1npm install -D tailwindcss
2npx tailwindcss init

Le fichier de configuration tailwind.config.js est créé pour personnaliser les couleurs, polices, tailles, etc.

Dans votre CSS principal (style.css) :

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

Pour compiler le CSS avec Tailwind :

1npx tailwindcss -i ./src/style.css -o ./dist/style.css --watch

Exemple de base

1<div class="bg-blue-500 text-white font-bold p-4 rounded">
2  Bienvenue sur Larafrique
3</div>

Ce code crée un bloc avec un fond bleu, texte blanc, gras, un padding de 1rem et des coins arrondis.

Mise en page responsive

Tailwind propose des classes spécifiques pour différentes tailles d’écran :

1<div class="text-center md:text-left lg:text-right p-4">
2  Texte responsive
3</div>

• md:text-left : alignement à gauche sur les écrans moyens et plus grands.
• lg:text-right : alignement à droite sur les écrans larges.

Flexbox et Grid

Tailwind simplifie l’utilisation de Flexbox et Grid :

 1<div class="flex justify-between items-center p-4 bg-gray-100">
 2  <div>Logo</div>
 3  <div>Menu</div>
 4</div>
 5 
 6<div class="grid grid-cols-3 gap-4">
 7  <div class="bg-red-300 p-4">1</div>
 8  <div class="bg-green-300 p-4">2</div>
 9  <div class="bg-blue-300 p-4">3</div>
10</div>

États et interactions

Les classes peuvent gérer les états hover, focus, active :

1<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
2  Cliquer ici
3</button>

Bonnes pratiques et outils

• Purger le CSS en production pour réduire la taille finale (content dans tailwind.config.js).
• Utiliser les variants responsives (sm:, md:, lg:, xl:).
• Personnaliser les couleurs, polices et espacements via tailwind.config.js.
• Utiliser des plugins officiels comme @tailwindcss/forms, @tailwindcss/typography ou @tailwindcss/aspect-ratio.
• Combiner avec PostCSS ou Vite pour un workflow moderne.

Exemple complet

1<div class="max-w-md mx-auto mt-10 bg-white p-6 rounded shadow-lg">
2  <h1 class="text-2xl font-bold mb-4">Bienvenue sur Larafrique</h1>
3  <p class="text-gray-700 mb-4">Tailwind CSS permet de construire des interfaces modernes rapidement.</p>
4  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
5    Découvrir
6  </button>
7</div>

Tailwind CSS est un outil moderne et puissant pour le développement front-end. Il permet de créer des designs rapides, responsives et modulaires sans écrire de CSS personnalisé complexe, tout en offrant une grande flexibilité pour personnaliser chaque élément de l’interface.