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
1---2name: tailwindcss-interactivity3description: 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.4---5
6# Tailwind CSS Interactivity Utilities
7
8Comprehensive utilities for controlling user interaction behaviors and cursor styles in Tailwind CSS v4.1.
9
10## Categories
11
12### Cursor Utilities
13Control the cursor appearance on elements
14- `cursor-*` - Standard cursors (auto, default, pointer, wait, text, move, help, not-allowed, none, etc.)
15- 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)
16- Zoom cursors (zoom-in, zoom-out)
17- Grab cursors (grab, grabbing)
18- Special cursors (context-menu, progress, cell, crosshair, vertical-text, alias, copy, no-drop, all-scroll)
19
20### Scroll Behavior & Snap
21Manage scrolling and snap behavior
22- `scroll-smooth` - Enable smooth scrolling
23- `scroll-snap-type` - Define snap container behavior (snap-none, snap-x, snap-y, snap-both)
24- `scroll-snap-align` - Position snap points (snap-start, snap-center, snap-end)
25- `scroll-snap-stop` - Force snap stops (snap-always, snap-normal)
26- `overscroll-behavior` - Control overscroll area (overscroll-auto, overscroll-contain, overscroll-none)
27- Support for axis-specific variants (x, y)
28
29### User Selection
30Control text selection behavior
31- `select-none` - Disable text selection
32- `select-text` - Allow text selection
33- `select-all` - Select all text when clicked
34- `select-auto` - Browser default selection
35
36### Pointer Events
37Control element interactivity
38- `pointer-events-none` - Element cannot be interacted with
39- `pointer-events-auto` - Element is interactive (default)
40
41### Touch Action
42Define how touch gestures are handled
43- `touch-auto` - Browser default touch handling
44- `touch-none` - Disable all touch behaviors
45- `touch-pan-x` - Allow horizontal panning only
46- `touch-pan-y` - Allow vertical panning only
47- `touch-manipulation` - Allow panning and zoom only (no double-tap zoom)
48- Support for directional variants (pan-up, pan-down, pan-left, pan-right, pinch-zoom)
49
50### Resize
51Control element resize behavior
52- `resize-none` - Disable resizing
53- `resize` - Allow resizing in both directions
54- `resize-y` - Allow vertical resizing only
55- `resize-x` - Allow horizontal resizing only
56
57### Caret Color
58Set text input cursor color
59- `caret-*` - Color utilities for input/textarea cursor
60- Supports all Tailwind colors and opacity modifiers
61- Full dark mode support
62
63### Accent Color
64Define accent color for form controls
65- `accent-*` - Color utilities for checkboxes, radios, and range inputs
66- Supports all Tailwind colors and opacity modifiers
67- Full dark mode support
68
69## Resources
70- [Official Tailwind CSS Docs](https://tailwindcss.com/)
71- [Cursor Documentation](https://tailwindcss.com/docs/cursor)
72- [Scroll Behavior Documentation](https://tailwindcss.com/docs/scroll-behavior)
73- [Scroll Snap Documentation](https://tailwindcss.com/docs/scroll-snap)
74- [User Select Documentation](https://tailwindcss.com/docs/user-select)
75- [Pointer Events Documentation](https://tailwindcss.com/docs/pointer-events)
76- [Touch Action Documentation](https://tailwindcss.com/docs/touch-action)
77- [Resize Documentation](https://tailwindcss.com/docs/resize)
78- [Caret Color Documentation](https://tailwindcss.com/docs/caret-color)
79- [Accent Color Documentation](https://tailwindcss.com/docs/accent-color)
majiayu000