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

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