# Fichier: python_cheats/cheatsheets/tailwind-css.txt
# Cheatsheet Tailwind CSS - Guide Complet pour Débutants


[OK] INTRODUCTION À TAILWIND CSS

# Qu'est-ce que Tailwind CSS?
# Framework CSS utility-first (orienté utilitaires)
# Au lieu d'écrire du CSS personnalisé, vous utilisez des classes prédéfinies
# Exemple: <div class="bg-blue-500 text-white p-4 rounded">

# Avantages:
# [OK] Développement rapide
# [OK] Pas de nommage de classes CSS
# [OK] Design cohérent avec système de design intégré
# [OK] Responsive design facile
# [OK] Fichier CSS final optimisé (purge des classes non utilisées)
# [OK] Personnalisable à 100%

# Philosophie:
# Traditionnel CSS: .card { background: blue; padding: 1rem; }
# Tailwind CSS: class="bg-blue-500 p-4"


[OK] INSTALLATION

# === 1. VIA CDN (DÉVELOPPEMENT RAPIDE) ===
# Simple mais limité - ne pas utiliser en production!

<!-- Dans votre HTML -->
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <h1 class="text-3xl font-bold text-blue-600">
        Hello Tailwind!
    </h1>
</body>
</html>

# Configuration inline avec CDN
<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    primary: '#3490dc',
                }
            }
        }
    }
</script>


# === 2. VIA CLI (RECOMMANDÉ DÉBUTANTS) ===

# Installation
npm install -D tailwindcss
npx tailwindcss init

# Ou avec Yarn
yarn add -D tailwindcss
yarn tailwindcss init

# Structure créée:
# tailwind.config.js - Configuration Tailwind

# Configuration tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

# Créer src/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;

# Compiler CSS
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

# Utiliser dans HTML
<!DOCTYPE html>
<html>
<head>
    <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-3xl font-bold">Hello!</h1>
</body>
</html>


# === 3. AVEC FRAMEWORKS JS ===

# React (Create React App)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Next.js
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Configuration tailwind.config.js pour Next.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

# Dans globals.css ou index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

# Vue.js
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Vite
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p


# === 4. AVEC PYTHON/DJANGO ===

# Installation
pip install django-tailwind

# settings.py
INSTALLED_APPS = [
    # ...
    'tailwind',
    'theme',  # votre app tailwind
]

# Créer app tailwind
python manage.py tailwind init

# Installer dépendances
python manage.py tailwind install

# Lancer en développement
python manage.py tailwind start

# Build pour production
python manage.py tailwind build


[OK] SYSTÈME DE COULEURS

# Format: {propriété}-{couleur}-{nuance}
# Nuances: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

# === COULEURS PRÉDÉFINIES ===

# Gris (slate, gray, zinc, neutral, stone)
bg-slate-50        # Très clair
bg-slate-100
bg-slate-200
bg-slate-300
bg-slate-400
bg-slate-500       # Moyen
bg-slate-600
bg-slate-700
bg-slate-800
bg-slate-900       # Très foncé
bg-slate-950

# Rouge (red)
bg-red-50          # Rose très pâle
bg-red-100
bg-red-200
bg-red-300
bg-red-400
bg-red-500         # Rouge standard
bg-red-600         # Rouge intense
bg-red-700
bg-red-800
bg-red-900         # Rouge très foncé

# Bleu (blue, sky, cyan, indigo)
bg-blue-500        # Bleu standard
bg-sky-500         # Bleu ciel
bg-cyan-500        # Cyan
bg-indigo-500      # Indigo

# Vert (green, emerald, teal, lime)
bg-green-500       # Vert standard
bg-emerald-500     # Émeraude
bg-teal-500        # Sarcelle
bg-lime-500        # Vert citron

# Jaune/Orange (yellow, amber, orange)
bg-yellow-500      # Jaune
bg-amber-500       # Ambre
bg-orange-500      # Orange

# Rose/Violet (pink, purple, violet, fuchsia)
bg-pink-500        # Rose
bg-purple-500      # Violet
bg-violet-500      # Violet
bg-fuchsia-500     # Fuchsia

# Couleurs spéciales
bg-white           # Blanc
bg-black           # Noir
bg-transparent     # Transparent
bg-current         # Couleur actuelle


# === PROPRIÉTÉS DE COULEUR ===

# Couleur de fond (Background)
bg-blue-500
bg-red-300
bg-gray-100

# Couleur de texte
text-blue-500
text-red-300
text-gray-700

# Couleur de bordure
border-blue-500
border-red-300
border-gray-300

# Couleur de contour (Outline)
outline-blue-500

# Couleur de séparateur (Divide)
divide-gray-200

# Couleur de l'anneau (Ring - focus)
ring-blue-500

# Couleur de placeholder
placeholder-gray-400

# Couleur de l'accent (checkbox, radio)
accent-blue-500


# === EXEMPLES PRATIQUES ===

<!-- Bouton bleu -->
<button class="bg-blue-500 text-white">
    Cliquez-moi
</button>

<!-- Carte avec fond gris clair -->
<div class="bg-gray-100 border-gray-300">
    Contenu
</div>

<!-- Texte d'erreur rouge -->
<p class="text-red-600">Erreur de validation</p>

<!-- Badge vert de succès -->
<span class="bg-green-100 text-green-800">
    Succès
</span>


[OK] TYPOGRAPHIE

# === TAILLE DE POLICE ===

text-xs            # 0.75rem (12px)
text-sm            # 0.875rem (14px)
text-base          # 1rem (16px) - défaut
text-lg            # 1.125rem (18px)
text-xl            # 1.25rem (20px)
text-2xl           # 1.5rem (24px)
text-3xl           # 1.875rem (30px)
text-4xl           # 2.25rem (36px)
text-5xl           # 3rem (48px)
text-6xl           # 3.75rem (60px)
text-7xl           # 4.5rem (72px)
text-8xl           # 6rem (96px)
text-9xl           # 8rem (128px)


# === GRAISSE DE POLICE (Font Weight) ===

font-thin          # 100
font-extralight    # 200
font-light         # 300
font-normal        # 400 - défaut
font-medium        # 500
font-semibold      # 600
font-bold          # 700
font-extrabold     # 800
font-black         # 900


# === FAMILLE DE POLICE ===

font-sans          # Police sans-serif (défaut)
font-serif         # Police serif
font-mono          # Police monospace


# === STYLE DE POLICE ===

italic             # Italique
not-italic         # Pas italique


# === HAUTEUR DE LIGNE (Line Height) ===

leading-none       # 1
leading-tight      # 1.25
leading-snug       # 1.375
leading-normal     # 1.5 - défaut
leading-relaxed    # 1.625
leading-loose      # 2
leading-3          # 0.75rem
leading-4          # 1rem
leading-10         # 2.5rem


# === ALIGNEMENT DE TEXTE ===

text-left          # Aligné à gauche
text-center        # Centré
text-right         # Aligné à droite
text-justify       # Justifié


# === DÉCORATION DE TEXTE ===

underline          # Souligné
overline           # Ligne au-dessus
line-through       # Barré
no-underline       # Pas de décoration


# === TRANSFORMATION DE TEXTE ===

uppercase          # MAJUSCULES
lowercase          # minuscules
capitalize         # Première Lettre Majuscule
normal-case        # Casse normale


# === ESPACEMENT DES LETTRES ===

tracking-tighter   # -0.05em
tracking-tight     # -0.025em
tracking-normal    # 0em - défaut
tracking-wide      # 0.025em
tracking-wider     # 0.05em
tracking-widest    # 0.1em


# === COULEUR DE TEXTE ===

text-gray-900      # Texte gris foncé
text-blue-600      # Texte bleu
text-red-500       # Texte rouge

# Avec opacité
text-blue-500/50   # 50% d'opacité
text-red-600/75    # 75% d'opacité


# === DÉBORDEMENT DE TEXTE ===

truncate           # Coupe avec ...
overflow-ellipsis  # ... à la fin
overflow-clip      # Coupe net

# Nombre de lignes
line-clamp-1       # 1 ligne max
line-clamp-2       # 2 lignes max
line-clamp-3       # 3 lignes max
line-clamp-none    # Pas de limite


# === CÉSURE DE MOT ===

break-normal       # Césure normale
break-words        # Casse les longs mots
break-all          # Casse partout


# === EXEMPLES TYPOGRAPHIE ===

<!-- Titre principal -->
<h1 class="text-4xl font-bold text-gray-900">
    Mon Titre
</h1>

<!-- Sous-titre -->
<h2 class="text-2xl font-semibold text-gray-700">
    Sous-titre
</h2>

<!-- Paragraphe -->
<p class="text-base text-gray-600 leading-relaxed">
    Texte du paragraphe avec bon espacement.
</p>

<!-- Lien -->
<a class="text-blue-600 hover:text-blue-800 underline">
    Cliquez ici
</a>

<!-- Badge -->
<span class="text-xs font-medium uppercase tracking-wide">
    Nouveau
</span>

<!-- Citation -->
<blockquote class="text-lg italic text-gray-700">
    "Citation inspirante"
</blockquote>


[OK] ESPACEMENT (SPACING)

# Format: {type}-{taille}
# Tailles: 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96
# 1 unité = 0.25rem = 4px

# === PADDING (ESPACEMENT INTÉRIEUR) ===

# Tous les côtés
p-0                # 0
p-1                # 0.25rem (4px)
p-2                # 0.5rem (8px)
p-3                # 0.75rem (12px)
p-4                # 1rem (16px)
p-5                # 1.25rem (20px)
p-6                # 1.5rem (24px)
p-8                # 2rem (32px)
p-10               # 2.5rem (40px)
p-12               # 3rem (48px)
p-16               # 4rem (64px)
p-20               # 5rem (80px)
p-24               # 6rem (96px)

# Horizontal (gauche + droite)
px-4               # padding-left et padding-right
px-6
px-8

# Vertical (haut + bas)
py-2               # padding-top et padding-bottom
py-4
py-6

# Côtés individuels
pt-4               # padding-top
pr-4               # padding-right
pb-4               # padding-bottom
pl-4               # padding-left

# Côtés de début/fin (RTL compatible)
ps-4               # padding-inline-start
pe-4               # padding-inline-end


# === MARGIN (ESPACEMENT EXTÉRIEUR) ===

# Tous les côtés
m-0                # 0
m-1                # 0.25rem (4px)
m-2                # 0.5rem (8px)
m-4                # 1rem (16px)
m-6                # 1.5rem (24px)
m-8                # 2rem (32px)
m-auto             # auto (centrage)

# Horizontal
mx-4               # margin-left et margin-right
mx-auto            # Centrer horizontalement
mx-6

# Vertical
my-2               # margin-top et margin-bottom
my-4
my-6

# Côtés individuels
mt-4               # margin-top
mr-4               # margin-right
mb-4               # margin-bottom
ml-4               # margin-left

# Marges négatives
-m-4               # margin négative tous côtés
-mt-4              # margin-top négative
-mx-4              # margin horizontale négative


# === SPACE BETWEEN (ESPACEMENT ENTRE ÉLÉMENTS) ===

# Espace vertical entre enfants
space-y-0          # 0
space-y-1          # 0.25rem entre chaque
space-y-2          # 0.5rem
space-y-4          # 1rem
space-y-6          # 1.5rem
space-y-8          # 2rem

# Espace horizontal entre enfants
space-x-0
space-x-2
space-x-4
space-x-6
space-x-8

# Espace négatif
-space-y-4
-space-x-2


# === EXEMPLES ESPACEMENT ===

<!-- Carte avec padding -->
<div class="p-6">
    Contenu avec 24px de padding
</div>

<!-- Bouton avec padding personnalisé -->
<button class="px-6 py-3">
    Cliquez
</button>

<!-- Liste avec espacement entre items -->
<ul class="space-y-4">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<!-- Centrer un élément -->
<div class="mx-auto max-w-4xl">
    Contenu centré
</div>

<!-- Éléments horizontaux espacés -->
<div class="flex space-x-4">
    <button>Bouton 1</button>
    <button>Bouton 2</button>
</div>


[OK] DIMENSIONNEMENT (SIZING)

# === LARGEUR (WIDTH) ===

# Largeurs fixes
w-0                # 0
w-1                # 0.25rem (4px)
w-2                # 0.5rem (8px)
w-4                # 1rem (16px)
w-6                # 1.5rem (24px)
w-8                # 2rem (32px)
w-10               # 2.5rem (40px)
w-12               # 3rem (48px)
w-16               # 4rem (64px)
w-20               # 5rem (80px)
w-24               # 6rem (96px)
w-32               # 8rem (128px)
w-48               # 12rem (192px)
w-64               # 16rem (256px)
w-96               # 24rem (384px)

# Largeurs en fractions
w-1/2              # 50%
w-1/3              # 33.333%
w-2/3              # 66.666%
w-1/4              # 25%
w-3/4              # 75%
w-1/5              # 20%
w-2/5              # 40%
w-3/5              # 60%
w-4/5              # 80%
w-1/6              # 16.666%
w-5/6              # 83.333%

# Largeurs spéciales
w-auto             # auto
w-full             # 100%
w-screen           # 100vw
w-min              # min-content
w-max              # max-content
w-fit              # fit-content


# === LARGEUR MINIMALE ===

min-w-0            # 0
min-w-full         # 100%
min-w-min          # min-content
min-w-max          # max-content
min-w-fit          # fit-content


# === LARGEUR MAXIMALE ===

max-w-0            # 0
max-w-xs           # 20rem (320px)
max-w-sm           # 24rem (384px)
max-w-md           # 28rem (448px)
max-w-lg           # 32rem (512px)
max-w-xl           # 36rem (576px)
max-w-2xl          # 42rem (672px)
max-w-3xl          # 48rem (768px)
max-w-4xl          # 56rem (896px)
max-w-5xl          # 64rem (1024px)
max-w-6xl          # 72rem (1152px)
max-w-7xl          # 80rem (1280px)
max-w-full         # 100%
max-w-screen-sm    # 640px
max-w-screen-md    # 768px
max-w-screen-lg    # 1024px
max-w-screen-xl    # 1280px
max-w-screen-2xl   # 1536px


# === HAUTEUR (HEIGHT) ===

