State Variants: hover, focus, active, disabled

Styling Interactive States

State variants apply a utility only when a CSS pseudo-class is active. They follow the same prefix pattern as breakpoints.

• hover:bg-sky-700 — on mouse hover.
• focus:ring-2 focus:ring-sky-500 — on keyboard/click focus.
• active:scale-95 — while being clicked.
• disabled:opacity-50 disabled:cursor-not-allowed — on disabled form elements.
• placeholder:text-slate-400 — style input placeholder text.
• checked:bg-sky-500 — style checked checkboxes/radios.
• required:border-red-400 — style required fields.

<button
  class="rounded-lg bg-sky-600 px-5 py-2.5 text-sm font-semibold text-white
         hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2
         active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed
         transition-all duration-150"
>
  Submit
</button>