Hover Focus and Active States

Interactive frontend elements often change appearance when users interact with them. Buttons may change color on hover, inputs may highlight on focus, and cards may react when clicked.

Tailwind provides utility modifiers that make interactive styling simple and consistent.

Hover States

Hover states apply styles when the user moves the cursor over an element.

Open App.svelte and add the following code:

<button
  class="
    bg-purple-600
    hover:bg-purple-700
    text-white
    px-4
    py-2
    rounded-lg
  "
>
  Save
</button>

The button changes to a darker purple color when hovered.

Focus States

Focus states are commonly used for inputs and accessibility.

<input
  class="
    border
    p-3
    rounded-lg
    focus:outline-none
    focus:ring-2
    focus:ring-purple-500
  "
  placeholder="Enter email"
/>

When the input receives focus, a purple ring appears around it.

This helps users understand which element is currently active.

Active States

Active states apply styles while the element is being pressed.

<button
  class="
    bg-blue-600
    active:scale-95
    text-white
    px-4
    py-2
    rounded-lg
  "
>
  Click
</button>

The button slightly shrinks while being clicked.

Small interactions like this help interfaces feel more responsive.

Combining Interactive States

Tailwind allows multiple interaction states to work together.

<button
  class="
    bg-purple-600
    hover:bg-purple-700
    active:scale-95
    focus:ring-2
    focus:ring-purple-400
    text-white
    px-4
    py-2
    rounded-lg
  "
>
  Continue
</button>

This creates a more polished and interactive UI experience.