动画、dark 与 reduced-motion

动画和主题属于用户偏好边界；通过 variants 和 media query 提供回退。练习：prefers-reduced-motion 下关闭非必要动效。

本节专属实验：从 utility 到产物

用同一个组件分别测试静态类名、动态拼接类名和主题 token。执行生产构建后检查生成 CSS 是否包含实际使用的类，删除 source 路径或 safelist 后记录缺失结果。

<button class="bg-sky-600 hover:bg-sky-700 text-white px-4 py-2">保存</button>

预期：状态变体由 CSS 选择器表达，动态 class 必须能被扫描或显式 safelist；只在开发服务器可见不代表生产包包含它。

可运行实验

1. 检查动态拼接类名是否能被 content/source 扫描发现。
2. 用主题令牌实现同一组件的亮色、暗色和高对比度状态。
3. 构建生产包并比较未使用类、组件抽象和 safelist 对体积的影响。

实验记录至少包含：环境版本、输入序列、预期结果、实际结果、失败截图或日志，以及修复后再次运行的结果。

练习

1. 用自己的话画出本篇概念的依赖图，并标出一个可能产生重复执行或竞态的节点。
2. 写一个最小测试覆盖成功、失败、取消/卸载三条路径；测试应断言可观察结果，而不是内部实现调用次数。
3. 给出一个选择当前方案而不是替代方案的理由，并写下替代方案何时更合适。

查看本节答案

下一步

完成练习后阅读本章答案。