Tailwind CSS : responsive et états

Une variante est un préfixe qui conditionne une classe : md:flex, hover:bg-blue-700, dark:text-white. Les variantes se combinent : dark:md:hover:bg-slate-800.

Responsive : mobile d’abord

Une classe sans préfixe s’applique à tous les écrans ; un préfixe l’applique à partir de ce point de rupture.

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

<div class="flex flex-col gap-4 md:flex-row">
  <aside class="md:w-64">Menu</aside>
  <main class="flex-1">Contenu</main>
</div>
<p class="text-sm md:text-base lg:text-lg">Taille adaptative</p>

Écrire d’abord le style mobile, puis ajouter les préfixes pour les écrans plus grands. max-md:hidden cible au contraire les écrans plus petits qu’un point de rupture.

États

<button
  class="bg-blue-600 text-white hover:bg-blue-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50"
>
  Valider
</button>

Variante	Condition
`hover:`	Survol
`focus:`, `focus-visible:`	Focus (`focus-visible` : navigation au clavier)
`active:`	Appui
`disabled:`	Élément désactivé
`checked:`, `invalid:`, `required:`	États de formulaire
`first:`, `last:`, `odd:`, `even:`	Position parmi les frères
`placeholder:`	Texte indicatif d’un champ
`aria-expanded:`, `data-[etat=ouvert]:`	Attributs ARIA et `data-*`

Toujours prévoir un état focus-visible visible : indispensable à l’accessibilité au clavier.

Groupes et pairs

Styliser un élément selon l’état d’un parent (group) ou d’un voisin (peer) :

<a
  href="#"
  class="group flex items-center gap-2 rounded p-2 hover:bg-slate-100"
>
  <svg
    class="size-5 text-slate-400 group-hover:text-blue-600"
    aria-hidden="true"
  >
    …
  </svg>
  <span class="group-hover:underline">Lien</span>
</a>

<input type="checkbox" id="accord" class="peer sr-only" />
<label for="accord" class="peer-checked:font-bold">J'accepte</label>

Mode sombre

Par défaut, dark: s’appuie sur la préférence du système (prefers-color-scheme) :

<div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100">
  …
</div>

Pour un bouton de thème (clair/sombre au choix de l’utilisateur), redéfinir la variante pour qu’elle se base sur un attribut :

@import 'tailwindcss';
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

// choix mémorisé, ou préférence du système au premier chargement
const enregistre = localStorage.getItem('theme');
const systeme = matchMedia('(prefers-color-scheme: dark)').matches
  ? 'dark'
  : 'light';
document.documentElement.dataset.theme = enregistre ?? systeme;

Exécuter ce code avant l’affichage (script dans le <head>) pour éviter un flash de thème clair. Plus de détails : Thème et personnalisation.

Variantes d’enfants

<ul class="*:rounded *:bg-slate-100 *:px-3 *:py-1">
  <li>Un</li>
  <li>Deux</li>
</ul>

*: applique la classe aux enfants directs. has-[:checked]: cible un élément qui contient un autre.

Requêtes de conteneur

Adapter un composant à la largeur de son conteneur (et non de la fenêtre) :

<div class="@container">
  <div class="grid grid-cols-1 gap-4 @md:grid-cols-2 @xl:grid-cols-3">…</div>
</div>

Utile pour des composants réutilisés à des endroits de largeurs différentes.

Préférences de l’utilisateur

Variante	Cas
`motion-reduce:` / `motion-safe:`	Réduire les animations
`print:`	Impression
`contrast-more:`	Contraste renforcé
`forced-colors:`	Mode à contraste élevé de Windows

Dépannage

Symptôme	Piste
`md:` ne s’applique pas	Raisonnement « mobile d’abord » : `md:` agit à partir de 768 px
`dark:` ignore le bouton de thème	Définir `@custom-variant dark` basé sur l’attribut
Flash de thème clair au chargement	Initialiser le thème dans un script du `<head>`
`hover:` actif sur mobile	Les écrans tactiles émulent le survol : v4 limite `hover` aux appareils qui le gèrent
`group-hover:` sans effet	Le parent n’a pas la classe `group`
`peer-*` sans effet	L’élément `peer` doit précéder l’élément stylé dans le HTML