Pourquoi Tailwind CSS ?

<!-- Approche classique -->
<button class="btn-primary">Cliquer</button>

<style>
.btn-primary {
  background-color: #3b82f6;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  transition: background-color 0.2s;
}
.btn-primary:hover {
  background-color: #2563eb;
}
</style>

<!-- Approche Tailwind -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg font-semibold
               hover:bg-blue-600 transition-colors">
  Cliquer
</button>

<!-- Pas de fichier CSS séparé ! -->

# Avec Vite (React, Vue, etc.)
npm install tailwindcss @tailwindcss/vite
# Ajoute le plugin dans vite.config.ts

# Avec Next.js (déjà inclus depuis Next 13+)
npx create-next-app@latest  # Tailwind proposé par défaut

# Avec PostCSS (universel)
npm install tailwindcss postcss autoprefixer
npx tailwindcss init

/* globals.css - Tailwind v4 */
@import "tailwindcss";

/* C'est tout ! Tailwind scanne automatiquement tes fichiers
   et génère uniquement les classes que tu utilises. */

/* Tu peux ajouter du CSS custom en dessous */
@layer base {
  body {
    @apply bg-white text-slate-900 antialiased;
  }
}

<!-- Tape "bg-" et l'extension propose : -->
<!-- bg-red-500, bg-blue-600, bg-slate-100... -->
<!-- Avec un aperçu de la couleur ! -->

<div class="bg-|">
  <!--     ↑ L'autocomplétion apparaît ici -->
</div>

<!-- Elle montre aussi le CSS généré au survol :
     "p-4" → padding: 1rem (16px)
     "text-lg" → font-size: 1.125rem; line-height: 1.75rem
-->