Guide : Introduction à Tailwind CSS

Tailwind CSS : écrire du CSS sans quitter votre HTML

Tailwind CSS est un framework CSS utilitaire. Au lieu d’écrire des classes CSS personnalisées (.card-container, .btn-primary), vous composez votre design directement dans le HTML avec des classes utilitaires prédéfinies (flex items-center gap-4 bg-blue-500 text-white p-4 rounded-lg). Le résultat : vous construisez des interfaces 3 à 5 fois plus vite, sans jamais ouvrir un fichier CSS.

Installation avec Vite

npm create vite@latest mon-projet
cd mon-projet
npm install
npm install -D tailwindcss @tailwindcss/vite

Ajoutez le plugin Tailwind dans vite.config.js :

import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [tailwindcss()]
}

Dans votre fichier CSS principal :

@import "tailwindcss";

Les classes essentielles en 5 minutes

Espacement (margin et padding)

<!-- p = padding, m = margin, x = horizontal, y = vertical -->
<div class="p-4">     <!-- padding: 1rem (16px) partout -->
<div class="px-6">    <!-- padding-left + right: 1.5rem -->
<div class="mt-8">    <!-- margin-top: 2rem -->
<div class="mb-2">    <!-- margin-bottom: 0.5rem -->

<!-- Échelle : 1=0.25rem, 2=0.5rem, 4=1rem, 6=1.5rem, 8=2rem, 12=3rem, 16=4rem -->

Flexbox

<div class="flex items-center justify-between gap-4">
  <span>Logo</span>
  <nav class="flex gap-6">
    <a href="#">Accueil</a>
    <a href="#">Services</a>
  </nav>
</div>

Grid

<!-- Grille responsive de cartes -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white p-6 rounded-lg shadow">Carte 1</div>
  <div class="bg-white p-6 rounded-lg shadow">Carte 2</div>
  <div class="bg-white p-6 rounded-lg shadow">Carte 3</div>
</div>

Typographie

<h1 class="text-3xl font-bold text-gray-900">Titre principal</h1>
<p class="text-base text-gray-600 leading-relaxed">Paragraphe</p>
<span class="text-sm font-medium text-blue-600">Lien</span>

<!-- Tailles : text-xs, text-sm, text-base, text-lg, text-xl, text-2xl... -->

Couleurs

<!-- bg = background, text = couleur du texte, border = bordure -->
<div class="bg-blue-500 text-white">Fond bleu, texte blanc</div>
<div class="bg-gray-100 text-gray-800 border border-gray-300">Gris clair</div>

<!-- Échelle de couleurs : 50 (très clair) → 950 (très foncé) -->
<!-- blue-50, blue-100, blue-200... blue-800, blue-900, blue-950 -->

Responsive design avec les préfixes

<!-- Mobile first : sans préfixe = mobile -->
<div class="text-sm md:text-base lg:text-lg">
  Petit sur mobile, normal sur tablette, grand sur desktop
</div>

<div class="flex flex-col md:flex-row gap-4">
  Colonne sur mobile, ligne sur desktop
</div>

<!-- Breakpoints : sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px) -->

Exemple complet : carte de profil

<div class="max-w-sm mx-auto bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
  <img src="photo.jpg" alt="Photo" class="w-full h-48 object-cover">
  <div class="p-6">
    <h3 class="text-xl font-bold text-gray-900">Mamadou Diallo</h3>
    <p class="text-blue-600 font-medium">Développeur Full Stack</p>
    <p class="mt-3 text-gray-600 text-sm leading-relaxed">
      Passionné par le web et l'open source. Basé à Dakar.
    </p>
    <div class="mt-4 flex gap-3">
      <a href="#" class="flex-1 text-center py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
        Contacter
      </a>
      <a href="#" class="flex-1 text-center py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
        Portfolio
      </a>
    </div>
  </div>
</div>

Hover, focus et états

<button class="bg-blue-600 hover:bg-blue-700 activé:bg-blue-800 
               focus:ring-2 focus:ring-blue-300 focus:outline-none
               disabled:opacity-50 disabled:cursor-not-allowed
               transition-colors px-6 py-3 rounded-lg text-white font-medium">
  Envoyer
</button>

Dark mode

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  Ce texte s'adapté automatiquement au mode sombre du système
</div>

Quand NE PAS utiliser Tailwind

• Projets très petits (une seule page) — le setup ne vaut pas le coup
• Si vous travaillez avec des designers qui livrent du CSS personnalisé
• Si votre équipe n’est pas formée — Tailwind a une courbe d’apprentissage

Exercice

1. Installez Tailwind avec Vite
2. Créez une landing page avec : header + hero section + 3 cartes features + footer
3. Rendez le tout responsive (mobile first)
4. Ajoutez des animations hover sur les cartes et boutons
5. Ajoutez le support du dark mode