État & Interactivité

<!-- Hover -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
  Survole-moi
</button>

<!-- Plusieurs propriétés au hover -->
<a class="text-slate-600 hover:text-blue-600 hover:underline
          hover:translate-x-1 transition-all">
  Lien interactif
</a>

<!-- Focus (clavier et clic) -->
<input class="border border-slate-300 rounded-lg px-4 py-2
              focus:outline-none focus:ring-2 focus:ring-blue-500
              focus:border-blue-500" />

<!-- Focus-visible (clavier uniquement - recommandé pour l'a11y) -->
<button class="focus-visible:ring-2 focus-visible:ring-blue-500
               focus-visible:outline-none">
  Accessible au clavier
</button>

<!-- Active (pendant le clic) -->
<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700
               active:scale-95 transition-all">
  Cliquer
</button>

<!-- Group : le parent contrôle les enfants -->
<div class="group cursor-pointer bg-white rounded-xl p-6 border
            hover:shadow-lg transition-shadow">
  <h3 class="font-bold group-hover:text-blue-600 transition-colors">
    Titre de la carte
  </h3>
  <p class="text-slate-500 group-hover:text-slate-700">
    Description qui change au survol de la carte
  </p>
  <span class="opacity-0 group-hover:opacity-100 transition-opacity">
    →
  </span>
</div>

<!-- Peer : un frère contrôle un autre frère -->
<div>
  <input type="checkbox" id="toggle" class="peer hidden" />
  <label for="toggle" class="cursor-pointer text-blue-500">
    Afficher plus
  </label>
  <div class="hidden peer-checked:block mt-4">
    Contenu caché qui apparaît quand la checkbox est cochée !
  </div>
</div>

<!-- Transition basique -->
<button class="transition-colors duration-200 ease-in-out
               bg-blue-500 hover:bg-blue-600">
  Transition douce
</button>

<!-- Transition sur plusieurs propriétés -->
<div class="transition-all duration-300
            hover:scale-105 hover:shadow-xl">
  Carte qui grossit au survol
</div>

<!-- Durées spécifiques -->
<div class="transition duration-75">    <!-- Rapide (75ms) -->
<div class="transition duration-150">   <!-- Normal (150ms) -->
<div class="transition duration-300">   <!-- Moyen (300ms) -->
<div class="transition duration-500">   <!-- Lent (500ms) -->

<!-- Animations prédéfinies -->
<div class="animate-spin">       <!-- Rotation continue -->
<div class="animate-ping">       <!-- Ping (notification) -->
<div class="animate-pulse">      <!-- Pulsation douce -->
<div class="animate-bounce">     <!-- Rebond -->

<!-- Exemple : indicateur de chargement -->
<div class="flex items-center gap-2">
  <div class="animate-spin size-5 border-2 border-blue-500
              border-t-transparent rounded-full"></div>
  <span>Chargement...</span>
</div>

<!-- Dark mode avec le préfixe dark: -->
<div class="bg-white dark:bg-slate-900
            text-slate-900 dark:text-slate-100">

  <h1 class="text-2xl font-bold
             text-slate-900 dark:text-white">
    Titre adaptatif
  </h1>

  <p class="text-slate-600 dark:text-slate-400">
    Ce texte s'adapte au thème
  </p>

  <div class="bg-slate-100 dark:bg-slate-800
              border border-slate-200 dark:border-slate-700
              rounded-lg p-4">
    Carte qui respecte le thème
  </div>

  <button class="bg-blue-500 hover:bg-blue-600
                 dark:bg-blue-600 dark:hover:bg-blue-500
                 text-white px-4 py-2 rounded-lg">
    Bouton adaptatif
  </button>
</div>

/* Activer dark mode via la classe (recommandé) */
/* Dans globals.css - Tailwind v4 */
@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

/* Ou via les préférences système (par défaut) :
   dark mode s'active selon prefers-color-scheme */

<!-- Premier/dernier enfant -->
<ul>
  <li class="first:pt-0 last:pb-0 py-4 border-b last:border-0">
    Élément de liste
  </li>
</ul>

<!-- Pair/impair (zébrure) -->
<tr class="odd:bg-slate-50 even:bg-white">
  <td>Ligne alternée</td>
</tr>

<!-- Disabled -->
<button class="bg-blue-500 disabled:bg-gray-300 disabled:cursor-not-allowed"
        disabled>
  Désactivé
</button>

<!-- Placeholder -->
<input class="placeholder:text-slate-400 placeholder:italic"
       placeholder="Tapez ici..." />

<!-- Sélection de texte -->
<p class="selection:bg-blue-200 selection:text-blue-900">
  Sélectionne ce texte pour voir la couleur
</p>

<!-- Before/After (pseudo-éléments) -->
<span class="before:content-['→'] before:mr-2">
  Texte avec flèche
</span>

<!-- Bouton avec TOUS les états -->
<button class="
  bg-blue-500 text-white px-6 py-3 rounded-xl font-semibold
  shadow-md shadow-blue-500/25

  hover:bg-blue-600 hover:shadow-lg hover:shadow-blue-500/30
  hover:-translate-y-0.5

  active:bg-blue-700 active:translate-y-0 active:shadow-sm

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

  disabled:bg-gray-300 disabled:shadow-none
  disabled:cursor-not-allowed disabled:translate-y-0

  transition-all duration-200
">
  Bouton Premium
</button>