# Hauteurs fixes
h-0                # 0
h-1                # 0.25rem (4px)
h-4                # 1rem (16px)
h-8                # 2rem (32px)
h-12               # 3rem (48px)
h-16               # 4rem (64px)
h-24               # 6rem (96px)
h-32               # 8rem (128px)
h-48               # 12rem (192px)
h-64               # 16rem (256px)
h-96               # 24rem (384px)

# Hauteurs en fractions
h-1/2              # 50%
h-1/3              # 33.333%
h-2/3              # 66.666%
h-1/4              # 25%
h-3/4              # 75%
h-full             # 100%

# Hauteurs spéciales
h-auto             # auto
h-screen           # 100vh
h-min              # min-content
h-max              # max-content
h-fit              # fit-content


# === HAUTEUR MINIMALE ===

min-h-0            # 0
min-h-full         # 100%
min-h-screen       # 100vh


# === HAUTEUR MAXIMALE ===

max-h-0            # 0
max-h-full         # 100%
max-h-screen       # 100vh
max-h-min          # min-content
max-h-max          # max-content
max-h-fit          # fit-content


# === TAILLE (CARRÉ) ===

size-0             # width et height à 0
size-4             # 1rem (16px) × 16px
size-6             # 1.5rem (24px) × 24px
size-8             # 2rem (32px) × 32px
size-12            # 3rem (48px) × 48px
size-16            # 4rem (64px) × 64px
size-full          # 100% × 100%


# === EXEMPLES DIMENSIONNEMENT ===

<!-- Conteneur de largeur fixe -->
<div class="w-64 h-32">
    Boîte 256px × 128px
</div>

<!-- Conteneur responsive centré -->
<div class="max-w-4xl mx-auto">
    Contenu avec largeur max
</div>

<!-- Image carrée -->
<img class="size-32" src="image.jpg">

<!-- Colonne 1/3 de largeur -->
<div class="w-1/3">
    Une colonne
</div>

<!-- Pleine hauteur viewport -->
<div class="h-screen">
    Pleine hauteur
</div>

<!-- Avatar circulaire -->
<img class="size-12 rounded-full" src="avatar.jpg">


[OK] FLEXBOX

# === CONTENEUR FLEX ===

flex               # display: flex
inline-flex        # display: inline-flex


# === DIRECTION ===

flex-row           # Horizontal (défaut)
flex-row-reverse   # Horizontal inversé
flex-col           # Vertical
flex-col-reverse   # Vertical inversé


# === WRAP ===

flex-wrap          # Autorise retour à la ligne
flex-wrap-reverse  # Retour à la ligne inversé
flex-nowrap        # Pas de retour à la ligne (défaut)


# === JUSTIFICATION (AXE PRINCIPAL) ===

justify-start      # Aligné au début (défaut)
justify-end        # Aligné à la fin
justify-center     # Centré
justify-between    # Espace entre éléments
justify-around     # Espace autour éléments
justify-evenly     # Espace égal partout


# === ALIGNEMENT (AXE CROISÉ) ===

items-start        # Haut (si row) / Gauche (si col)
items-end          # Bas / Droite
items-center       # Centre
items-baseline     # Ligne de base
items-stretch      # Étirement (défaut)


# === ALIGNEMENT DU CONTENU ===

content-start      # Début
content-end        # Fin
content-center     # Centre
content-between    # Espace entre
content-around     # Espace autour
content-evenly     # Espace égal


# === ALIGNEMENT INDIVIDUEL ===

self-auto          # Auto (défaut)
self-start         # Début
self-end           # Fin
self-center        # Centre
self-stretch       # Étirement
self-baseline      # Ligne de base


# === FLEX GROW / SHRINK ===

# Flex grow (capacité à grandir)
flex-1             # flex: 1 1 0%
flex-auto          # flex: 1 1 auto
flex-initial       # flex: 0 1 auto (défaut)
flex-none          # flex: none

# Grow spécifique
grow               # flex-grow: 1
grow-0             # flex-grow: 0

# Shrink spécifique
shrink             # flex-shrink: 1
shrink-0           # flex-shrink: 0


# === BASIS ===

basis-0            # flex-basis: 0
basis-auto         # flex-basis: auto
basis-1/2          # flex-basis: 50%
basis-1/3          # flex-basis: 33.333%
basis-full         # flex-basis: 100%


# === GAP (ESPACEMENT ENTRE ÉLÉMENTS) ===

gap-0              # 0
gap-1              # 0.25rem (4px)
gap-2              # 0.5rem (8px)
gap-4              # 1rem (16px)
gap-6              # 1.5rem (24px)
gap-8              # 2rem (32px)

# Gap horizontal uniquement
gap-x-4

# Gap vertical uniquement
gap-y-4


# === ORDRE ===

order-1            # order: 1
order-2            # order: 2
order-first        # order: -9999
order-last         # order: 9999
order-none         # order: 0


# === EXEMPLES FLEXBOX ===

<!-- Ligne horizontale centrée -->
<div class="flex justify-center items-center">
    <span>Centré</span>
</div>

<!-- Barre de navigation -->
<nav class="flex justify-between items-center p-4">
    <div>Logo</div>
    <div class="flex gap-4">
        <a>Accueil</a>
        <a>À propos</a>
        <a>Contact</a>
    </div>
</nav>

<!-- Cards en grille responsive -->
<div class="flex flex-wrap gap-4">
    <div class="flex-1 min-w-64">Card 1</div>
    <div class="flex-1 min-w-64">Card 2</div>
    <div class="flex-1 min-w-64">Card 3</div>
</div>

<!-- Colonne verticale espacée -->
<div class="flex flex-col gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<!-- Footer avec espace entre -->
<footer class="flex justify-between items-center">
    <p>© 2024</p>
    <div class="flex gap-4">
        <a>Twitter</a>
        <a>Facebook</a>
    </div>
</footer>

<!-- Centrage parfait -->
<div class="flex items-center justify-center h-screen">
    <div>Parfaitement centré</div>
</div>


[OK] GRID

# === CONTENEUR GRID ===

grid               # display: grid
inline-grid        # display: inline-grid


# === COLONNES ===

# Nombre de colonnes
grid-cols-1        # 1 colonne
grid-cols-2        # 2 colonnes
grid-cols-3        # 3 colonnes
grid-cols-4        # 4 colonnes
grid-cols-5        # 5 colonnes
grid-cols-6        # 6 colonnes
grid-cols-7        # 7 colonnes
grid-cols-8        # 8 colonnes
grid-cols-9        # 9 colonnes
grid-cols-10       # 10 colonnes
grid-cols-11       # 11 colonnes
grid-cols-12       # 12 colonnes
grid-cols-none     # Pas de colonnes


# === LIGNES ===

grid-rows-1        # 1 ligne
grid-rows-2        # 2 lignes
grid-rows-3        # 3 lignes
grid-rows-4        # 4 lignes
grid-rows-5        # 5 lignes
grid-rows-6        # 6 lignes
grid-rows-none     # Pas de lignes


# === SPAN DE COLONNES (ÉLÉMENT) ===

col-auto           # auto
col-span-1         # S'étend sur 1 colonne
col-span-2         # S'étend sur 2 colonnes
col-span-3         # S'étend sur 3 colonnes
col-span-4         # S'étend sur 4 colonnes
col-span-6         # S'étend sur 6 colonnes
col-span-12        # S'étend sur 12 colonnes
col-span-full      # S'étend sur toutes colonnes

# Position de début
col-start-1        # Commence à la colonne 1
col-start-2        # Commence à la colonne 2
col-start-auto     # Auto

# Position de fin
col-end-1          # Termine à la colonne 1
col-end-auto       # Auto


# === SPAN DE LIGNES (ÉLÉMENT) ===

row-auto           # auto
row-span-1         # S'étend sur 1 ligne
row-span-2         # S'étend sur 2 lignes
row-span-3         # S'étend sur 3 lignes
row-span-full      # S'étend sur toutes lignes

# Position
row-start-1
row-end-1


# === GAP ===

gap-0              # 0
gap-2              # 0.5rem
gap-4              # 1rem
gap-6              # 1.5rem
gap-8              # 2rem

gap-x-4            # Gap horizontal
gap-y-4            # Gap vertical


# === AUTO FLOW ===

grid-flow-row      # Remplissage par ligne
grid-flow-col      # Remplissage par colonne
grid-flow-dense    # Remplissage dense


# === ALIGNEMENT ===

# Justification (horizontal)
justify-items-start
justify-items-end
justify-items-center
justify-items-stretch

# Alignement (vertical)
items-start
items-end
items-center
items-stretch

# Contenu
justify-content-start
justify-content-end
justify-content-center
justify-content-between
justify-content-around
justify-content-evenly

content-start
content-end
content-center
content-between
content-around
content-evenly

# Alignement individuel
justify-self-auto
justify-self-start
justify-self-end
justify-self-center
justify-self-stretch

self-auto
self-start
self-end
self-center
self-stretch


# === EXEMPLES GRID ===

<!-- Grille simple 3 colonnes -->
<div class="grid grid-cols-3 gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<!-- Grille responsive -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
</div>

<!-- Élément qui s'étend sur 2 colonnes -->
<div class="grid grid-cols-4 gap-4">
    <div class="col-span-2">Large</div>
    <div>Normal</div>
    <div>Normal</div>
</div>

<!-- Layout type dashboard -->
<div class="grid grid-cols-12 gap-4">
    <div class="col-span-3">Sidebar</div>
    <div class="col-span-9">Contenu principal</div>
</div>

<!-- Grille avec gap différent -->
<div class="grid grid-cols-3 gap-x-8 gap-y-4">
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
</div>


[OK] POSITIONNEMENT

# === POSITION ===

static             # position: static (défaut)
fixed              # position: fixed
absolute           # position: absolute
relative           # position: relative
sticky             # position: sticky


# === PLACEMENT (TOP/RIGHT/BOTTOM/LEFT) ===

# Haut
top-0              # top: 0
top-1              # top: 0.25rem
top-2              # top: 0.5rem
top-4              # top: 1rem
top-auto           # top: auto
top-1/2            # top: 50%
top-full           # top: 100%

# Droite
right-0
right-4
right-auto
right-1/2
right-full

# Bas
bottom-0
bottom-4
bottom-auto
bottom-1/2
bottom-full

# Gauche
left-0
left-4
left-auto
left-1/2
left-full

# Inset (tous les côtés)
inset-0            # top, right, bottom, left: 0
inset-4            # Tous à 1rem
inset-auto         # Tous à auto
inset-1/2          # Tous à 50%

# Inset horizontal/vertical
inset-x-0          # left et right
inset-y-0          # top et bottom


# === Z-INDEX ===

z-0                # z-index: 0
z-10               # z-index: 10
z-20               # z-index: 20
z-30               # z-index: 30
z-40               # z-index: 40
z-50               # z-index: 50
z-auto             # z-index: auto


# === EXEMPLES POSITIONNEMENT ===

<!-- Badge positionné -->
<div class="relative">
    <img src="avatar.jpg">
    <span class="absolute top-0 right-0 bg-red-500">
        3
    </span>
</div>

<!-- Modal centré -->
<div class="fixed inset-0 flex items-center justify-center">
    <div class="bg-white p-8">
        Contenu modal
    </div>
</div>

<!-- Header sticky -->
<header class="sticky top-0 bg-white z-50">
    Navigation
</header>

<!-- Overlay -->
<div class="fixed inset-0 bg-black/50 z-40">
</div>

<!-- Badge absolu -->
<button class="relative">
    Messages
    <span class="absolute -top-2 -right-2 bg-red-500 text-white size-5 rounded-full text-xs flex items-center justify-center">
        9
    </span>
</button>


[OK] BORDURES

# === LARGEUR DE BORDURE ===

border             # 1px tous côtés
border-0           # 0
border-2           # 2px
border-4           # 4px
border-8           # 8px

# Côtés individuels
border-t           # top
border-r           # right
border-b           # bottom
border-l           # left

border-t-2         # top 2px
border-x-4         # horizontal 4px
border-y-2         # vertical 2px


# === COULEUR DE BORDURE ===

border-gray-300
border-blue-500
border-red-600

# Avec opacité
border-blue-500/50


# === STYLE DE BORDURE ===

border-solid       # Solide (défaut)
border-dashed      # Tirets
border-dotted      # Points
border-double      # Double
border-none        # Aucune


# === RAYON DE BORDURE (BORDER RADIUS) ===

rounded-none       # 0
rounded-sm         # 0.125rem (2px)
rounded            # 0.25rem (4px)
rounded-md         # 0.375rem (6px)
rounded-lg         # 0.5rem (8px)
rounded-xl         # 0.75rem (12px)
rounded-2xl        # 1rem (16px)
rounded-3xl        # 1.5rem (24px)
rounded-full       # 9999px (cercle parfait)

# Coins individuels
rounded-t          # top
rounded-r          # right
rounded-b          # bottom
rounded-l          # left
rounded-tl         # top-left
rounded-tr         # top-right
rounded-br         # bottom-right
rounded-bl         # bottom-left

rounded-t-lg       # top large
rounded-bl-xl      # bottom-left extra large


# === OUTLINE ===

outline-none       # Pas de contour
outline            # Contour 2px
outline-dashed     # Contour tirets
outline-dotted     # Contour points

# Couleur
outline-blue-500
outline-red-600

# Offset
outline-offset-0
outline-offset-1
outline-offset-2
outline-offset-4


# === RING (FOCUS STATES) ===

ring               # ring 3px
ring-0             # Pas de ring
ring-1             # 1px
ring-2             # 2px
ring-4             # 4px
ring-8             # 8px

# Couleur
ring-blue-500
ring-red-600

# Avec opacité
ring-blue-500/50

# Offset
ring-offset-0
ring-offset-1
ring-offset-2
ring-offset-4

# Offset color
ring-offset-white
ring-offset-black


# === DIVIDE (BORDURES ENTRE ENFANTS) ===

# Vertical (entre lignes)
divide-y           # 1px
divide-y-0         # 0
divide-y-2         # 2px
divide-y-4         # 4px
divide-y-8         # 8px

# Horizontal (entre colonnes)
divide-x
divide-x-2
divide-x-4

# Couleur
divide-gray-200
divide-blue-500

# Style
divide-solid
divide-dashed
divide-dotted


# === EXEMPLES BORDURES ===

<!-- Carte avec bordure -->
<div class="border border-gray-300 rounded-lg p-6">
    Contenu
