Agent Skills: Tailwind CSS Interactivity Utilities

Tailwind CSS Interactivity Utilities

Comprehensive utilities for controlling user interaction behaviors and cursor styles in Tailwind CSS v4.1.

Categories

Cursor Utilities

Control the cursor appearance on elements

• cursor-* - Standard cursors (auto, default, pointer, wait, text, move, help, not-allowed, none, etc.)
• Support for resize cursors (col-resize, row-resize, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize, ew-resize, ns-resize, nesw-resize, nwse-resize)
• Zoom cursors (zoom-in, zoom-out)
• Grab cursors (grab, grabbing)
• Special cursors (context-menu, progress, cell, crosshair, vertical-text, alias, copy, no-drop, all-scroll)

Scroll Behavior & Snap

Manage scrolling and snap behavior

• scroll-smooth - Enable smooth scrolling
• scroll-snap-type - Define snap container behavior (snap-none, snap-x, snap-y, snap-both)
• scroll-snap-align - Position snap points (snap-start, snap-center, snap-end)
• scroll-snap-stop - Force snap stops (snap-always, snap-normal)
• overscroll-behavior - Control overscroll area (overscroll-auto, overscroll-contain, overscroll-none)
• Support for axis-specific variants (x, y)

User Selection

Control text selection behavior

• select-none - Disable text selection
• select-text - Allow text selection
• select-all - Select all text when clicked
• select-auto - Browser default selection

Pointer Events

Control element interactivity

• pointer-events-none - Element cannot be interacted with
• pointer-events-auto - Element is interactive (default)

Touch Action

Define how touch gestures are handled

• touch-auto - Browser default touch handling
• touch-none - Disable all touch behaviors
• touch-pan-x - Allow horizontal panning only
• touch-pan-y - Allow vertical panning only
• touch-manipulation - Allow panning and zoom only (no double-tap zoom)
• Support for directional variants (pan-up, pan-down, pan-left, pan-right, pinch-zoom)

Resize

Control element resize behavior

• resize-none - Disable resizing
• resize - Allow resizing in both directions
• resize-y - Allow vertical resizing only
• resize-x - Allow horizontal resizing only

Caret Color

Set text input cursor color

• caret-* - Color utilities for input/textarea cursor
• Supports all Tailwind colors and opacity modifiers
• Full dark mode support

Accent Color

Define accent color for form controls

• accent-* - Color utilities for checkboxes, radios, and range inputs
• Supports all Tailwind colors and opacity modifiers
• Full dark mode support

Pseudo-class State Variants

Style elements based on interaction state with hover:, focus:, active:, and disabled: prefixes.

<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed" disabled>
  Click me
</button>

<input class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-200" />

• hover: - Applies on mouse hover
• focus: - Applies when element has keyboard/pointer focus
• active: - Applies during the click/tap
• disabled: - Applies when the element has the disabled attribute
• Chainable with responsive and dark-mode prefixes: md:hover:bg-blue-700, dark:hover:bg-blue-400

Resources

• Official Tailwind CSS Docs
• Cursor Documentation
• Scroll Behavior Documentation
• Scroll Snap Documentation
• User Select Documentation
• Pointer Events Documentation
• Touch Action Documentation
• Resize Documentation
• Caret Color Documentation
• Accent Color Documentation

Detailed References

• cursor.md - Load when picking a specific cursor value (resize, zoom, grab, special cursors)
• scroll.md - Load when configuring scroll-snap, smooth scrolling, or overscroll containment
• states.md - Load when styling user-select, pointer-events, touch-action, resize, caret-color, or accent-color on form controls