Also documents the pseudo-class state variants (hover:, focus:, active:, disabled:) and their chaining with responsive/dark-mode prefixes.
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
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 hoverfocus: - Applies when element has keyboard/pointer focusactive: - Applies during the click/tapdisabled: - 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
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, or overscroll containment
- states.md - Load when styling user-select, pointer-events, touch-action, resize, caret-color, or accent-color on form controls
1---2name: tailwindcss-interactivity3description: Use when controlling cursor appearance, scroll snap/smooth behavior, text selection, pointer-events, touch actions, or caret/accent colors.4---56<objective>7Complete reference for Tailwind CSS v4.1 interactivity utilities: `cursor-*` (standard, resize, zoom, grab, and special cursors), scroll behavior and snap (`scroll-smooth`, `scroll-snap-type`/`-align`/`-stop`, `overscroll-*`), `select-*` for text-selection control, `pointer-events-*`, `touch-*` action utilities, `resize-*`, `caret-*` color for input cursors, and `accent-*` color for checkboxes/radios/range inputs.89Also documents the pseudo-class state variants (`hover:`, `focus:`, `active:`, `disabled:`) and their chaining with responsive/dark-mode prefixes.10</objective>1112# Tailwind CSS Interactivity Utilities1314Comprehensive utilities for controlling user interaction behaviors and cursor styles in Tailwind CSS v4.1.1516## Categories1718### Cursor Utilities19Control the cursor appearance on elements20- `cursor-*` - Standard cursors (auto, default, pointer, wait, text, move, help, not-allowed, none, etc.)21- 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)22- Zoom cursors (zoom-in, zoom-out)23- Grab cursors (grab, grabbing)24- Special cursors (context-menu, progress, cell, crosshair, vertical-text, alias, copy, no-drop, all-scroll)2526### Scroll Behavior & Snap27Manage scrolling and snap behavior28- `scroll-smooth` - Enable smooth scrolling29- `scroll-snap-type` - Define snap container behavior (snap-none, snap-x, snap-y, snap-both)30- `scroll-snap-align` - Position snap points (snap-start, snap-center, snap-end)31- `scroll-snap-stop` - Force snap stops (snap-always, snap-normal)32- `overscroll-behavior` - Control overscroll area (overscroll-auto, overscroll-contain, overscroll-none)33- Support for axis-specific variants (x, y)3435### User Selection36Control text selection behavior37- `select-none` - Disable text selection38- `select-text` - Allow text selection39- `select-all` - Select all text when clicked40- `select-auto` - Browser default selection4142### Pointer Events43Control element interactivity44- `pointer-events-none` - Element cannot be interacted with45- `pointer-events-auto` - Element is interactive (default)4647### Touch Action48Define how touch gestures are handled49- `touch-auto` - Browser default touch handling50- `touch-none` - Disable all touch behaviors51- `touch-pan-x` - Allow horizontal panning only52- `touch-pan-y` - Allow vertical panning only53- `touch-manipulation` - Allow panning and zoom only (no double-tap zoom)54- Support for directional variants (pan-up, pan-down, pan-left, pan-right, pinch-zoom)5556### Resize57Control element resize behavior58- `resize-none` - Disable resizing59- `resize` - Allow resizing in both directions60- `resize-y` - Allow vertical resizing only61- `resize-x` - Allow horizontal resizing only6263### Caret Color64Set text input cursor color65- `caret-*` - Color utilities for input/textarea cursor66- Supports all Tailwind colors and opacity modifiers67- Full dark mode support6869### Accent Color70Define accent color for form controls71- `accent-*` - Color utilities for checkboxes, radios, and range inputs72- Supports all Tailwind colors and opacity modifiers73- Full dark mode support7475## Pseudo-class State Variants76Style elements based on interaction state with `hover:`, `focus:`, `active:`, and `disabled:` prefixes.7778```html79<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed" disabled>80 Click me81</button>8283<input class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-200" />84```8586- `hover:` - Applies on mouse hover87- `focus:` - Applies when element has keyboard/pointer focus88- `active:` - Applies during the click/tap89- `disabled:` - Applies when the element has the `disabled` attribute90- Chainable with responsive and dark-mode prefixes: `md:hover:bg-blue-700`, `dark:hover:bg-blue-400`9192## Resources93- [Official Tailwind CSS Docs](https://tailwindcss.com/)94- [Cursor Documentation](https://tailwindcss.com/docs/cursor)95- [Scroll Behavior Documentation](https://tailwindcss.com/docs/scroll-behavior)96- [Scroll Snap Documentation](https://tailwindcss.com/docs/scroll-snap)97- [User Select Documentation](https://tailwindcss.com/docs/user-select)98- [Pointer Events Documentation](https://tailwindcss.com/docs/pointer-events)99- [Touch Action Documentation](https://tailwindcss.com/docs/touch-action)100- [Resize Documentation](https://tailwindcss.com/docs/resize)101- [Caret Color Documentation](https://tailwindcss.com/docs/caret-color)102- [Accent Color Documentation](https://tailwindcss.com/docs/accent-color)103104## Detailed References105106- [cursor.md](references/cursor.md) - Load when picking a specific cursor value (resize, zoom, grab, special cursors)107- [scroll.md](references/scroll.md) - Load when configuring scroll-snap, smooth scrolling, or overscroll containment108- [states.md](references/states.md) - Load when styling user-select, pointer-events, touch-action, resize, caret-color, or accent-color on form controls
fusengine