mcpField
T
tailwindcss-interactivity

tailwindcss-interactivity

github.com/fusengineDesign & UI3445 installsUpdated 2w ago
Repository

About tailwindcss-interactivity

tailwindcss-interactivity is a reference skill for Tailwind CSS v4.3 utilities that control interaction, scrolling, and cursor styles. It also covers pseudo-class variants and their use with responsive and dark-mode prefixes.

Key features

  1. 01Cursor style utilities
  2. 02Scroll behavior and snap utilities
  3. 03Scrollbar styling utilities
  4. 04Selection, pointer, and touch controls
  5. 05Resize, caret, and accent colors
  6. 06Interaction state variants

Use cases

  1. 01Set cursor and selection behavior
  2. 02Configure smooth scrolling and snap points
  3. 03Style scrollbars and prevent layout shifts
  4. 04Apply interaction states across responsive and dark themes

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/fusengine/agents --skill tailwindcss-interactivity

After installing, type/tailwindcss-interactivityin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
cursor.md
scroll.md
states.md

Details

From the project README
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.

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.

<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

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, overscroll containment, or scrollbar styling
  • states.md - Load when styling user-select, pointer-events, touch-action, resize, caret-color, or accent-color on form controls

Comments

Markdown supported