Tailwind CSS - 交互性

Tailwind CSS：交互性指南

交互性赋予用户界面生命。在 Tailwind CSS 中，交互性主要通过**状态变体（state variants）**处理。这些是特殊的修饰符（prefixes），如 hover:、focus: 和 active:，你可以将其添加到几乎任何工具类中，以便在用户与元素交互时有条件地应用样式。

核心状态变体

• hover：当用户光标悬停在元素上方时应用。
• focus：当元素被选中时应用，通常通过键盘（Tab 键）或点击输入字段实现。
• active：当元素被激活时应用，例如，当按钮或链接被点击时。
• disabled：应用于具有 disabled 属性的表单元素，允许你设置其非活动状态的样式。
• focus-within：当父元素的任何后代获得焦点时，应用于该父元素。非常适合为表单组（form groups）设置样式。
• focus-visible：一个比 focus 更智能的版本，通常只为键盘用户应用样式，从而改善可访问性（accessibility）。

实际示例：创建交互式按钮

让我们创建一个按钮，它在悬停和活动状态下改变外观，并添加平滑过渡以使改变不那么突兀。

index.html

<!-- To run this, use the same project setup as the previous chapters -->
<div class="flex justify-center items-center h-screen bg-slate-100">
  <button class="
    /* Base Styles */
    bg-blue-600 text-white font-bold py-3 px-6 rounded-lg shadow-md

    /* Hover State */
    hover:bg-blue-700 hover:shadow-lg

    /* Active State */
    active:bg-blue-800 active:translate-y-px

    /* Focus State (for accessibility) */
    focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500

    /* Transitions */
    transition-all duration-150 ease-in-out
  ">
    Click Me
  </button>
</div>

解释

• 基本样式（Base Styles）：这是按钮的默认外观。
• hover:bg-blue-700：悬停时，背景颜色变暗。
• active:translate-y-px：点击时，按钮向下移动 1 像素，给人一种令人满意的“按下”感。
• focus:*：这些类在通过键盘聚焦按钮时提供清晰的视觉轮廓，这对于可访问性至关重要。
• transition-all：此类对状态之间发生变化的所有属性（background-color、box-shadow、transform）应用过渡。duration-150 设置速度。

交互性工具类参考

除了状态变体，Tailwind 还包含一套用于控制特定交互属性的工具。以下是关键主题的摘要，每个主题都值得单独深入教程。

主题	描述	示例用例
强调色（Accent Color）	控制复选框和单选按钮等 UI 元素的颜色。	class=“accent-pink-500”
外观（Appearance）	重置表单元素的本地浏览器样式。	class=“appearance-none”
光标（Cursor）	悬停在元素上方时更改鼠标光标样式。	class=“cursor-pointer”
插入符号颜色（Caret Color）	设置输入框中闪烁文本光标的颜色。	class=“caret-blue-500”
指针事件（Pointer Events）	控制元素是否可以成为鼠标事件的目标。	class=“pointer-events-none”
调整大小（Resize）	控制用户是否可以调整文本区域（textarea）等元素的大小。	class=“resize-y”
滚动行为（Scroll Behavior）	控制滚动是即时还是平滑。	class=“scroll-smooth”
滚动外边距/内边距（Scroll Margin/Padding）	滚动到带有锚点链接的元素时添加偏移。	class=“scroll-mt-16”
滚动捕捉（Scroll Snap）	创建滚动捕捉式轮播图或页面部分。	class=“snap-y snap-mandatory”
触摸动作（Touch Action）	优化触摸交互，如捏合缩放。	class=“touch-pan-y”
用户选择（User Select）	控制用户是否可以在元素内选择文本。	class=“select-none”
将改变（Will Change）	浏览器动画的性能优化提示。	class=“will-change-transform”

交互性最佳实践

• 始终包含焦点状态（Focus States）： 很容易只为 hover 设计，但键盘用户依靠 focus 状态进行导航。始终为所有交互元素提供清晰的 focus 样式。
• 使用 focus-visible： 对于仅为键盘导航者出现的、侵入性较小的焦点样式，优先使用 focus-visible 变体（例如，focus-visible:ring-2）。
• 提供反馈： 使用 active 状态为用户提供即时反馈，表明他们的点击已注册。
• 保持过渡迅速： 过渡应足够快以提供响应感。通常，100 毫秒到 300 毫秒之间的持续时间是有效的。避免在交互元素上使用过长、缓慢的动画。