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-interactivity-33description: 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---56# Tailwind CSS Interactivity Utilities78Comprehensive utilities for controlling user interaction behaviors and cursor styles in Tailwind CSS v4.1.910## Categories1112### Cursor Utilities13Control the cursor appearance on elements14- `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)1920### Scroll Behavior & Snap21Manage scrolling and snap behavior22- `scroll-smooth` - Enable smooth scrolling23- `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)2829### User Selection30Control text selection behavior31- `select-none` - Disable text selection32- `select-text` - Allow text selection33- `select-all` - Select all text when clicked34- `select-auto` - Browser default selection3536### Pointer Events37Control element interactivity38- `pointer-events-none` - Element cannot be interacted with39- `pointer-events-auto` - Element is interactive (default)4041### Touch Action42Define how touch gestures are handled43- `touch-auto` - Browser default touch handling44- `touch-none` - Disable all touch behaviors45- `touch-pan-x` - Allow horizontal panning only46- `touch-pan-y` - Allow vertical panning only47- `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)4950### Resize51Control element resize behavior52- `resize-none` - Disable resizing53- `resize` - Allow resizing in both directions54- `resize-y` - Allow vertical resizing only55- `resize-x` - Allow horizontal resizing only5657### Caret Color58Set text input cursor color59- `caret-*` - Color utilities for input/textarea cursor60- Supports all Tailwind colors and opacity modifiers61- Full dark mode support6263### Accent Color64Define accent color for form controls65- `accent-*` - Color utilities for checkboxes, radios, and range inputs66- Supports all Tailwind colors and opacity modifiers67- Full dark mode support6869## Resources70- [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)
fusengine