</div>

<!-- Bouton avec bordure colorée -->
<button class="border-2 border-blue-500 text-blue-500 px-4 py-2 rounded">
    Cliquez
</button>

<!-- Avatar circulaire -->
<img class="size-16 rounded-full border-4 border-white" src="avatar.jpg">

<!-- Input avec focus ring -->
<input class="
    border border-gray-300 rounded px-4 py-2
    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
    disabled:bg-gray-100 disabled:cursor-not-allowed
" type="text">

<!-- Card avec hover effect groupe -->
<div class="group hover:shadow-lg transition-shadow">
    <img class="group-hover:scale-105 transition-transform">
    <h3 class="group-hover:text-blue-500">Titre</h3>
</div>

<!-- Checkbox personnalisé avec peer -->
<label class="flex items-center gap-2">
    <input type="checkbox" class="peer sr-only">
    <div class="size-5 border-2 rounded peer-checked:bg-blue-500 peer-checked:border-blue-500"></div>
    <span class="peer-checked:font-bold">Option</span>
</label>

<!-- Liste avec alternance de couleurs -->
<ul>
    <li class="odd:bg-gray-100 even:bg-white p-4">Item 1</li>
    <li class="odd:bg-gray-100 even:bg-white p-4">Item 2</li>
    <li class="odd:bg-gray-100 even:bg-white p-4">Item 3</li>
</ul>


[OK] AFFICHAGE (DISPLAY)

# === DISPLAY ===

block              # display: block
inline-block       # display: inline-block
inline             # display: inline
flex               # display: flex
inline-flex        # display: inline-flex
grid               # display: grid
inline-grid        # display: inline-grid
table              # display: table
inline-table       # display: inline-table
table-row          # display: table-row
table-cell         # display: table-cell
hidden             # display: none


# === VISIBILITÉ ===

visible            # visibility: visible
invisible          # visibility: hidden (garde l'espace)
collapse           # visibility: collapse


# === OVERFLOW ===

# Tous côtés
overflow-auto      # Auto scroll
overflow-hidden    # Cache overflow
overflow-clip      # Clip strict
overflow-visible   # Visible (défaut)
overflow-scroll    # Toujours scroll

# Horizontal
overflow-x-auto
overflow-x-hidden
overflow-x-scroll

# Vertical
overflow-y-auto
overflow-y-hidden
overflow-y-scroll


# === EXEMPLES AFFICHAGE ===

<!-- Masquer élément -->
<div class="hidden">
    Invisible
</div>

<!-- Responsive visibility -->
<div class="hidden lg:block">
    Visible sur grands écrans uniquement
</div>

<!-- Conteneur scrollable -->
<div class="h-64 overflow-y-auto">
    Contenu long qui scroll...
</div>

<!-- Cache overflow d'image -->
<div class="overflow-hidden rounded-lg">
    <img class="hover:scale-110 transition-transform">
</div>


[OK] TABLEAUX

# === TABLE LAYOUT ===

table-auto         # Largeur auto (défaut)
table-fixed        # Largeur fixe


# === BORDER COLLAPSE ===

border-collapse    # Bordures fusionnées
border-separate    # Bordures séparées


# === BORDER SPACING ===

border-spacing-0   # 0
border-spacing-1   # 0.25rem
border-spacing-2   # 0.5rem


# === CAPTION SIDE ===

caption-top        # Légende en haut
caption-bottom     # Légende en bas


# === EXEMPLES TABLEAUX ===

<!-- Tableau stylé -->
<table class="w-full border-collapse">
    <thead class="bg-gray-100">
        <tr>
            <th class="border border-gray-300 px-4 py-2 text-left">Nom</th>
            <th class="border border-gray-300 px-4 py-2 text-left">Email</th>
        </tr>
    </thead>
    <tbody>
        <tr class="hover:bg-gray-50">
            <td class="border border-gray-300 px-4 py-2">Jean</td>
            <td class="border border-gray-300 px-4 py-2">jean@email.com</td>
        </tr>
    </tbody>
</table>

<!-- Tableau moderne sans bordures -->
<table class="w-full">
    <thead class="border-b-2 border-gray-200">
        <tr>
            <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Produit</th>
            <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Prix</th>
        </tr>
    </thead>
    <tbody class="divide-y divide-gray-200">
        <tr class="hover:bg-gray-50 transition-colors">
            <td class="px-4 py-3">Produit 1</td>
            <td class="px-4 py-3">29.99€</td>
        </tr>
    </tbody>
</table>


[OK] FORMULAIRES

# === APPEARANCE ===

appearance-none    # Supprime style navigateur
appearance-auto    # Style navigateur (défaut)


# === ACCENT COLOR ===

accent-blue-500
accent-green-500
accent-red-500


# === CARET COLOR ===

caret-blue-500
caret-red-500
caret-transparent


# === EXEMPLES FORMULAIRES ===

<!-- Input texte stylé -->
<input 
    type="text"
    class="w-full px-4 py-2 border border-gray-300 rounded-lg 
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
           placeholder:text-gray-400"
    placeholder="Entrez votre nom"
>

<!-- Textarea -->
<textarea 
    class="w-full px-4 py-2 border border-gray-300 rounded-lg resize-none
           focus:outline-none focus:ring-2 focus:ring-blue-500"
    rows="4"
    placeholder="Votre message"
></textarea>

<!-- Select personnalisé -->
<select class="w-full px-4 py-2 border border-gray-300 rounded-lg 
               focus:outline-none focus:ring-2 focus:ring-blue-500
               appearance-none bg-white cursor-pointer">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

<!-- Checkbox personnalisé -->
<label class="flex items-center gap-2 cursor-pointer">
    <input 
        type="checkbox" 
        class="size-5 text-blue-500 border-gray-300 rounded 
               focus:ring-2 focus:ring-blue-500 cursor-pointer"
    >
    <span>J'accepte les conditions</span>
</label>

<!-- Radio personnalisé -->
<label class="flex items-center gap-2 cursor-pointer">
    <input 
        type="radio" 
        name="option"
        class="size-5 text-blue-500 border-gray-300 
               focus:ring-2 focus:ring-blue-500 cursor-pointer"
    >
    <span>Option A</span>
</label>

<!-- Toggle switch (checkbox stylé) -->
<label class="relative inline-flex items-center cursor-pointer">
    <input type="checkbox" class="sr-only peer">
    <div class="w-11 h-6 bg-gray-200 rounded-full peer 
                peer-checked:bg-blue-500 peer-focus:ring-2 
                peer-focus:ring-blue-300 transition-colors">
        <div class="absolute left-1 top-1 bg-white size-4 rounded-full 
                    transition-transform peer-checked:translate-x-5"></div>
    </div>
    <span class="ml-3">Mode sombre</span>
</label>

<!-- Input avec icône -->
<div class="relative">
    <input 
        type="text" 
        class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg 
               focus:outline-none focus:ring-2 focus:ring-blue-500"
        placeholder="Rechercher..."
    >
    <svg class="absolute left-3 top-1/2 -translate-y-1/2 size-5 text-gray-400">
        <!-- Icône de recherche -->
    </svg>
</div>

<!-- Formulaire complet -->
<form class="space-y-4 max-w-md">
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">
            Nom complet
        </label>
        <input 
            type="text"
            class="w-full px-4 py-2 border border-gray-300 rounded-lg 
                   focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        >
    </div>
    
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">
            Email
        </label>
        <input 
            type="email"
            class="w-full px-4 py-2 border border-gray-300 rounded-lg 
                   focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        >
    </div>
    
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">
            Message
        </label>
        <textarea 
            class="w-full px-4 py-2 border border-gray-300 rounded-lg 
                   focus:ring-2 focus:ring-blue-500"
            rows="4"
        ></textarea>
    </div>
    
    <button 
        type="submit"
        class="w-full bg-blue-500 text-white px-6 py-3 rounded-lg
               hover:bg-blue-600 active:bg-blue-700
               focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
               transition-colors"
    >
        Envoyer
    </button>
</form>


[OK] ASPECT RATIO

aspect-auto        # Auto
aspect-square      # 1:1 (carré)
aspect-video       # 16:9 (vidéo)

# Personnalisé dans config
aspect-[4/3]       # 4:3
aspect-[21/9]      # 21:9


# === EXEMPLES ASPECT RATIO ===

<!-- Video responsive 16:9 -->
<div class="aspect-video w-full">
    <iframe class="w-full h-full" src="video.mp4"></iframe>
</div>

<!-- Image carrée -->
<img class="aspect-square object-cover" src="image.jpg">


[OK] OBJECT FIT & POSITION

# === OBJECT FIT ===

object-contain     # Contient l'image
object-cover       # Couvre tout (crop)
object-fill        # Remplit (déforme)
object-none        # Taille originale
object-scale-down  # Réduit si nécessaire


# === OBJECT POSITION ===

object-bottom
object-center      # Centre (défaut)
object-left
object-left-bottom
object-left-top
object-right
object-right-bottom
object-right-top
object-top


# === EXEMPLES OBJECT ===

<!-- Image de profil circulaire -->
<img class="size-32 rounded-full object-cover" src="avatar.jpg">

<!-- Bannière couvrant toute la hauteur -->
<div class="h-96">
    <img class="w-full h-full object-cover object-center" src="banner.jpg">
</div>

<!-- Thumbnail carré -->
<div class="size-48 bg-gray-200 rounded overflow-hidden">
    <img class="w-full h-full object-cover" src="product.jpg">
</div>


[OK] COLONNES (CSS COLUMNS)

# === NOMBRE DE COLONNES ===

columns-1          # 1 colonne
columns-2          # 2 colonnes
columns-3          # 3 colonnes
columns-4          # 4 colonnes
columns-auto       # Auto


# === LARGEUR DE COLONNE ===

columns-3xs        # 16rem
columns-2xs        # 18rem
columns-xs         # 20rem
columns-sm         # 24rem
columns-md         # 28rem
columns-lg         # 32rem
columns-xl         # 36rem


# === BREAK INSIDE ===

break-inside-auto  # Auto
break-inside-avoid # Évite la cassure
break-inside-avoid-page
break-inside-avoid-column


# === EXEMPLES COLONNES ===

<!-- Texte en 3 colonnes -->
<div class="columns-3 gap-8">
    <p>Long texte qui se répartit automatiquement sur 3 colonnes...</p>
</div>

<!-- Colonnes responsive -->
<div class="columns-1 md:columns-2 lg:columns-3 gap-6">
    <div class="break-inside-avoid mb-6">
        <img src="image1.jpg" class="w-full rounded">
        <p>Description</p>
    </div>
    <!-- Plus d'items -->
</div>


[OK] BREAK (CASSURE DE PAGE/COLONNE)

# === BREAK AFTER ===

break-after-auto
break-after-avoid
break-after-all
break-after-avoid-page
break-after-page
break-after-left
break-after-right
break-after-column


# === BREAK BEFORE ===

break-before-auto
break-before-avoid
break-before-all
break-before-avoid-page
break-before-page
break-before-left
break-before-right
break-before-column


# === BOX DECORATION BREAK ===

box-decoration-clone   # Clone la décoration
box-decoration-slice   # Coupe la décoration


[OK] ISOLATION

isolate            # isolation: isolate
isolation-auto     # isolation: auto


[OK] COMPOSANTS COURANTS

# === BOUTONS ===

<!-- Bouton primaire -->
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold px-6 py-3 rounded-lg transition-colors">
    Bouton Primaire
</button>

<!-- Bouton secondaire -->
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold px-6 py-3 rounded-lg transition-colors">
    Bouton Secondaire
</button>

<!-- Bouton outline -->
<button class="border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white font-semibold px-6 py-3 rounded-lg transition-colors">
    Bouton Outline
</button>

<!-- Bouton danger -->
<button class="bg-red-500 hover:bg-red-600 text-white font-semibold px-6 py-3 rounded-lg transition-colors">
    Supprimer
</button>

<!-- Bouton avec icône -->
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold px-6 py-3 rounded-lg flex items-center gap-2 transition-colors">
    <svg class="size-5"><!-- Icône --></svg>
    Télécharger
</button>

<!-- Bouton loading -->
<button class="bg-blue-500 text-white px-6 py-3 rounded-lg flex items-center gap-2" disabled>
    <svg class="animate-spin size-5" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    Chargement...
</button>


# === CARTES (CARDS) ===

<!-- Carte simple -->
<div class="bg-white rounded-lg shadow-md p-6">
    <h3 class="text-xl font-bold mb-2">Titre de la carte</h3>
    <p class="text-gray-600">Description de la carte...</p>
</div>

<!-- Carte avec image -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="image.jpg" class="w-full h-48 object-cover">
    <div class="p-6">
        <h3 class="text-xl font-bold mb-2">Titre</h3>
        <p class="text-gray-600 mb-4">Description...</p>
        <button class="bg-blue-500 text-white px-4 py-2 rounded">En savoir plus</button>
    </div>
</div>

<!-- Carte avec hover effect -->
<div class="bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow p-6 cursor-pointer">
    <h3 class="text-xl font-bold mb-2">Carte Interactive</h3>
    <p class="text-gray-600">Survolez-moi...</p>
</div>


# === BADGES ===

<!-- Badge simple -->
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">
    Nouveau
</span>

<!-- Badge avec dot -->
<span class="inline-flex items-center gap-1 bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">
    <span class="size-2 bg-green-500 rounded-full"></span>
    Actif
</span>

<!-- Badge pill -->
<span class="bg-purple-100 text-purple-800 text-xs font-semibold px-3 py-1 rounded-full">
    Premium
</span>


# === ALERTS ===

<!-- Alert info -->
<div class="bg-blue-50 border-l-4 border-blue-500 p-4">
    <div class="flex items-center gap-3">
        <svg class="size-5 text-blue-500"><!-- Icône --></svg>
        <p class="text-blue-700">Information importante</p>
    </div>
</div>

<!-- Alert success -->
<div class="bg-green-50 border border-green-200 rounded-lg p-4">
    <div class="flex items-start gap-3">
        <svg class="size-5 text-green-500 mt-0.5"><!-- Icône --></svg>
        <div class="flex-1">
            <h4 class="font-semibold text-green-800">Succès!</h4>
            <p class="text-sm text-green-700">Votre action a été effectuée.</p>
        </div>
        <button class="text-green-500 hover:text-green-700">
            <svg class="size-5"><!-- X --></svg>
        </button>
    </div>
