tailwindcss-interactivity_skill

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.