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