LEGACY Tailwind CSS v3-era example, archived unchanged. Kept for reference only — it uses the v3 Play CDN and JS config, both removed in v4. Current documentation →

Interactivity in Tailwind CSS

Master state-based styling and user interactions

Hover Effects Focus States Active States User Selection Cursor Types 
button class="hover:bg-indigo-700 
focus:ring-2 
active:translate-y-0.5"

Interactive Elements with Tailwind CSS

Tailwind CSS provides a rich set of utilities for handling user interactions and states. These utilities help you create responsive, interactive UI elements without writing custom CSS. Let's explore the different interactivity features offered by Tailwind.

State-Based Styling

Scroll To Item

Hover State Styling

Apply styles when a user hovers over an element using the hover: prefix.

hover:bg-orange-500 hover:text-black

Focus State Styling

Apply styles when an element receives focus using the focus: prefix.

focus:bg-green-500 focus:text-black

Active State Styling

Apply styles when an element is being activated (pressed) using the active: prefix.

active:bg-yellow-500 active:text-black

Group Hover Styling

Style elements based on parent hover state using group and group-hover: prefixes.

Card Title

This is some card text
group group-hover:text-white

Pseudo Element Styling

Even & Odd Styling

Apply styles to alternating items in a list using even: and odd: prefixes.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
even:bg-green-200 odd:bg-blue-200

Form & Input Styling

Appearance Control

Remove browser-specific styling from elements using appearance-none.

Default Select
With appearance-none
appearance-none

Cursor Control

Cursor Types

Control the cursor appearance when hovering over elements using cursor-{type} utilities.

cursor-pointer cursor-progress cursor-not-allowed

Comprehensive Cursor Gallery

Tailwind provides many cursor utilities for different use cases:

cursor-auto

Browser default cursor

cursor-default

Standard cursor

cursor-pointer

Clickable element

cursor-wait

Program is busy

cursor-text

Text can be selected

cursor-move

Element can be moved

cursor-help

Help is available

cursor-not-allowed

Action not available

cursor-none

Cursor is hidden

cursor-context-menu

Context menu available

cursor-progress

Program working

cursor-cell

Cell selection

cursor-crosshair

Precise selection

cursor-vertical-text

Vertical text

cursor-alias

Create alias/shortcut

cursor-copy

Can be copied

cursor-no-drop

Cannot be dropped

cursor-grab

Element can be grabbed

cursor-grabbing

Grabbing element

cursor-all-scroll

Scroll in any direction

cursor-col-resize

Resize column

cursor-row-resize

Resize row

cursor-n-resize

Resize north edge

cursor-e-resize

Resize east edge

cursor-s-resize

Resize south edge

cursor-w-resize

Resize west edge

cursor-ne-resize

Resize NE corner

cursor-nw-resize

Resize NW corner

cursor-se-resize

Resize SE corner

cursor-sw-resize

Resize SW corner

cursor-ew-resize

Resize east-west

cursor-ns-resize

Resize north-south

cursor-nesw-resize

Resize NE-SW diagonal

cursor-nwse-resize

Resize NW-SE diagonal

cursor-zoom-in

Content can be zoomed in

cursor-zoom-out

Content can be zoomed out

User Selection Control

Text Selection

Control how users can select text using select-{type} utilities.

select-none
Lorem ipsum dolor sit amet.
select-text
Lorem ipsum dolor sit amet.
select-all
Lorem ipsum dolor sit amet.
select-auto
Lorem ipsum dolor sit amet.

Summary & Key Takeaways

What We've Learned

  • Interactivity utilities in Tailwind make it easy to create responsive and interactive UI elements
  • State-based styling like hover, focus, and active can enhance user experience without custom CSS
  • Cursor utilities provide visual cues to users about what actions are possible
  • Selection controls give you fine-grained control over how users can interact with content

Next Steps

  • Combine interactivity utilities with animations for more engaging UIs
  • Create consistent interactive patterns across your entire application
  • Explore advanced interactivity with JavaScript and Tailwind for dynamic interfaces
  • Check out the official Tailwind CSS documentation for more details
Back to Main Documentation