</div>

<!-- Alert danger -->
<div class="bg-red-50 border border-red-200 rounded-lg p-4">
    <p class="text-red-700 font-medium">Erreur: Quelque chose s'est mal passé.</p>
</div>


# === MODALS ===

<!-- Modal (backdrop) -->
<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
    <!-- Modal content -->
    <div class="bg-white rounded-lg p-8 max-w-md w-full mx-4 shadow-xl">
        <h2 class="text-2xl font-bold mb-4">Titre du Modal</h2>
        <p class="text-gray-600 mb-6">Contenu du modal...</p>
        <div class="flex justify-end gap-3">
            <button class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded">
                Annuler
            </button>
            <button class="px-4 py-2 bg-blue-500 text-white hover:bg-blue-600 rounded">
                Confirmer
            </button>
        </div>
    </div>
</div>


# === NAVIGATION ===

<!-- Navbar -->
<nav class="bg-white shadow-md">
    <div class="container mx-auto px-4">
        <div class="flex justify-between items-center h-16">
            <div class="font-bold text-xl">Logo</div>
            <div class="hidden md:flex space-x-8">
                <a href="#" class="text-gray-700 hover:text-blue-500">Accueil</a>
                <a href="#" class="text-gray-700 hover:text-blue-500">À propos</a>
                <a href="#" class="text-gray-700 hover:text-blue-500">Services</a>
                <a href="#" class="text-gray-700 hover:text-blue-500">Contact</a>
            </div>
            <button class="md:hidden">
                <svg class="size-6"><!-- Menu icon --></svg>
            </button>
        </div>
    </div>
</nav>

<!-- Breadcrumb -->
<nav class="flex" aria-label="Breadcrumb">
    <ol class="flex items-center space-x-2">
        <li><a href="#" class="text-blue-500 hover:underline">Accueil</a></li>
        <li><span class="text-gray-400">/</span></li>
        <li><a href="#" class="text-blue-500 hover:underline">Catégorie</a></li>
        <li><span class="text-gray-400">/</span></li>
        <li class="text-gray-600">Page actuelle</li>
    </ol>
</nav>

<!-- Tabs -->
<div class="border-b border-gray-200">
    <nav class="flex space-x-8">
        <a href="#" class="border-b-2 border-blue-500 text-blue-600 py-4 px-1 font-medium">
            Onglet 1
        </a>
        <a href="#" class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 py-4 px-1">
            Onglet 2
        </a>
        <a href="#" class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 py-4 px-1">
            Onglet 3
        </a>
    </nav>
</div>


# === PAGINATION ===

<nav class="flex items-center justify-center gap-2">
    <button class="px-3 py-2 rounded hover:bg-gray-100 disabled:opacity-50" disabled>
        Précédent
    </button>
    <button class="px-3 py-2 bg-blue-500 text-white rounded">1</button>
    <button class="px-3 py-2 hover:bg-gray-100 rounded">2</button>
    <button class="px-3 py-2 hover:bg-gray-100 rounded">3</button>
    <span class="px-3 py-2">...</span>
    <button class="px-3 py-2 hover:bg-gray-100 rounded">10</button>
    <button class="px-3 py-2 rounded hover:bg-gray-100">
        Suivant
    </button>
</nav>


# === DROPDOWN ===

<div class="relative inline-block">
    <button class="bg-white border border-gray-300 rounded px-4 py-2 flex items-center gap-2">
        Options
        <svg class="size-4"><!-- Chevron down --></svg>
    </button>
    <!-- Dropdown menu (hidden by default) -->
    <div class="absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded shadow-lg min-w-48 z-10">
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Option 1</a>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Option 2</a>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Option 3</a>
    </div>
</div>


# === TOOLTIPS ===

<div class="relative group inline-block">
    <button class="bg-blue-500 text-white px-4 py-2 rounded">
        Survolez-moi
    </button>
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-sm rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
        Ceci est un tooltip
        <div class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
    </div>
</div>


# === PROGRESS BARS ===

<!-- Simple progress bar -->
<div class="w-full bg-gray-200 rounded-full h-2">
    <div class="bg-blue-500 h-2 rounded-full" style="width: 60%"></div>
</div>

<!-- Progress avec label -->
<div class="w-full">
    <div class="flex justify-between mb-1">
        <span class="text-sm font-medium">Progression</span>
        <span class="text-sm font-medium">75%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-3">
        <div class="bg-green-500 h-3 rounded-full transition-all" style="width: 75%"></div>
    </div>
</div>


# === SKELETON LOADERS ===

<div class="animate-pulse space-y-4">
    <div class="h-4 bg-gray-200 rounded w-3/4"></div>
    <div class="h-4 bg-gray-200 rounded w-1/2"></div>
    <div class="h-32 bg-gray-200 rounded"></div>
</div>


[OK] DARK MODE

# === CONFIGURATION ===

# Dans tailwind.config.js
module.exports = {
  darkMode: 'class', // ou 'media'
  // ...
}

# Mode 'class': ajoutez 'dark' au parent (HTML ou body)
# Mode 'media': utilise préférence système automatiquement


# === UTILISATION ===

# Format: dark:{classe}

dark:bg-gray-900
dark:text-white
dark:border-gray-700


# === EXEMPLES DARK MODE ===

<!-- Carte avec dark mode -->
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
    <h3 class="text-gray-900 dark:text-white font-bold">
        Titre
    </h3>
    <p class="text-gray-600 dark:text-gray-300">
        Description
    </p>
</div>

<!-- Bouton avec dark mode -->
<button class="bg-blue-500 dark:bg-blue-600 text-white px-6 py-3 rounded">
    Bouton
</button>

<!-- Toggle dark mode (JavaScript requis) -->
<button 
    onclick="document.documentElement.classList.toggle('dark')"
    class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700"
>
    <svg class="size-6 text-gray-800 dark:text-gray-200">
        <!-- Icône soleil/lune -->
    </svg>
</button>

<!-- Layout complet dark mode -->
<html class="dark">
<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
    <nav class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
        <!-- Navigation -->
    </nav>
    <main class="container mx-auto p-4">
        <!-- Contenu -->
    </main>
</body>
</html>


[OK] PERSONNALISATION

# === DANS tailwind.config.js ===

module.exports = {
  theme: {
    // Remplacer complètement
    colors: {
      primary: '#3490dc',
      secondary: '#ffed4e',
      danger: '#e3342f',
    },
    
    // Étendre le thème existant
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          500: '#0ea5e9',
          900: '#0c4a6e',
        }
      },
      
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      
      borderRadius: {
        '4xl': '2rem',
      },
      
      fontSize: {
        'xxs': '0.625rem',
      },
      
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        display: ['Poppins', 'sans-serif'],
      },
      
      boxShadow: {
        'brutal': '8px 8px 0 0 rgba(0, 0, 0, 1)',
      },
      
      animation: {
        'wiggle': 'wiggle 1s ease-in-out infinite',
      },
      
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        }
      }
    },
  },
  plugins: [],
}


# === UTILISATION VALEURS PERSONNALISÉES ===

bg-brand-500
text-brand-900
shadow-brutal
animate-wiggle
text-xxs
font-display


# === VALEURS ARBITRAIRES ===

# Vous pouvez utiliser n'importe quelle valeur avec []

bg-[#1da1f2]           # Couleur hex personnalisée
text-[22px]            # Taille personnalisée
top-[117px]            # Position personnalisée
grid-cols-[200px_1fr_1fr]  # Grid template
bg-[url('/image.png')] # Image de fond


# === EXEMPLES VALEURS ARBITRAIRES ===

<!-- Couleur de brand spécifique -->
<div class="bg-[#FF6B6B] text-[#4ECDC4]">
    Couleurs personnalisées
</div>

<!-- Espacement exact -->
<div class="mt-[13px] pl-[33px]">
    Espacement précis
</div>

<!-- Grid personnalisé -->
<div class="grid grid-cols-[250px_1fr_250px] gap-4">
    <aside>Sidebar</aside>
    <main>Contenu</main>
    <aside>Sidebar</aside>
</div>


[OK] PLUGINS OFFICIELS

# === INSTALLATION ===

npm install -D @tailwindcss/forms
npm install -D @tailwindcss/typography
npm install -D @tailwindcss/aspect-ratio
npm install -D @tailwindcss/container-queries


# === CONFIGURATION ===

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),
  ],
}


# === @tailwindcss/forms ===

# Stylise automatiquement les formulaires
# Active avec forme de base

<input type="text" class="form-input">
<select class="form-select"></select>
<textarea class="form-textarea"></textarea>
<input type="checkbox" class="form-checkbox">
<input type="radio" class="form-radio">


# === @tailwindcss/typography ===

# Classe prose pour contenu riche (articles, blogs)

<article class="prose lg:prose-xl">
    <h1>Titre de l'article</h1>
    <p>Contenu automatiquement stylisé...</p>
    <ul>
        <li>Liste stylisée</li>
    </ul>
</article>

# Variantes
prose-sm           # Petit
prose-base         # Normal
prose-lg           # Grand
prose-xl           # Très grand
prose-2xl          # Énorme

# Couleurs
prose-gray
prose-slate
prose-zinc
prose-stone
prose-neutral

# Dark mode
dark:prose-invert


# === @tailwindcss/container-queries ===

# Container queries au lieu de media queries

<div class="@container">
    <div class="@lg:text-xl @2xl:text-2xl">
        Responsive au conteneur parent
    </div>
</div>


[OK] DIRECTIVES & FONCTIONS

# === DIRECTIVES CSS ===

# @tailwind
@tailwind base;
@tailwind components;
@tailwind utilities;

# @layer
@layer components {
  .btn-primary {
    @apply bg-blue-500 text-white px-4 py-2 rounded;
  }
}

@layer utilities {
  .text-3d {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  }
}

# @apply - Appliquer classes Tailwind dans CSS
.my-button {
  @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded;
}

# @config - Spécifier config file
@config "./tailwind.admin.config.js";

# @variants (deprecated - utiliser variants dans config)


# === FONCTIONS CSS ===

# theme() - Accéder valeurs du thème
.my-class {
  color: theme('colors.blue.500');
  padding: theme('spacing.4');
}

# screen() - Media query breakpoint
@media screen(md) {
  /* Styles pour md et plus */
}


# === EXEMPLES PRATIQUES ===

/* styles.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Composants personnalisés */
@layer components {
  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }
  
  .card-title {
    @apply text-xl font-bold mb-2;
  }
  
  .btn {
    @apply px-4 py-2 rounded font-semibold transition-colors;
  }
  
  .btn-primary {
    @apply btn bg-blue-500 text-white hover:bg-blue-600;
  }
  
  .btn-secondary {
    @apply btn bg-gray-200 text-gray-800 hover:bg-gray-300;
  }
}

/* Utilitaires personnalisés */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

/* Styles de base personnalisés */
@layer base {
  h1 {
    @apply text-4xl font-bold;
  }
  
  h2 {
    @apply text-3xl font-bold;
  }
  
  a {
    @apply text-blue-500 hover:underline;
  }
}


[OK] OPTIMISATION & PRODUCTION

# === PURGE CSS (AUTOMATIQUE) ===

# Tailwind purge automatiquement les classes non utilisées
# Configuration dans tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx,vue}",
    "./public/index.html",
  ],
  // ...
}


# === BUILD POUR PRODUCTION ===

# Build optimisé
npm run build

# Avec Next.js, Vite, etc. - automatique

# CSS final sera minifié et optimisé


# === BONNES PRATIQUES PERFORMANCE ===

# 1. Utiliser content correctement
content: [
  './src/**/*.{js,jsx,ts,tsx}',  # Tous les fichiers sources
  './public/index.html',
]

# 2. Éviter @apply excessif
# Mauvais: trop d'@apply
.card {
  @apply bg-white rounded-lg shadow-md p-6 mb-4 hover:shadow-xl transition-shadow;
}

# Bon: composant réutilisable ou classes directes
<div class="bg-white rounded-lg shadow-md p-6 mb-4 hover:shadow-xl transition-shadow">

# 3. JIT Mode (activé par défaut Tailwind 3+)
# Génère CSS à la demande
# Supporte valeurs arbitraires

# 4. Utiliser safelist pour classes dynamiques
module.exports = {
  safelist: [
    'bg-red-500',
    'bg-green-500',
    'text-3xl',
    {
      pattern: /bg-(red|green|blue)-(100|500|900)/,
    },
  ],
}


[OK] INTÉGRATION AVEC JS

# === CLASSES DYNAMIQUES ===

<!-- React -->
<div className={`text-${size}`}> {/* [X] Ne marche pas */}
<div className={size === 'large' ? 'text-xl' : 'text-base'}> {/* [OK] Bon */}

<!-- Vue -->
<div :class="['text-base', isLarge && 'text-xl']">

<!-- Avec classnames library (React) -->
import classNames from 'classnames';

<button className={classNames(
  'px-4 py-2 rounded',
  isPrimary ? 'bg-blue-500 text-white' : 'bg-gray-200',
  isDisabled && 'opacity-50 cursor-not-allowed'
)}>


# === CLASSES CONDITIONNELLES ===

<!-- React -->
<div className={`
  p-4 rounded
  ${isActive ? 'bg-blue-500 text-white' : 'bg-gray-100'}
  ${isLarge ? 'text-xl' : 'text-base'}
  ${hasError && 'border-2 border-red-500'}
`}>

<!-- Vue -->
<div :class="{
  'bg-blue-500': isActive,
  'bg-gray-100': !isActive,
  'text-white': isActive,
  'border-red-500': hasError
}">

<!-- Svelte -->
<div class="p-4 rounded {isActive ? 'bg-blue-500' : 'bg-gray-100'}">


# === AVEC CLSX (RECOMMANDÉ) ===

import clsx from 'clsx';

<button className={clsx(
  'px-4 py-2 rounded font-semibold',
  'transition-colors duration-200',
  {
    'bg-blue-500 text-white hover:bg-blue-600': variant === 'primary',
    'bg-gray-200 text-gray-800 hover:bg-gray-300': variant === 'secondary',
    'opacity-50 cursor-not-allowed': disabled,
  }
)}>


[OK] EXEMPLES DE LAYOUTS COMPLETS

# === LANDING PAGE HERO ===

