Tailwindcss Interactivity

---
name: tailwindcss-interactivity
description: "Use when controlling cursor appearance, scroll snap/smooth behavior, text selection, pointer-events, touch actions, or caret/accent colors."
user-invocable: false
---

<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.

```html
<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](https://tailwindcss.com/)
- [Cursor Documentation](https://tailwindcss.com/docs/cursor)
- [Scroll Behavior Documentation](https://tailwindcss.com/docs/scroll-behavior)
- [Scroll Snap Documentation](https://tailwindcss.com/docs/scroll-snap)
- [Scrollbar Width](https://tailwindcss.com/docs/scrollbar-width), [Scrollbar Color](https://tailwindcss.com/docs/scrollbar-color), [Scrollbar Gutter](https://tailwindcss.com/docs/scrollbar-gutter)
- [User Select Documentation](https://tailwindcss.com/docs/user-select)
- [Pointer Events Documentation](https://tailwindcss.com/docs/pointer-events)
- [Touch Action Documentation](https://tailwindcss.com/docs/touch-action)
- [Resize Documentation](https://tailwindcss.com/docs/resize)
- [Caret Color Documentation](https://tailwindcss.com/docs/caret-color)
- [Accent Color Documentation](https://tailwindcss.com/docs/accent-color)

## Detailed References

- [cursor.md](references/cursor.md) - Load when picking a specific cursor value (resize, zoom, grab, special cursors)
- [scroll.md](references/scroll.md) - Load when configuring scroll-snap, smooth scrolling, overscroll containment, or scrollbar styling
- [states.md](references/states.md) - Load when styling user-select, pointer-events, touch-action, resize, caret-color, or accent-color on form controls