patterncsstailwindTip

hover, focus, and active variants: applying multiple state modifiers

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

hoverfocusactivedisabledstate modifierinteractivevariants

Problem

Interactive elements need to respond to multiple states (hover, focus, active, disabled) with different styles, and it is unclear how to combine multiple Tailwind state modifiers cleanly.

Solution

Stack modifiers directly on each utility class:

<button
  class="
    bg-blue-600
    hover:bg-blue-700
    focus-visible:outline-none
    focus-visible:ring-2
    focus-visible:ring-blue-500
    focus-visible:ring-offset-2
    active:bg-blue-800
    disabled:opacity-50
    disabled:cursor-not-allowed
    disabled:pointer-events-none
    transition-colors
    duration-150
  "
>
  Submit
</button>

Modifiers can also be combined:

<!-- dark + hover together -->
<div class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">

<!-- group-hover + focus-visible -->
<span class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100">

Why

Each modifier generates a separate CSS rule with the appropriate selector. They do not conflict — they each apply under their respective conditions independently.

Gotchas

The order of modifiers matters for specificity in v3 when the same property is targeted by multiple states — later classes in the stylesheet win.
focus and focus-visible are different: focus fires on click too, focus-visible only on keyboard. Prefer focus-visible for visual ring styles.
disabled on a button prevents JS events but CSS :disabled only applies to form elements, not div buttons with disabled attribute.

Context

When styling interactive UI elements with multiple state-based visual changes.

Revisions (0)

No revisions yet.