<section class="relative h-screen">
    <!-- Background -->
    <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-600"></div>
    <div class="absolute inset-0 bg-black/40"></div>
    
    <!-- Content -->
    <div class="relative h-full flex items-center justify-center px-4">
        <div class="text-center text-white max-w-4xl">
            <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold mb-6">
                Bienvenue sur Notre Plateforme
            </h1>
            <p class="text-xl md:text-2xl mb-8 text-gray-100">
                La solution moderne pour tous vos besoins
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <button class="bg-white text-blue-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition-colors">
                    Commencer
                </button>
                <button class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-white/10 transition-colors">
                    En savoir plus
                </button>
            </div>
        </div>
    </div>
</section>


# === DASHBOARD LAYOUT ===

<div class="flex h-screen bg-gray-100">
    <!-- Sidebar -->
    <aside class="w-64 bg-gray-900 text-white">
        <div class="p-6">
            <h2 class="text-2xl font-bold">Dashboard</h2>
        </div>
        <nav class="mt-6">
            <a href="#" class="flex items-center px-6 py-3 bg-gray-800 border-l-4 border-blue-500">
                <svg class="size-5 mr-3"><!-- Icon --></svg>
                Accueil
            </a>
            <a href="#" class="flex items-center px-6 py-3 hover:bg-gray-800 transition-colors">
                <svg class="size-5 mr-3"><!-- Icon --></svg>
                Utilisateurs
            </a>
            <a href="#" class="flex items-center px-6 py-3 hover:bg-gray-800 transition-colors">
                <svg class="size-5 mr-3"><!-- Icon --></svg>
                Paramètres
            </a>
        </nav>
    </aside>
    
    <!-- Main Content -->
    <div class="flex-1 flex flex-col overflow-hidden">
        <!-- Header -->
        <header class="bg-white shadow-sm">
            <div class="flex items-center justify-between px-8 py-4">
                <h1 class="text-2xl font-semibold">Tableau de bord</h1>
                <div class="flex items-center gap-4">
                    <button class="relative">
                        <svg class="size-6 text-gray-600"><!-- Bell --></svg>
                        <span class="absolute -top-1 -right-1 size-4 bg-red-500 rounded-full text-xs text-white flex items-center justify-center">3</span>
                    </button>
                    <img class="size-10 rounded-full" src="avatar.jpg">
                </div>
            </div>
        </header>
        
        <!-- Content -->
        <main class="flex-1 overflow-auto p-8">
            <!-- Stats Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="bg-white rounded-lg shadow p-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-gray-600">Utilisateurs</p>
                            <p class="text-3xl font-bold">1,234</p>
                        </div>
                        <div class="size-12 bg-blue-100 rounded-full flex items-center justify-center">
                            <svg class="size-6 text-blue-600"><!-- Icon --></svg>
                        </div>
                    </div>
                    <p class="text-sm text-green-600 mt-2">+12% ce mois</p>
                </div>
                <!-- More cards... -->
            </div>
            
            <!-- Chart Area -->
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold mb-4">Statistiques</h3>
                <div class="h-64 bg-gray-100 rounded flex items-center justify-center">
                    Chart placeholder
                </div>
            </div>
        </main>
    </div>
</div>


# === BLOG POST LAYOUT ===

<article class="max-w-4xl mx-auto px-4 py-12">
    <!-- Header -->
    <header class="mb-8">
        <div class="flex items-center gap-2 text-sm text-gray-600 mb-4">
            <span>Tech</span>
            <span>•</span>
            <time>15 Jan 2024</time>
            <span>•</span>
            <span>5 min de lecture</span>
        </div>
        
        <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
            Guide Complet de Tailwind CSS
        </h1>
        
        <p class="text-xl text-gray-600 mb-6">
            Découvrez comment utiliser Tailwind CSS pour créer des interfaces modernes rapidement
        </p>
        
        <div class="flex items-center gap-4">
            <img class="size-12 rounded-full" src="author.jpg">
            <div>
                <p class="font-semibold">John Doe</p>
                <p class="text-sm text-gray-600">Développeur Web</p>
            </div>
        </div>
    </header>
    
    <!-- Featured Image -->
    <img class="w-full h-96 object-cover rounded-xl mb-8" src="featured.jpg">
    
    <!-- Content -->
    <div class="prose prose-lg max-w-none">
        <p>Lorem ipsum dolor sit amet...</p>
        <h2>Section 1</h2>
        <p>Contenu...</p>
        <!-- More content -->
    </div>
    
    <!-- Tags -->
    <div class="flex flex-wrap gap-2 mt-8 pt-8 border-t">
        <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">Tailwind</span>
        <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">CSS</span>
        <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">Web Design</span>
    </div>
    
    <!-- Share -->
    <div class="flex items-center justify-between mt-8 pt-8 border-t">
        <p class="text-gray-600">Partager cet article</p>
        <div class="flex gap-3">
            <button class="size-10 bg-blue-500 text-white rounded-full flex items-center justify-center hover:bg-blue-600">
                <svg class="size-5"><!-- Twitter --></svg>
            </button>
            <button class="size-10 bg-blue-700 text-white rounded-full flex items-center justify-center hover:bg-blue-800">
                <svg class="size-5"><!-- Facebook --></svg>
            </button>
            <button class="size-10 bg-gray-700 text-white rounded-full flex items-center justify-center hover:bg-gray-800">
                <svg class="size-5"><!-- LinkedIn --></svg>
            </button>
        </div>
    </div>
</article>


# === E-COMMERCE PRODUCT GRID ===

<div class="container mx-auto px-4 py-12">
    <!-- Header -->
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-3xl font-bold mb-2">Nos Produits</h1>
            <p class="text-gray-600">Découvrez notre sélection</p>
        </div>
        <select class="border border-gray-300 rounded-lg px-4 py-2">
            <option>Trier par: Pertinence</option>
            <option>Prix croissant</option>
            <option>Prix décroissant</option>
        </select>
    </div>
    
    <!-- Filters -->
    <div class="flex gap-2 mb-6 overflow-x-auto pb-2">
        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg whitespace-nowrap">
            Tous
        </button>
        <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg whitespace-nowrap">
            Électronique
        </button>
        <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg whitespace-nowrap">
            Vêtements
        </button>
        <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg whitespace-nowrap">
            Maison
        </button>
    </div>
    
    <!-- Product Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        <!-- Product Card -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden group hover:shadow-xl transition-shadow">
            <div class="relative aspect-square overflow-hidden bg-gray-100">
                <img class="w-full h-full object-cover group-hover:scale-105 transition-transform" src="product.jpg">
                <button class="absolute top-4 right-4 size-10 bg-white rounded-full flex items-center justify-center shadow-md hover:bg-gray-100">
                    <svg class="size-5 text-gray-700"><!-- Heart --></svg>
                </button>
                <span class="absolute top-4 left-4 bg-red-500 text-white text-xs font-semibold px-2 py-1 rounded">
                    -20%
                </span>
            </div>
            <div class="p-4">
                <h3 class="font-semibold text-gray-900 mb-1">Nom du Produit</h3>
                <p class="text-sm text-gray-600 mb-2">Catégorie</p>
                <div class="flex items-center mb-2">
                    <div class="flex text-yellow-400">
                        <svg class="size-4 fill-current"><!-- Star --></svg>
                        <svg class="size-4 fill-current"><!-- Star --></svg>
                        <svg class="size-4 fill-current"><!-- Star --></svg>
                        <svg class="size-4 fill-current"><!-- Star --></svg>
                        <svg class="size-4 fill-current text-gray-300"><!-- Star --></svg>
                    </div>
                    <span class="text-sm text-gray-600 ml-2">(4.0)</span>
                </div>
                <div class="flex items-center justify-between">
                    <div>
                        <span class="text-2xl font-bold text-gray-900">39.99€</span>
                        <span class="text-sm text-gray-500 line-through ml-2">49.99€</span>
                    </div>
                    <button class="bg-blue-500 text-white size-10 rounded-full flex items-center justify-center hover:bg-blue-600">
                        <svg class="size-5"><!-- Cart --></svg>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- More products... -->
    </div>
    
    <!-- Pagination -->
    <div class="flex justify-center mt-12">
        <nav class="flex items-center gap-2">
            <button class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-50">
                Précédent
            </button>
            <button class="px-4 py-2 bg-blue-500 text-white rounded">1</button>
            <button class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-50">2</button>
            <button class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-50">3</button>
            <button class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-50">
                Suivant
            </button>
        </nav>
    </div>
</div>


[OK] ASTUCES & MEILLEURES PRATIQUES

# === 1. ORGANISATION DES CLASSES ===

# Mauvais: Classes mélangées
<div class="text-blue-500 p-4 hover:bg-blue-600 bg-blue-500 rounded">

# Bon: Classes groupées logiquement
<div class="
    bg-blue-500 hover:bg-blue-600
    text-white
    p-4
    rounded
">

# Encore mieux: Prettier plugin pour Tailwind
# npm install -D prettier prettier-plugin-tailwindcss


# === 2. COMPOSANTS RÉUTILISABLES ===

# Au lieu de répéter:
<button class="bg-blue-500 text-white px-6 py-3 rounded hover:bg-blue-600">...</button>
<button class="bg-blue-500 text-white px-6 py-3 rounded hover:bg-blue-600">...</button>

# Créer un composant React/Vue:
// Button.jsx
export function Button({ children, variant = 'primary' }) {
  return (
    <button className={clsx(
      'px-6 py-3 rounded font-semibold transition-colors',
      variant === 'primary' && 'bg-blue-500 text-white hover:bg-blue-600',
      variant === 'secondary' && 'bg-gray-200 text-gray-800 hover:bg-gray-300',
    )}>
      {children}
    </button>
  );
}


# === 3. ÉVITER LES CLASSES DYNAMIQUES ===

# [X] Ne fonctionne pas (purge supprime ces classes)
<div className={`text-${color}-500`}>

# [OK] Solution 1: Classes complètes
<div className={color === 'blue' ? 'text-blue-500' : 'text-red-500'}>

# [OK] Solution 2: Safelist
// tailwind.config.js
safelist: ['text-blue-500', 'text-red-500', 'text-green-500']


# === 4. MOBILE FIRST ===

# Commencez par mobile, puis ajoutez breakpoints
<div class="
    text-base          
    md:text-lg         
    lg:text-xl         
">


# === 5. UTILISER @APPLY AVEC PARCIMONIE ===

# [X] Trop d'@apply
.button {
  @apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none focus:ring-2;
}

# [OK] Préférer classes directes ou composants JS


# === 6. NOMMER LES COULEURS SÉMANTIQUEMENT ===

// tailwind.config.js
colors: {
  primary: '#3490dc',
  secondary: '#ffed4e',
  danger: '#e3342f',
  success: '#38c172',
  warning: '#f6993f',
  info: '#6cb2eb',
}


# === 7. UTILISER VARIABLES CSS POUR THÈMES ===

/* globals.css */
:root {
  --color-primary: 59 130 246; /* RGB de blue-500 */
  --color-text: 17 24 39; /* RGB de gray-900 */
}

.dark {
  --color-primary: 96 165 250; /* RGB de blue-400 */
  --color-text: 243 244 246; /* RGB de gray-100 */
}

/* Utilisation */
<div class="text-[rgb(var(--color-text))]">


# === 8. GROUPER LES VARIANTS ===

# Au lieu de:
hover:bg-blue-600 hover:text-white hover:scale-105

# Utiliser group:
<div class="group">
    <div class="group-hover:bg-blue-600 group-hover:text-white group-hover:scale-105">


# === 9. CONTENEUR RESPONSIVE ===

<div class="container mx-auto px-4 sm:px-6 lg:px-8">
    Contenu qui s'adapte bien
</div>


# === 10. DEBUG AVEC OUTLINE ===

# Ajouter temporairement pour voir les bordures
<div class="outline outline-red-500">


[OK] RACCOURCIS & ASTUCES

# === CENTRAGE RAPIDE ===

<!-- Centrage horizontal -->
<div class="mx-auto max-w-4xl">

<!-- Centrage vertical -->
<div class="flex items-center h-screen">

<!-- Centrage complet -->
<div class="flex items-center justify-center h-screen">

<!-- Centrage avec Grid -->
<div class="grid place-items-center h-screen">


# === RATIOS D'ASPECT ===

<!-- Vidéo 16:9 -->
<div class="aspect-video">

<!-- Image carrée -->
<img class="aspect-square object-cover">


# === TRUNCATE TEXT ===

<!-- Une ligne -->
<p class="truncate">

<!-- Plusieurs lignes -->
<p class="line-clamp-3">


# === RESPONSIVE IMAGES ===

<img class="w-full h-auto">


# === DIVIDER HORIZONTAL ===

<hr class="border-t border-gray-200 my-4">


# === DIVIDER VERTICAL ===

<div class="h-full border-l border-gray-200"></div>


# === BACKDROP BLUR (GLASSMORPHISM) ===

<div class="backdrop-blur-lg bg-white/30 border border-white/20">


# === GRADIENT TEXT ===

<h1 class="text-6xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">


# === STICKY HEADER ===

<header class="sticky top-0 z-50 bg-white shadow">


# === SCROLL SNAP CAROUSEL ===

<div class="flex overflow-x-scroll snap-x snap-mandatory">
    <div class="snap-start shrink-0 w-full">Slide 1</div>
    <div class="snap-start shrink-0 w-full">Slide 2</div>
</div>


# === CIRCLE AVATAR ===

<img class="size-12 rounded-full object-cover">


# === PILL BADGE ===

<span class="px-3 py-1 text-sm rounded-full bg-blue-100 text-blue-800">


[OK] DÉPANNAGE (TROUBLESHOOTING)

# === Classes ne s'appliquent pas ===

# 1. Vérifier que le fichier est dans content[]
# tailwind.config.js
content: ['./src/**/*.{html,js,jsx}']

# 2. Redémarrer le serveur de dev
# 3. Vérifier l'orthographe des classes
# 4. Vérifier que Tailwind est bien importé


# === Purge supprime classes nécessaires ===

# Solution: Safelist
safelist: [
  'bg-red-500',
  'bg-green-500',
  {
    pattern: /bg-(red|green|blue)-(100|500|900)/,
  },
]


# === Classes custom ne fonctionnent pas ===

