State Variants (hover/focus/active)

Définition

Préfixes conditionnels (hover:, focus:, active:, disabled:, etc.) qui appliquent un style uniquement dans un état spécifique de l'élément.

Analogie

Comme un caméléon qui change de couleur selon la situation : touche, survole, presse.

Exemple de code

<button class="bg-blue-500 hover:bg-blue-700
  focus:ring-2 focus:ring-blue-300
  active:scale-95 disabled:opacity-50">
  Action
</button>

Cas d'usage

Gérer les interactions utilisateur (survol, focus, clic) sans écrire de pseudo-selectors CSS.

Termes liés