| name | tailwindcss-interactivity |
| description | Interactivity utilities Tailwind CSS v4.1. Cursor (cursor-*), Scroll (scroll-smooth, scroll-snap-*, overscroll-*), User select (select-*), Pointer events (pointer-events-*), Touch action, Resize, Caret color, Accent color. Use when this capability is needed. |
| metadata | {"author":"fusengine"} |
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 scrollingscroll-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 selectionselect-text - Allow text selectionselect-all - Select all text when clickedselect-auto - Browser default selection
Pointer Events
Control element interactivity
pointer-events-none - Element cannot be interacted withpointer-events-auto - Element is interactive (default)
Touch Action
Define how touch gestures are handled
touch-auto - Browser default touch handlingtouch-none - Disable all touch behaviorstouch-pan-x - Allow horizontal panning onlytouch-pan-y - Allow vertical panning onlytouch-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 resizingresize - Allow resizing in both directionsresize-y - Allow vertical resizing onlyresize-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
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