# Vérifier @layer dans CSS
@layer utilities {
  .my-class {
    /* styles */
  }
}


# === Dark mode ne fonctionne pas ===

# 1. Vérifier config
darkMode: 'class',

# 2. Ajouter classe 'dark' au HTML
<html class="dark">


# === IntelliSense ne marche pas (VS Code) ===

# 1. Installer extension: Tailwind CSS IntelliSense
# 2. Vérifier settings.json
{
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}


[OK] RESSOURCES

# Documentation officielle
https://tailwindcss.com/docs

# Composants UI
https://tailwindui.com/ (Payant, officiel)
https://www.hyperui.dev/ (Gratuit)
https://flowbite.com/ (Gratuit)
https://daisyui.com/ (Gratuit)
https://headlessui.com/ (Gratuit, officiel)

# Générateurs
https://tailwind.build/ (Color palette)
https://uicolors.app/create (Color generator)
https://www.tailwindtoolbox.com/ (Templates)

# Extensions VS Code
- Tailwind CSS IntelliSense
- Headwind (Classe sorter)
- Tailwind Docs (Documentation rapide)

# Playground
https://play.tailwindcss.com/

# Cheat Sheet
https://nerdcave.com/tailwind-cheat-sheet

#
<input class="border border-gray-300 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">

<!-- Card avec bordure colorée en haut -->
<div class="border-t-4 border-blue-500 bg-white p-6 rounded">
    Contenu
</div>

<!-- Liste avec dividers -->
<ul class="divide-y divide-gray-200">
    <li class="py-4">Item 1</li>
    <li class="py-4">Item 2</li>
    <li class="py-4">Item 3</li>
</ul>


[OK] EFFETS & FILTRES

# === OMBRE (BOX SHADOW) ===

shadow-sm          # Petite ombre
shadow             # Ombre normale
shadow-md          # Ombre moyenne
shadow-lg          # Grande ombre
shadow-xl          # Très grande ombre
shadow-2xl         # Ombre énorme
shadow-inner       # Ombre intérieure
shadow-none        # Pas d'ombre

# Couleur d'ombre
shadow-blue-500
shadow-red-500/50


# === OMBRE DE TEXTE ===

text-shadow-sm     # Petite ombre de texte
text-shadow        # Ombre de texte normale
text-shadow-lg     # Grande ombre de texte
text-shadow-none   # Pas d'ombre


# === OPACITÉ ===

opacity-0          # 0% (invisible)
opacity-5          # 5%
opacity-10         # 10%
opacity-20         # 20%
opacity-25         # 25%
opacity-30         # 30%
opacity-40         # 40%
opacity-50         # 50%
opacity-60         # 60%
opacity-70         # 70%
opacity-75         # 75%
opacity-80         # 80%
opacity-90         # 90%
opacity-95         # 95%
opacity-100        # 100% (visible)


# === MIX BLEND MODE ===

mix-blend-normal
mix-blend-multiply
mix-blend-screen
mix-blend-overlay
mix-blend-darken
mix-blend-lighten
mix-blend-color-dodge
mix-blend-color-burn
mix-blend-hard-light
mix-blend-soft-light
mix-blend-difference
mix-blend-exclusion
mix-blend-hue
mix-blend-saturation
mix-blend-color
mix-blend-luminosity


# === FILTRES ===

# Flou
blur-none          # Pas de flou
blur-sm            # Flou petit (4px)
blur               # Flou normal (8px)
blur-md            # Flou moyen (12px)
blur-lg            # Flou large (16px)
blur-xl            # Flou très large (24px)
blur-2xl           # Flou énorme (40px)
blur-3xl           # Flou massif (64px)

# Luminosité
brightness-0       # 0%
brightness-50      # 50%
brightness-75      # 75%
brightness-90      # 90%
brightness-95      # 95%
brightness-100     # 100% (normal)
brightness-105     # 105%
brightness-110     # 110%
brightness-125     # 125%
brightness-150     # 150%
brightness-200     # 200%

# Contraste
contrast-0         # 0%
contrast-50        # 50%
contrast-75        # 75%
contrast-100       # 100% (normal)
contrast-125       # 125%
contrast-150       # 150%
contrast-200       # 200%

# Niveaux de gris
grayscale-0        # 0% (couleur normale)
grayscale          # 100% (gris complet)

# Teinte
hue-rotate-0       # 0deg
hue-rotate-15      # 15deg
hue-rotate-30      # 30deg
hue-rotate-60      # 60deg
hue-rotate-90      # 90deg
hue-rotate-180     # 180deg

# Inversion
invert-0           # 0%
invert             # 100%

# Saturation
saturate-0         # 0%
saturate-50        # 50%
saturate-100       # 100% (normal)
saturate-150       # 150%
saturate-200       # 200%

# Sépia
sepia-0            # 0%
sepia              # 100%

# Drop shadow
drop-shadow-sm
drop-shadow
drop-shadow-md
drop-shadow-lg
drop-shadow-xl
drop-shadow-2xl
drop-shadow-none


# === BACKDROP FILTERS ===

backdrop-blur-sm
backdrop-blur
backdrop-blur-md
backdrop-blur-lg
backdrop-blur-xl

backdrop-brightness-50
backdrop-brightness-100
backdrop-brightness-150

backdrop-contrast-50
backdrop-contrast-100
backdrop-contrast-150

backdrop-grayscale-0
backdrop-grayscale

backdrop-hue-rotate-0
backdrop-hue-rotate-15
backdrop-hue-rotate-30

backdrop-invert-0
backdrop-invert

backdrop-opacity-0
backdrop-opacity-50
backdrop-opacity-100

backdrop-saturate-0
backdrop-saturate-100
backdrop-saturate-150

backdrop-sepia-0
backdrop-sepia


# === EXEMPLES EFFETS ===

<!-- Carte avec ombre -->
<div class="bg-white rounded-lg shadow-lg p-6">
    Carte avec ombre
</div>

<!-- Bouton avec hover shadow -->
<button class="bg-blue-500 text-white px-6 py-3 rounded shadow hover:shadow-xl transition-shadow">
    Survolez-moi
</button>

<!-- Image avec overlay semi-transparent -->
<div class="relative">
    <img src="image.jpg" class="w-full">
    <div class="absolute inset-0 bg-black opacity-50">
    </div>
</div>

<!-- Glassmorphism effect -->
<div class="backdrop-blur-md bg-white/30 border border-white/20 rounded-lg p-6">
    Effet verre dépoli
</div>

<!-- Image en noir et blanc au survol -->
<img class="grayscale hover:grayscale-0 transition-all" src="image.jpg">

<!-- Modal avec backdrop blur -->
<div class="fixed inset-0 backdrop-blur-sm bg-black/50">
    <div class="bg-white p-8 rounded-lg">
        Modal
    </div>
</div>


[OK] TRANSITIONS & ANIMATIONS

# === PROPRIÉTÉ DE TRANSITION ===

transition-none    # Aucune transition
transition-all     # Toutes propriétés
transition         # Propriétés communes (défaut)
transition-colors  # Couleurs uniquement
transition-opacity # Opacité uniquement
transition-shadow  # Ombre uniquement
transition-transform # Transform uniquement


# === DURÉE ===

duration-75        # 75ms
duration-100       # 100ms
duration-150       # 150ms
duration-200       # 200ms
duration-300       # 300ms
duration-500       # 500ms
duration-700       # 700ms
duration-1000      # 1000ms (1s)


# === TIMING FUNCTION (EASING) ===

ease-linear        # Linéaire
ease-in            # Accélération
ease-out           # Décélération
ease-in-out        # Acc. puis déc. (défaut)


# === DÉLAI ===

delay-75           # 75ms
delay-100          # 100ms
delay-150          # 150ms
delay-200          # 200ms
delay-300          # 300ms
delay-500          # 500ms
delay-700          # 700ms
delay-1000         # 1000ms


# === ANIMATIONS ===

animate-none       # Pas d'animation
animate-spin       # Rotation infinie
animate-ping       # Ping (scale)
animate-pulse      # Pulsation (opacité)
animate-bounce     # Rebond


# === EXEMPLES TRANSITIONS ===

<!-- Bouton avec hover -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded transition-colors duration-200">
    Survolez-moi
</button>

<!-- Carte avec hover lift -->
<div class="bg-white shadow hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300">
    Carte qui se soulève
</div>

<!-- Loader spinner -->
<div class="animate-spin rounded-full size-8 border-t-2 border-blue-500">
</div>

<!-- Notification ping -->
<span class="relative">
    <span class="absolute inset-0 animate-ping bg-red-400 rounded-full opacity-75"></span>
    <span class="relative bg-red-500 rounded-full size-3"></span>
</span>

<!-- Menu avec slide -->
<div class="transform translate-x-full transition-transform duration-300 ease-out">
    <!-- Utilisez translate-x-0 pour afficher -->
    Menu
</div>

<!-- Fade in/out -->
<div class="opacity-0 hover:opacity-100 transition-opacity duration-500">
    Apparaît au survol
</div>


[OK] TRANSFORMATIONS

# === SCALE (ÉCHELLE) ===

scale-0            # 0%
scale-50           # 50%
scale-75           # 75%
scale-90           # 90%
scale-95           # 95%
scale-100          # 100% (normal)
scale-105          # 105%
scale-110          # 110%
scale-125          # 125%
scale-150          # 150%

# Scale X uniquement
scale-x-50
scale-x-100
scale-x-150

# Scale Y uniquement
scale-y-50
scale-y-100
scale-y-150


# === ROTATE (ROTATION) ===

rotate-0           # 0deg
rotate-1           # 1deg
rotate-2           # 2deg
rotate-3           # 3deg
rotate-6           # 6deg
rotate-12          # 12deg
rotate-45          # 45deg
rotate-90          # 90deg
rotate-180         # 180deg

# Rotation négative
-rotate-45         # -45deg
-rotate-90         # -90deg
-rotate-180        # -180deg


# === TRANSLATE (DÉPLACEMENT) ===

# Translate X
translate-x-0      # 0
translate-x-1      # 0.25rem (4px)
translate-x-2      # 0.5rem (8px)
translate-x-4      # 1rem (16px)
translate-x-8      # 2rem (32px)
translate-x-full   # 100%
translate-x-1/2    # 50%

# Négatif
-translate-x-4
-translate-x-full
-translate-x-1/2

# Translate Y
translate-y-0
translate-y-4
translate-y-8
translate-y-full
translate-y-1/2

# Négatif
-translate-y-4
-translate-y-full


# === SKEW (INCLINAISON) ===

skew-x-0           # 0deg
skew-x-1           # 1deg
skew-x-2           # 2deg
skew-x-3           # 3deg
skew-x-6           # 6deg
skew-x-12          # 12deg

# Négatif
-skew-x-6

# Skew Y
skew-y-0
skew-y-3
skew-y-6
skew-y-12


# === ORIGIN ===

origin-center      # centre (défaut)
origin-top         # haut
origin-top-right   # haut droite
origin-right       # droite
origin-bottom-right # bas droite
origin-bottom      # bas
origin-bottom-left # bas gauche
origin-left        # gauche
origin-top-left    # haut gauche


# === EXEMPLES TRANSFORMATIONS ===

<!-- Zoom au survol -->
<img class="hover:scale-110 transition-transform" src="image.jpg">

<!-- Carte qui pivote -->
<div class="hover:rotate-3 transition-transform">
    Carte
</div>

<!-- Badge qui se balance -->
<span class="inline-block hover:scale-125 hover:-rotate-12 transition-transform">
    Nouveau
</span>

<!-- Bouton avec effet de rebond -->
<button class="hover:scale-105 active:scale-95 transition-transform">
    Cliquez
</button>

<!-- Menu slide depuis la droite -->
<div class="fixed top-0 right-0 h-screen transform translate-x-full transition-transform">
    <!-- Utilisez translate-x-0 pour ouvrir -->
    Menu
</div>


[OK] INTERACTIVITÉ

# === CURSOR ===

cursor-auto        # Auto (défaut)
cursor-default     # Flèche par défaut
cursor-pointer     # Main (cliquable)
cursor-wait        # Attente
cursor-text        # Texte sélectionnable
cursor-move        # Déplaçable
cursor-help        # Aide
cursor-not-allowed # Interdit
cursor-none        # Pas de curseur
cursor-grab        # Main ouverte
cursor-grabbing    # Main fermée


# === POINTER EVENTS ===

pointer-events-none  # Ignore les événements
pointer-events-auto  # Événements normaux (défaut)


# === RESIZE ===

resize-none        # Non redimensionnable
resize             # Redimensionnable
resize-y           # Vertical uniquement
resize-x           # Horizontal uniquement


# === USER SELECT ===

select-none        # Texte non sélectionnable
select-text        # Texte sélectionnable
select-all         # Sélectionne tout au clic
select-auto        # Auto (défaut)


# === SCROLL BEHAVIOR ===

scroll-auto        # Scroll normal (défaut)
scroll-smooth      # Scroll fluide


# === SCROLL SNAP ===

snap-none          # Pas de snap
snap-x             # Snap horizontal
snap-y             # Snap vertical
snap-both          # Les deux

# Type
snap-mandatory     # Snap obligatoire
snap-proximity     # Snap proche

# Alignement
snap-start         # Snap au début
snap-end           # Snap à la fin
snap-center        # Snap au centre


# === TOUCH ACTION ===

touch-auto         # Auto (défaut)
touch-none         # Pas de gestes
touch-pan-x        # Pan horizontal
touch-pan-y        # Pan vertical
touch-pan-left     # Pan gauche
touch-pan-right    # Pan droite
touch-pan-up       # Pan haut
touch-pan-down     # Pan bas
touch-pinch-zoom   # Pinch zoom


# === WILL CHANGE ===

will-change-auto   # Auto
will-change-scroll # Optimise pour scroll
will-change-contents # Optimise pour contenu
will-change-transform # Optimise pour transform


# === EXEMPLES INTERACTIVITÉ ===

<!-- Bouton cliquable -->
<button class="cursor-pointer">
    Cliquez-moi
</button>

<!-- Texte non sélectionnable -->
<div class="select-none">
    Impossible de me sélectionner
</div>

<!-- Scroll fluide sur toute la page -->
<html class="scroll-smooth">

<!-- Carousel avec snap -->
<div class="flex overflow-x-scroll snap-x snap-mandatory">
    <div class="snap-center">Slide 1</div>
    <div class="snap-center">Slide 2</div>
    <div class="snap-center">Slide 3</div>
