TailwindCSS 路线 06：动效与交互反馈——让 UI 有“质感”但不油腻

很多 UI “看起来廉价”，问题不是配色，而是缺少一致的交互反馈：hover 没反应、点击无确认、加载没状态。

这一篇的目标：建立一套小而一致的动效规范。

01 目标与验收#

目标：为 Button / Card / Modal 三类组件建立统一反馈。

验收：

• hover：背景/边框/阴影有轻变化
• active：轻微缩放（可选）
• focus：清晰的 focus ring
• motion-reduce：减少动效时仍可用（不依赖动画表达信息）

02 建议的“交互三件套”#

你会在本仓库里频繁看到类似组合（这是好习惯）：

• transition-all duration-200
• hover:shadow-sm
• active:scale-[0.98]

关键点：不要到处写不同的 duration。统一是高级感的来源。

03 练习：给一个列表项加“可点击反馈”#

把一个列表项做成 Link（或 button），满足：

• hover 边框出现
• hover 背景略亮
• focus-visible ring
• 点击 active 微缩

再加上：

• motion-reduce:transition-none（动效减少时不强制动画）

04 小结#

动效的价值是“可感知的反馈”，不是花哨。下一篇我们进入主题系统：当你要支持多主题/品牌色/自定义配色时，Tailwind + CSS 变量如何演进成真正的设计系统。