Le quartier

Variantes d'état et responsive

[object Object]

Ce que tu vas apprendre

Appliquer un style seulement au survol, au focus ou sur un champ désactivé.
Adapter la mise en page à la taille de l'écran avec sm:, md:, lg:.
Gérer le mode sombre avec dark: et combiner plusieurs variantes.

Le principe : un préfixe

Une variante est un préfixe placé devant une classe. La classe ne s'applique que dans la situation décrite.

<button class="bg-orange-500 hover:bg-orange-600">
  Voir la recette
</button>

Le bouton est orange. Quand la souris passe dessus, il devient un peu plus foncé. Sans le préfixe hover:, la classe s'appliquerait en permanence.

Les états les plus utiles

Tailwind couvre les pseudo-classes CSS que tu connais :

Préfixe	Situation
`hover:`	La souris est au-dessus
`focus:`	L'élément a le focus (clavier ou clic)
`focus-visible:`	Le focus est visible, surtout au clavier
`active:`	L'élément est en train d'être cliqué
`disabled:`	Le champ ou le bouton est désactivé
`first:` `last:` `odd:` `even:`	Position parmi les frères

Un bouton complet :

<button
  class="bg-violet-500 hover:bg-violet-600 focus:outline-2
         focus:outline-offset-2 focus:outline-violet-500
         active:bg-violet-700">
  Enregistrer
</button>

Ne supprime jamais l'indicateur de focus sans le remplacer. Les personnes qui naviguent au clavier en ont besoin pour savoir où elles sont.

Styler selon le parent : group

Parfois, un enfant doit réagir quand c'est le parent qui est survolé. Marque le parent avec group, puis utilise group-hover: sur l'enfant :

<a href="/recettes/crepes" class="group block rounded-lg border p-4">
  <h3 class="text-gray-900 group-hover:text-orange-600">Crêpes</h3>
  <p class="text-gray-500 group-hover:text-gray-900">Prêtes en 15 minutes.</p>
</a>

Quand on survole n'importe où dans la carte, le titre et le texte changent de couleur.

Le responsive : mobile d'abord

Tailwind est mobile first : une classe sans préfixe s'applique à toutes les tailles d'écran, et un préfixe s'applique à partir d'un seuil. Les seuils par défaut sont :

Préfixe	À partir de
`sm:`	40 rem (640 px)
`md:`	48 rem (768 px)
`lg:`	64 rem (1024 px)
`xl:`	80 rem (1280 px)
`2xl:`	96 rem (1536 px)

md: veut dire « à partir de la taille moyenne », pas « sur les écrans moyens ».

Une grille qui s'adapte

<ul class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <li>Crêpes</li>
  <li>Quiche</li>
  <li>Ratatouille</li>
</ul>

Lis-la ainsi : une colonne par défaut (téléphone), deux colonnes à partir de 640 px, trois à partir de 1024 px. Tu écris d'abord le mobile, puis tu ajoutes ce qui change sur les grands écrans.

Piège classique : sm:text-center ne centre pas le texte « sur mobile ». Il le centre à partir de 640 px. Pour centrer sur mobile puis aligner à gauche ensuite, écris text-center sm:text-left.

Cibler un intervalle

Le préfixe max-md: applique une classe seulement en dessous du seuil md. On peut aussi empiler un seuil minimum et un maximum :

<div class="md:max-xl:flex">
  <!-- flex seulement entre md et xl -->
</div>

Ici, flex s'applique à partir de md jusqu'à xl exclu.

Le mode sombre

Par défaut, dark: suit le réglage du système de l'utilisateur (la fonction CSS prefers-color-scheme) :

<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
  Recette du jour
</div>

Un fond blanc avec un texte sombre le jour, l'inverse quand le système est en mode sombre. Pour un bouton de bascule manuel, le chapitre 5 explique comment changer ce comportement.

Empiler les variantes

Les préfixes se combinent, de gauche à droite :

<button class="dark:md:hover:bg-fuchsia-600">Enregistrer</button>

Cette classe change le fond en fuchsia seulement en mode sombre, à partir de md, au survol. Plus tu empiles de préfixes, plus la classe est précise, mais plus elle devient difficile à lire. Deux préfixes suffisent le plus souvent.

Un exemple complet

<article class="flex flex-col gap-2 rounded-lg border p-4
                hover:shadow-md md:flex-row md:items-center
                dark:border-gray-700">
  <h3 class="font-bold">Quiche lorraine</h3>
  <p class="text-gray-600 dark:text-gray-300">45 minutes</p>
</article>

La carte est en colonne sur mobile et en ligne à partir de md. Elle prend une ombre au survol et une bordure plus sombre en mode sombre.

À retenir

Un préfixe comme hover: limite une classe à une situation précise.
group sur le parent et group-hover: sur l'enfant permettent de réagir au survol du parent.
Tailwind est mobile first : sans préfixe, la classe vaut partout ; md: signifie « à partir de 768 px ».
dark: suit par défaut le réglage du système, max-md: cible les écrans plus petits qu'un seuil.
Les préfixes s'empilent (dark:md:hover:), mais garde un code lisible avec deux ou trois au maximum.

Ensuite