</div>

<!-- Textarea redimensionnable -->
<textarea class="resize border p-2"></textarea>

<!-- Textarea non redimensionnable -->
<textarea class="resize-none border p-2"></textarea>

<!-- Overlay qui bloque les clics -->
<div class="fixed inset-0 pointer-events-none">
    Overlay transparent
</div>


[OK] ARRIÈRE-PLAN (BACKGROUND)

# === COULEUR ===

bg-transparent
bg-white
bg-black
bg-gray-100
bg-blue-500
bg-gradient-to-r   # Voir gradients


# === IMAGE ===

# Position
bg-bottom
bg-center          # Centre (défaut)
bg-left
bg-left-bottom
bg-left-top
bg-right
bg-right-bottom
bg-right-top
bg-top

# Répétition
bg-repeat          # Répète (défaut)
bg-no-repeat       # Pas de répétition
bg-repeat-x        # Horizontal uniquement
bg-repeat-y        # Vertical uniquement
bg-repeat-round    # Répète en ajustant
bg-repeat-space    # Répète avec espaces

# Taille
bg-auto            # Auto (défaut)
bg-cover           # Couvre tout
bg-contain         # Contient entièrement

# Origine
bg-origin-border   # Inclut bordure
bg-origin-padding  # Inclut padding (défaut)
bg-origin-content  # Contenu uniquement

# Clip
bg-clip-border     # Inclut bordure (défaut)
bg-clip-padding    # Inclut padding
bg-clip-content    # Contenu uniquement
bg-clip-text       # Clip au texte (effet gradient text)

# Attachment
bg-fixed           # Fixe au viewport
bg-local           # Scroll avec contenu
bg-scroll          # Fixe à l'élément (défaut)


# === GRADIENTS ===

# Direction
bg-gradient-to-t   # Vers le haut
bg-gradient-to-tr  # Vers haut-droite
bg-gradient-to-r   # Vers la droite
bg-gradient-to-br  # Vers bas-droite
bg-gradient-to-b   # Vers le bas
bg-gradient-to-bl  # Vers bas-gauche
bg-gradient-to-l   # Vers la gauche
bg-gradient-to-tl  # Vers haut-gauche

# Couleurs de gradient
from-blue-500      # Couleur de début
via-purple-500     # Couleur intermédiaire
to-pink-500        # Couleur de fin

# Avec opacité
from-blue-500/50
via-purple-500/75
to-pink-500/100


# === EXEMPLES ARRIÈRE-PLAN ===

<!-- Gradient simple -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600">
    Gradient bleu vers violet
</div>

<!-- Gradient avec 3 couleurs -->
<div class="bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500">
    Gradient arc-en-ciel
</div>

<!-- Image de fond -->
<div class="bg-cover bg-center" style="background-image: url('image.jpg')">
    Contenu
</div>

<!-- Texte avec gradient -->
<h1 class="text-6xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
    Texte Gradient
</h1>

<!-- Hero section avec background fixe -->
<div class="h-screen bg-fixed bg-cover bg-center" style="background-image: url('hero.jpg')">
    <div class="bg-black/50 h-full flex items-center justify-center">
        <h1 class="text-white text-5xl">Hero Title</h1>
    </div>
</div>


[OK] RESPONSIVE DESIGN

# === BREAKPOINTS ===

# Pas de préfixe: mobile (0px et +)
# sm: 640px et +
# md: 768px et +
# lg: 1024px et +
# xl: 1280px et +
# 2xl: 1536px et +

# Format: {breakpoint}:{classe}


# === EXEMPLES RESPONSIVE ===

<!-- Taille de texte responsive -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
    Titre responsive
</h1>

<!-- Padding responsive -->
<div class="p-4 md:p-8 lg:p-12">
    Contenu
</div>

<!-- Layout responsive -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
</div>

<!-- Masquer/Afficher selon écran -->
<div class="hidden md:block">
    Visible uniquement sur tablettes et +
</div>

<div class="block md:hidden">
    Visible uniquement sur mobile
</div>

<!-- Flexbox responsive -->
<div class="flex flex-col md:flex-row gap-4">
    <div class="w-full md:w-1/2">Colonne 1</div>
    <div class="w-full md:w-1/2">Colonne 2</div>
</div>

<!-- Conteneur centré responsive -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
    Contenu
</div>

<!-- Image pleine largeur mobile, limitée desktop -->
<img class="w-full md:w-1/2 lg:w-1/3">


[OK] ÉTATS (STATES)

# === HOVER (SURVOL) ===

hover:bg-blue-600
hover:text-white
hover:scale-105
hover:shadow-lg
hover:opacity-75
hover:rotate-3
hover:translate-y-1
hover:-translate-y-1
hover:brightness-110
hover:saturate-150

# Exemples hover
<button class="bg-blue-500 hover:bg-blue-600 transition">Bouton</button>
<img class="hover:scale-110 transition-transform" src="image.jpg">
<a class="text-blue-600 hover:underline">Lien</a>
<div class="opacity-50 hover:opacity-100 transition-opacity">Apparaît</div>


# === FOCUS (FOCUS CLAVIER/SOURIS) ===

focus:outline-none
focus:ring-2
focus:ring-blue-500
focus:ring-offset-2
focus:border-blue-500
focus:bg-blue-50
focus:text-blue-700
focus:shadow-lg

# Exemples focus
<input class="
    border border-gray-300 px-4 py-2 rounded
    focus:outline-none 
    focus:ring-2 
    focus:ring-blue-500 
    focus:border-transparent
">

<button class="
    bg-blue-500 text-white px-4 py-2 rounded
    focus:outline-none 
    focus:ring-2 
    focus:ring-blue-500 
    focus:ring-offset-2
">
    Bouton
</button>


# === FOCUS-VISIBLE (FOCUS CLAVIER UNIQUEMENT) ===

focus-visible:outline-none
focus-visible:ring-2
focus-visible:ring-blue-500

# Meilleur pour accessibilité - ne montre ring que pour clavier
<button class="
    bg-blue-500 text-white px-4 py-2 rounded
    focus:outline-none
    focus-visible:ring-2 
    focus-visible:ring-blue-500
">
    Bouton accessible
</button>


# === FOCUS-WITHIN (FOCUS SUR ENFANT) ===

focus-within:ring-2
focus-within:border-blue-500
focus-within:shadow-lg
focus-within:bg-blue-50

# Container réagit quand input enfant a le focus
<div class="
    border-2 border-gray-200 rounded p-4
    focus-within:border-blue-500 
    focus-within:ring-2 
    focus-within:ring-blue-200
">
    <label>Nom</label>
    <input class="w-full border-none focus:outline-none">
</div>


# === ACTIVE (PENDANT LE CLIC) ===

active:bg-blue-700
active:scale-95
active:translate-y-1
active:shadow-inner

# Feedback visuel pendant le clic
<button class="
    bg-blue-500 
    hover:bg-blue-600 
    active:bg-blue-700 
    active:scale-95
    transition-transform
">
    Cliquez-moi
</button>


# === DISABLED (DÉSACTIVÉ) ===

disabled:opacity-50
disabled:cursor-not-allowed
disabled:bg-gray-300
disabled:text-gray-500
disabled:pointer-events-none

# Bouton désactivé
<button 
    disabled
    class="
        bg-blue-500 text-white px-6 py-3 rounded
        disabled:opacity-50 
        disabled:cursor-not-allowed
        disabled:hover:bg-blue-500
    "
>
    Bouton désactivé
</button>

# Input désactivé
<input 
    disabled
    class="
        border px-4 py-2 rounded
        disabled:bg-gray-100 
        disabled:cursor-not-allowed
        disabled:text-gray-500
    "
>


# === ENABLED (ACTIVÉ) ===

enabled:hover:bg-blue-600
enabled:cursor-pointer

<button class="enabled:hover:bg-blue-600 disabled:opacity-50">


# === VISITED (LIENS VISITÉS) ===

visited:text-purple-600
visited:underline

<a href="#" class="text-blue-600 visited:text-purple-600">
    Lien
</a>


# === TARGET (ÉLÉMENT CIBLÉ PAR ANCRE) ===

target:bg-yellow-100
target:border-yellow-500

<div id="section1" class="target:bg-yellow-100 target:ring-2">
    Section ciblée par #section1
</div>


# === GROUP (PARENT-ENFANT) ===

# Parent avec classe "group"
# Enfants réagissent au hover/focus du parent

<div class="group hover:bg-gray-100 p-4 rounded">
    <h3 class="group-hover:text-blue-500">Titre</h3>
    <p class="group-hover:text-gray-700">Description</p>
    <button class="group-hover:bg-blue-500 group-hover:text-white">
        Bouton
    </button>
</div>

# Avec noms de groupe (plusieurs groupes)
<div class="group/card hover:bg-gray-100">
    <h3 class="group-hover/card:text-blue-500">Titre</h3>
</div>

<div class="group/item hover:bg-blue-100">
    <span class="group-hover/item:font-bold">Texte</span>
</div>

# Group avec différents états
group-hover:         # Hover sur parent
group-focus:         # Focus sur parent
group-active:        # Active sur parent
group-visited:       # Visited sur parent
group-focus-within:  # Focus-within sur parent

# Exemple complexe
<article class="group relative overflow-hidden rounded-lg shadow hover:shadow-xl transition-shadow">
    <img class="group-hover:scale-110 transition-transform duration-300" src="image.jpg">
    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent">
        <div class="absolute bottom-0 p-6">
            <h3 class="text-white text-2xl font-bold group-hover:text-blue-400 transition-colors">
                Titre de l'article
            </h3>
            <p class="text-gray-300 group-hover:text-white transition-colors">
                Description
            </p>
        </div>
    </div>
</article>


# === PEER (SIBLING - ÉLÉMENT FRÈRE) ===

# Élément frère avec classe "peer"
# Éléments suivants réagissent à l'état du peer

# Checkbox avec label
<div class="flex items-center gap-2">
    <input type="checkbox" class="peer" id="terms">
    <label for="terms" class="peer-checked:text-blue-500 peer-checked:font-bold">
        J'accepte les conditions
    </label>
</div>

# Input avec message d'erreur
<div>
    <input 
        type="email" 
        class="peer border px-4 py-2 rounded w-full invalid:border-red-500"
        required
    >
    <p class="hidden peer-invalid:block text-red-500 text-sm mt-1">
        Email invalide
    </p>
</div>

# Toggle switch
<label class="relative inline-flex items-center cursor-pointer">
    <input type="checkbox" class="sr-only peer">
    <div class="
        w-11 h-6 bg-gray-200 rounded-full
        peer-checked:bg-blue-500
        peer-focus:ring-2 peer-focus:ring-blue-300
        transition-colors
    ">
        <div class="
            absolute left-1 top-1 bg-white size-4 rounded-full
            transition-transform
            peer-checked:translate-x-5
        "></div>
    </div>
    <span class="ml-3 peer-checked:font-bold">Mode sombre</span>
</label>

# Peer avec noms (plusieurs peers)
<input class="peer/email" type="email">
<p class="peer-invalid/email:block hidden">Email invalide</p>

<input class="peer/password" type="password">
<p class="peer-invalid/password:block hidden">Mot de passe invalide</p>

# États peer disponibles
peer-hover:          # Hover sur peer
peer-focus:          # Focus sur peer
peer-active:         # Active sur peer
peer-checked:        # Checked sur peer
peer-disabled:       # Disabled sur peer
peer-invalid:        # Invalid sur peer
peer-required:       # Required sur peer
peer-focus-within:   # Focus-within sur peer

# Exemple: Radio buttons stylisés
<div class="space-y-2">
    <label class="flex items-center gap-3 p-4 border-2 rounded-lg cursor-pointer hover:bg-gray-50">
        <input type="radio" name="plan" class="peer sr-only" value="basic">
        <div class="
            size-5 border-2 rounded-full
            peer-checked:border-blue-500
            peer-checked:bg-blue-500
            flex items-center justify-center
        ">
            <div class="size-2 bg-white rounded-full opacity-0 peer-checked:opacity-100"></div>
        </div>
        <div class="flex-1">
            <p class="font-semibold peer-checked:text-blue-500">Plan Basic</p>
            <p class="text-sm text-gray-600">9.99€/mois</p>
        </div>
    </label>
    
    <label class="flex items-center gap-3 p-4 border-2 rounded-lg cursor-pointer hover:bg-gray-50">
        <input type="radio" name="plan" class="peer sr-only" value="pro">
        <div class="
            size-5 border-2 rounded-full
            peer-checked:border-blue-500
            peer-checked:bg-blue-500
        "></div>
        <div class="flex-1">
            <p class="font-semibold peer-checked:text-blue-500">Plan Pro</p>
            <p class="text-sm text-gray-600">19.99€/mois</p>
        </div>
    </label>
</div>


# === CHECKED (CHECKBOX/RADIO) ===

checked:bg-blue-500
checked:border-blue-500
checked:text-white

<input type="checkbox" class="
    size-5 border-2 rounded
    checked:bg-blue-500 
    checked:border-blue-500
">


# === INDETERMINATE (CHECKBOX INDÉTERMINÉ) ===

indeterminate:bg-gray-400
indeterminate:border-gray-400

# JavaScript requis pour état indeterminate
<input type="checkbox" class="
    indeterminate:bg-gray-400
" id="checkbox">

<script>
document.getElementById('checkbox').indeterminate = true;
</script>


# === REQUIRED / OPTIONAL ===

required:border-red-500
optional:border-gray-300

<input required class="required:border-red-500">
<input class="optional:border-gray-300">


# === VALID / INVALID ===

valid:border-green-500
invalid:border-red-500

<input 
    type="email" 
    required
    class="
        border-2 px-4 py-2 rounded
        valid:border-green-500
        invalid:border-red-500
    "
>


# === IN-RANGE / OUT-OF-RANGE ===

in-range:border-green-500
out-of-range:border-red-500

<input 
    type="number" 
    min="0" 
    max="100"
    class="
        in-range:border-green-500
        out-of-range:border-red-500
    "
>


# === PLACEHOLDER-SHOWN ===

placeholder-shown:border-gray-300

<input 
    placeholder="Entrez votre nom"
    class="placeholder-shown:border-gray-300"
>


