mcpField
T
tailwindcss-interactivity

tailwindcss-interactivity

github.com/fusengine设计与 UI3445 次安装2 周前更新
代码仓库

关于 tailwindcss-interactivity

面向交互界面开发者的 Tailwind CSS v4.3 工具类参考技能，涵盖光标、滚动、选择、触控及表单控件样式，并介绍状态变体。

主要功能

  1. 01光标与缩放工具类
  2. 02滚动、吸附与滚动条样式
  3. 03文本选择与指针事件
  4. 04触控行为与元素缩放
  5. 05插入符及表单强调色
  6. 06悬停、聚焦、激活和禁用变体

适用场景

  1. 01设置控件的光标外观
  2. 02配置滚动和吸附行为
  3. 03调整文本选择与触控交互
  4. 04设置输入框及表单控件指示样式

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/tailwindcss-interactivity确认已加载。

详细介绍

Tailwind CSS v4.3 交互实用工具完整参考：`cursor-*`（标准、调整大小、缩放、抓取和特殊光标）、滚动行为与吸附（`scroll-smooth`、`scroll-snap-type`/`-align`/`-stop`、`overscroll-*`、自 v4.2 起支持逻辑属性 `scroll-mbs-*`/`scroll-pbs-*`）、滚动条样式（`scrollbar-*`、`scrollbar-thumb-*`/`scrollbar-track-*`、自 v4.3 起支持 `scrollbar-gutter-*`）、用于控制文本选择的 `select-*`、`pointer-events-*`、`touch-*` 操作实用工具、`resize-*`、用于输入光标的 `caret-*` 颜色，以及用于复选框/单选按钮/范围输入的 `accent-*` 颜色。

还介绍了伪类状态变体（hover:、focus:、active:、disabled:），以及它们与响应式/深色模式前缀的组合用法。

Tailwind CSS 交互实用工具

Tailwind CSS v4.3 中用于控制用户交互行为和光标样式的全面实用工具。

类别

光标实用工具

控制元素的光标外观

  • cursor-* - 标准光标（auto、default、pointer、wait、text、move、help、not-allowed、none 等）
  • 支持调整大小光标（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-in、zoom-out）
  • 抓取光标（grab、grabbing）
  • 特殊光标（context-menu、progress、cell、crosshair、vertical-text、alias、copy、no-drop、all-scroll）
滚动行为与吸附

管理滚动和吸附行为

  • scroll-smooth - 启用平滑滚动
  • scroll-snap-type - 定义吸附容器行为（snap-none、snap-x、snap-y、snap-both）
  • scroll-snap-align - 设置吸附点位置（snap-start、snap-center、snap-end）
  • scroll-snap-stop - 强制在吸附点停止（snap-always、snap-normal）
  • overscroll-behavior - 控制过度滚动区域（overscroll-auto、overscroll-contain、overscroll-none）
  • 支持按轴区分的变体（x、y）
  • 逻辑块轴滚动边距/内边距（自 v4.2 起）：scroll-mbs-*、scroll-mbe-*、scroll-pbs-*、scroll-pbe-*
滚动条样式（自 v4.3 起）
  • scrollbar-auto、scrollbar-thin、scrollbar-none - scrollbar-width
  • scrollbar-thumb-*、scrollbar-track-* - scrollbar-color（支持不透明度修饰符，例如 scrollbar-thumb-slate-900/60）
  • scrollbar-gutter-auto、scrollbar-gutter-stable、scrollbar-gutter-both - 预留滚动条空间，避免布局偏移
用户选择

控制文本选择行为

  • select-none - 禁止选择文本
  • select-text - 允许选择文本
  • select-all - 点击时选择全部文本
  • select-auto - 浏览器默认选择行为
指针事件

控制元素的交互性

  • pointer-events-none - 元素不可交互
  • pointer-events-auto - 元素可交互（默认）
触摸操作

定义如何处理触摸手势

  • touch-auto - 浏览器默认触摸处理方式
  • touch-none - 禁用所有触摸行为
  • touch-pan-x - 仅允许水平平移
  • touch-pan-y - 仅允许垂直平移
  • touch-manipulation - 允许平移和缩放（不允许双击缩放）
  • 支持方向变体（pan-up、pan-down、pan-left、pan-right、pinch-zoom）
调整大小

控制元素的大小调整行为

  • resize-none - 禁止调整大小
  • resize - 允许沿两个方向调整大小
  • resize-y - 仅允许垂直调整大小
  • resize-x - 仅允许水平调整大小
插入符颜色

设置文本输入光标颜色

  • caret-* - 输入框/文本区域光标的颜色实用工具
  • 支持所有 Tailwind 颜色和不透明度修饰符
  • 全面支持深色模式
强调色

为表单控件设置强调色

  • accent-* - 复选框、单选按钮和范围输入的颜色实用工具
  • 支持所有 Tailwind 颜色和不透明度修饰符
  • 全面支持深色模式

伪类状态变体

使用 hover:、focus:、active: 和 disabled: 前缀，根据交互状态为元素设置样式。

<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: - 鼠标悬停时生效
  • focus: - 元素获得键盘或指针焦点时生效
  • active: - 点击或轻触期间生效
  • disabled: - 元素带有 disabled 属性时生效
  • 可与响应式和深色模式前缀组合使用：md:hover:bg-blue-700、dark:hover:bg-blue-400

资源

详细参考

  • cursor.md - 选择特定光标值（调整大小、缩放、抓取、特殊光标）时加载
  • scroll.md - 配置滚动捕捉、平滑滚动、过度滚动限制或滚动条样式时加载
  • states.md - 为表单控件设置用户选择、指针事件、触摸操作、调整大小、插入符颜色或强调色样式时加载

评论

支持 Markdown