State Variants (hover/focus/active)

Tailwind CSS 🟢 Junior

Definition

Prefixes conditionnels (hover:, focus:, active:, disabled:, etc.) qui appliquent un style uniquement dans un etat specifique de l'element.

Analogie

Comme un cameleon 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

Gerer les interactions utilisateur (survol, focus, clic) sans ecrire de pseudo-selectors CSS.

#styling#interview#tailwind