# === READ-ONLY ===

read-only:bg-gray-100
read-only:cursor-not-allowed

<input 
    readonly 
    value="Lecture seule"
    class="read-only:bg-gray-100"
>


# === FIRST / LAST / ONLY ===

first:border-t-0       # Premier enfant
first:rounded-t-lg
first:mt-0

last:border-b-0        # Dernier enfant
last:rounded-b-lg
last:mb-0

only:rounded-lg        # Enfant unique

# Liste avec bordures
<ul class="divide-y">
    <li class="py-4 first:pt-0">Item 1</li>
    <li class="py-4">Item 2</li>
    <li class="py-4 last:pb-0">Item 3</li>
</ul>

# Boutons groupés
<div class="flex">
    <button class="px-4 py-2 border first:rounded-l-lg">Gauche</button>
    <button class="px-4 py-2 border-t border-b">Centre</button>
    <button class="px-4 py-2 border last:rounded-r-lg">Droite</button>
</div>


# === ODD / EVEN (IMPAIR / PAIR) ===

odd:bg-gray-100        # Enfants impairs (1, 3, 5...)
even:bg-white          # Enfants pairs (2, 4, 6...)

# Tableau avec lignes alternées
<table class="w-full">
    <tbody>
        <tr class="odd:bg-gray-50 even:bg-white">
            <td>Ligne 1</td>
        </tr>
        <tr class="odd:bg-gray-50 even:bg-white">
            <td>Ligne 2</td>
        </tr>
        <tr class="odd:bg-gray-50 even:bg-white">
            <td>Ligne 3</td>
        </tr>
    </tbody>
</table>

# Liste alternée
<ul>
    <li class="p-4 odd:bg-blue-50 even:bg-white">Item 1</li>
    <li class="p-4 odd:bg-blue-50 even:bg-white">Item 2</li>
    <li class="p-4 odd:bg-blue-50 even:bg-white">Item 3</li>
    <li class="p-4 odd:bg-blue-50 even:bg-white">Item 4</li>
</ul>


# === FIRST-OF-TYPE / LAST-OF-TYPE ===

first-of-type:text-xl
last-of-type:border-b-0

<div>
    <p class="first-of-type:text-xl first-of-type:font-bold">Premier paragraphe</p>
    <p>Deuxième paragraphe</p>
    <p class="last-of-type:text-sm last-of-type:text-gray-600">Dernier paragraphe</p>
</div>


# === ONLY-OF-TYPE ===

only-of-type:text-center

<div>
    <p class="only-of-type:text-center">Seul paragraphe</p>
</div>


# === EMPTY ===

empty:hidden           # Cache si vide
empty:p-0             # Pas de padding si vide

<div class="border p-4 empty:hidden">
    <!-- Contenu dynamique -->
</div>


# === HAS (SÉLECTEUR HAS - EXPÉRIMENTAL) ===

# Réagit si contient un élément spécifique

has-[:checked]:bg-blue-50
has-[:focus]:ring-2
has-[img]:bg-gray-100

<div class="has-[:checked]:bg-blue-50 p-4">
    <input type="checkbox">
    <label>Option</label>
</div>


# === BEFORE / AFTER (PSEUDO-ÉLÉMENTS) ===

before:content-['*']
before:text-yellow-500
after:content-['->']
after:ml-2

<span class="before:content-['*'] before:text-yellow-500 before:mr-1">
    Favoris
</span>

<a class="after:content-['->'] after:ml-2 after:inline-block after:transition-transform hover:after:translate-x-1">
    En savoir plus
</a>

# Decorations avec before/after
<h2 class="
    relative 
    text-2xl font-bold
    before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2
    before:w-1 before:h-full before:bg-blue-500 before:-ml-4
">
    Titre avec barre
</h2>


# === FIRST-LETTER / FIRST-LINE ===

first-letter:text-4xl
first-letter:font-bold
first-letter:text-blue-500

first-line:font-bold
first-line:tracking-wide

<p class="first-letter:text-5xl first-letter:font-bold first-letter:text-blue-500 first-letter:float-left first-letter:mr-2 first-letter:leading-none">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Premier lettre en drop cap.
</p>


# === SELECTION ===

selection:bg-blue-200
selection:text-blue-900

<p class="selection:bg-pink-200 selection:text-pink-900">
    Sélectionnez ce texte pour voir l'effet
</p>


# === MARKER (PUCES DE LISTE) ===

marker:text-blue-500
marker:text-xl

<ul class="list-disc pl-5 marker:text-blue-500">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>


# === FILE (INPUT FILE) ===

file:mr-4
file:py-2
file:px-4
file:rounded
file:border-0
file:bg-blue-500
file:text-white
file:cursor-pointer

<input 
    type="file"
    class="
        file:mr-4 file:py-2 file:px-4
        file:rounded file:border-0
        file:bg-blue-500 file:text-white
        file:hover:bg-blue-600
        file:cursor-pointer
    "
>


# === PLACEHOLDER ===

placeholder:text-gray-400
placeholder:italic
placeholder:opacity-50

<input 
    placeholder="Entrez votre email"
    class="placeholder:text-gray-400 placeholder:italic"
>


# === BACKDROP (DIALOG/MODAL) ===

backdrop:bg-black/50
backdrop:backdrop-blur-sm

<dialog class="backdrop:bg-black/50 backdrop:backdrop-blur-sm">
    Contenu du modal
</dialog>


[OK] COMBINAISONS D'ÉTATS AVANCÉES

# === HOVER + FOCUS ===

<button class="
    bg-blue-500 text-white px-6 py-3 rounded
    hover:bg-blue-600
    focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
    focus:outline-none
    transition-all
">


# === GROUP + PEER ===

<div class="group">
    <input type="checkbox" class="peer">
    <label class="peer-checked:font-bold group-hover:text-blue-500">
        Label interactif
    </label>
</div>


# === DARK MODE + HOVER ===

<button class="
    bg-blue-500 hover:bg-blue-600
    dark:bg-blue-600 dark:hover:bg-blue-700
">


# === RESPONSIVE + ÉTAT ===

<div class="
    bg-gray-100 hover:bg-gray-200
    md:bg-blue-100 md:hover:bg-blue-200
    lg:bg-green-100 lg:hover:bg-green-200
">


# === DISABLED + HOVER (ÉVITER HOVER SI DISABLED) ===

<button class="
    bg-blue-500 hover:bg-blue-600
    disabled:bg-gray-300 disabled:hover:bg-gray-300
    disabled:cursor-not-allowed
">


[OK] EXEMPLES PRATIQUES AVANCÉS

# === FORMULAIRE COMPLET AVEC ÉTATS ===

<form class="space-y-6 max-w-md mx-auto">
    <!-- Input avec validation -->
    <div>
        <label class="block text-sm font-medium mb-2">Email</label>
        <input 
            type="email"
            required
            class="
                w-full px-4 py-2 border-2 rounded-lg
                border-gray-300
                focus:border-blue-500 focus:ring-2 focus:ring-blue-200 focus:outline-none
                invalid:border-red-500 invalid:focus:border-red-500 invalid:focus:ring-red-200
                disabled:bg-gray-100 disabled:cursor-not-allowed
                placeholder:text-gray-400
                transition-colors
            "
            placeholder="vous@exemple.com"
        >
        <p class="mt-1 text-sm text-red-500 hidden peer-invalid:block">
            Adresse email invalide
        </p>
    </div>
    
    <!-- Checkbox avec peer -->
    <div class="flex items-start gap-3">
        <input 
            type="checkbox" 
            id="terms" 
            class="
                peer mt-1
                size-5 border-2 border-gray-300 rounded
                checked:bg-blue-500 checked:border-blue-500
                focus:ring-2 focus:ring-blue-200
                cursor-pointer
            "
        >
        <label 
            for="terms"
            class="
                text-sm text-gray-700 cursor-pointer
                peer-checked:text-blue-600 peer-checked:font-semibold
            "
        >
            J'accepte les termes et conditions
        </label>
    </div>
    
    <!-- Bouton avec tous les états -->
    <button 
        type="submit"
        class="
            w-full px-6 py-3 rounded-lg font-semibold
            bg-blue-500 text-white
            hover:bg-blue-600
            active:bg-blue-700 active:scale-98
            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
            disabled:bg-gray-300 disabled:cursor-not-allowed disabled:hover:bg-gray-300
            transition-all duration-200
        "
    >
        Soumettre
    </button>
</form>


# === CARTE INTERACTIVE COMPLEXE ===

<article class="
    group relative overflow-hidden
    bg-white rounded-xl shadow-md
    hover:shadow-2xl
    transition-shadow duration-300
">
    <!-- Image avec overlay -->
    <div class="relative aspect-video overflow-hidden bg-gray-200">
        <img 
            src="article.jpg"
            class="
                w-full h-full object-cover
                group-hover:scale-110
                transition-transform duration-500
            "
        >
        <div class="
            absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent
            opacity-0 group-hover:opacity-100
            transition-opacity duration-300
        ">
        </div>
    </div>
    
    <!-- Content -->
    <div class="p-6">
        <!-- Badge -->
        <span class="
            inline-block px-3 py-1 text-xs font-semibold rounded-full
            bg-blue-100 text-blue-800
            group-hover:bg-blue-500 group-hover:text-white
            transition-colors duration-300
        ">
            Technologie
        </span>
        
        <!-- Titre -->
        <h3 class="
            mt-3 text-xl font-bold text-gray-900
            group-hover:text-blue-500
            transition-colors duration-300
        ">
            Titre de l'article
        </h3>
        
        <!-- Description -->
        <p class="
            mt-2 text-gray-600 line-clamp-3
            group-hover:text-gray-900
            transition-colors duration-300
        ">
            Description de l'article qui peut être assez longue...
        </p>
        
        <!-- Footer -->
        <div class="mt-4 flex items-center justify-between">
            <div class="flex items-center gap-2">
                <img 
                    src="avatar.jpg"
                    class="size-8 rounded-full"
                >
                <span class="text-sm text-gray-600">John Doe</span>
            </div>
            
            <button class="
                text-blue-500 font-semibold text-sm
                opacity-0 group-hover:opacity-100
                transform translate-x-4 group-hover:translate-x-0
                transition-all duration-300
            ">
                Lire plus ->
            </button>
        </div>
    </div>
    
    <!-- Bookmark button -->
    <button class="
        absolute top-4 right-4
        size-10 rounded-full
        bg-white/80 backdrop-blur-sm
        flex items-center justify-center
        opacity-0 group-hover:opacity-100
        transform scale-0 group-hover:scale-100
        hover:bg-white
        focus:outline-none focus:ring-2 focus:ring-blue-500
        transition-all duration-300
    ">
        <svg class="size-5 text-gray-700"><!-- Heart icon --></svg>
    </button>
</article>


# === NAVIGATION AVEC ÉTATS ===

<nav class="bg-white shadow">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16">
            <!-- Logo -->
            <div class="font-bold text-xl">Logo</div>
            
            <!-- Menu items -->
            <div class="hidden md:flex items-center space-x-1">
                <a href="#" class="
                    px-4 py-2 rounded-lg
                    text-gray-700 font-medium
                    hover:bg-blue-50 hover:text-blue-600
                    focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500
                    active:bg-blue-100
                    transition-colors
                ">
                    Accueil
                </a>
                
                <a href="#" class="
                    px-4 py-2 rounded-lg
                    text-gray-700 font-medium
                    hover:bg-blue-50 hover:text-blue-600
                    focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500
                    visited:text-purple-600
                    transition-colors
                ">
                    À propos
                </a>
                
                <!-- Dropdown -->
                <div class="relative group/menu">
                    <button class="
                        px-4 py-2 rounded-lg flex items-center gap-1
                        text-gray-700 font-medium
                        hover:bg-blue-50 hover:text-blue-600
                        focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500
                        transition-colors
                    ">
                        Services
                        <svg class="
                            size-4 transition-transform
                            group-hover/menu:rotate-180
                        "><!-- Chevron --></svg>
                    </button>
                    
                    <div class="
                        absolute top-full left-0 mt-2
                        bg-white rounded-lg shadow-xl border
                        min-w-48
                        opacity-0 invisible group-hover/menu:opacity-100 group-hover/menu:visible
                        transform scale-95 group-hover/menu:scale-100
                        transition-all duration-200
                    ">
                        <a href="#" class="
                            block px-4 py-3
                            text-gray-700
                            hover:bg-blue-50 hover:text-blue-600
                            first:rounded-t-lg last:rounded-b-lg
                            transition-colors
                        ">
                            Service 1
                        </a>
                        <a href="#" class="
                            block px-4 py-3
                            text-gray-700
                            hover:bg-blue-50 hover:text-blue-600
                            transition-colors
                        ">
                            Service 2
                        </a>
                        <a href="#" class="
                            block px-4 py-3
                            text-gray-700
                            hover:bg-blue-50 hover:text-blue-600
                            last:rounded-b-lg
                            transition-colors
                        ">
                            Service 3
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- CTA Button -->
            <button class="
                px-6 py-2 rounded-lg
                bg-blue-500 text-white font-semibold
                hover:bg-blue-600
                active:bg-blue-700 active:scale-95
                focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
                disabled:bg-gray-300 disabled:cursor-not-allowed
                transition-all
            ">
                Commencer
            </button>
        </div>
    </div>
</nav>


# === LISTE DE TÂCHES INTERACTIVE ===

<ul class="space-y-2">
    <li class="group/item flex items-center gap-3 p-4 bg-white rounded-lg border-2 border-gray-200 hover:border-blue-300 hover:shadow-md transition-all">
        <!-- Checkbox -->
        <input 
            type="checkbox" 
            class="
                peer
                size-5 border-2 border-gray-300 rounded
                checked:bg-blue-500 checked:border-blue-500
                focus:ring-2 focus:ring-blue-200
                cursor-pointer
            "
        >
        
        <!-- Text -->
        <span class="
            flex-1
            peer-checked:line-through peer-checked:text-gray-400
            peer-checked:opacity-50
            transition-all
        ">
            Tâche à accomplir
        </span>
        
        <!-- Actions (apparaissent au hover) -->
        <div class="
            flex gap-2
            opacity-0 group-hover/item:opacity-100
            transform scale-0 group-hover/item:scale-100
            transition-all
        ">
            <button class="
                size-8 rounded flex items-center