playbooks

home / skills / fusengine / agents / tailwindcss-interactivity

tailwindcss-interactivity skill

/plugins/tailwindcss/skills/tailwindcss-interactivity

This skill helps you implement Tailwind CSS interactivity utilities to enhance user experience with cursor, scroll, selection, and input styling.

npx playbooks add skill fusengine/agents --skill tailwindcss-interactivity

Review the files below or copy the command above to add this skill to your agents.

Files (4)
SKILL.md
3.5 KB
---
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."
user-invocable: false
---

# 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 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)

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

## 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)
- [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)

Overview

This skill provides a collection of Tailwind CSS v4.1 interactivity utilities to control cursor appearance, scrolling, selection, pointer behavior, touch actions, resizing, caret color, and accent color. It consolidates the relevant classes and variants so you can apply consistent, accessible interaction patterns across components. The utilities mirror Tailwind conventions and support color and dark-mode variants where applicable.

How this skill works

The skill lists and documents utility classes like cursor-*, scroll-smooth, scroll-snap-*, select-*, pointer-events-*, touch-*, resize-*, caret-*, and accent-*. It explains the intent of each class group, axis-specific and directional variants, and which classes affect form controls, inputs, and scroll containers. Use it as a quick reference when choosing classes to change interaction behavior or to ensure consistent UX across breakpoints and dark mode.

When to use it

  • Change pointer style for affordances (cursor-*).
  • Enable smooth scrolling and define snap behavior for scroll containers.
  • Prevent or allow text selection on interactive elements.
  • Disable pointer events for overlaying UI or re-enable default behavior.
  • Control touch gesture handling on mobile (touch-*).
  • Style input caret and form control accents for consistent branding and dark mode.

Best practices

  • Prefer semantic cursor classes (e.g., cursor-pointer for clickable items) rather than custom CSS to maintain consistency.
  • Use scroll-snap and scroll-smooth on grouped carousels and horizontal lists to improve discoverability.
  • Avoid globally disabling selection; restrict select-none to UI elements where selection is harmful.
  • Use pointer-events-none only when an element should be visually present but non-interactive; remove for accessibility testing.
  • Apply touch-action rules selectively to interactive regions to avoid breaking native gestures globally.
  • Use caret-* and accent-* with accessible contrast and test in dark mode to ensure visibility.

Example use cases

  • Add cursor-grab and cursor-grabbing for draggable carousel handles.
  • Apply scroll-smooth and snap-x with snap-center on a horizontal product scroller.
  • Use select-none on a custom button or icon to prevent accidental text selection.
  • Set pointer-events-none on a decorative overlay while enabling pointer-events-auto on child controls.
  • Use touch-pan-x on a horizontally swipable component to prevent vertical page scroll interference.
  • Set caret-indigo-500 and accent-indigo-500 to align form inputs with brand color in both light and dark themes.

FAQ

Do caret-* and accent-* support all Tailwind colors?

Yes. They support the full Tailwind color palette and opacity modifiers, including dark-mode variants.

When should I use pointer-events versus aria-hidden for disabling interactivity?

pointer-events-none prevents mouse/touch interaction but not assistive technology. Use aria-hidden or proper ARIA roles to hide content from screen readers when needed.