<objective> Complete reference for Tailwind CSS v4.3 interactivity utilities: `cursor-*` (standard, resize, zoom, grab, and special cursors), scroll behavior and snap (`scroll-smooth`, `scroll-snap-type`/`-align`/`-stop`, `overscroll-*`, logical `scroll-mbs-*`/`scroll-pbs-*` since v4.2), scrollbar styling (`scrollbar-*`, `scrollbar-thumb-*`/`scrollbar-track-*`, `scrollbar-gutter-*`, since v4.3), `select-*` for text-selection control, `pointer-events-*`, `touch-*` action utilities, `resize-*`, `caret-*` color for input cursors, and `accent-*` color for checkboxes/radios/range inputs.

Also documents the pseudo-class state variants (hover:, focus:, active:, disabled:) and their chaining with responsive/dark-mode prefixes. </objective>

Tailwind CSS Interactivity Utilities

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

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)
• Logical block-axis scroll margin/padding (since v4.2): scroll-mbs-*, scroll-mbe-*, scroll-pbs-*, scroll-pbe-*

Scrollbar Styling (since v4.3)

• scrollbar-auto, scrollbar-thin, scrollbar-none - scrollbar-width
• scrollbar-thumb-*, scrollbar-track-* - scrollbar-color (supports opacity modifiers, e.g. scrollbar-thumb-slate-900/60)
• scrollbar-gutter-auto, scrollbar-gutter-stable, scrollbar-gutter-both - reserve scrollbar space to avoid layout shift

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
• Scrollbar Width, Scrollbar Color, Scrollbar Gutter
• 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, overscroll containment, or scrollbar styling
• states.md - Load when styling user-select, pointer-events, touch-action, resize, caret-color, or accent-color on form controls