组件边界、配置与扫描

Tailwind 需要扫描真实 class 字符串；动态拼接未出现在源码中的 class 可能不会生成。组件应通过有限 variant 映射保持可扫描，配置和插件要可追踪。

实验：故意动态拼接 class，观察生产构建缺失，再改为显式映射。

本节专属实验：从 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. 给出一个选择当前方案而不是替代方案的理由，并写下替代方案何时更合适。

查看本节答案

下一步

完成练习后打开本章答案，再回到Tailwind CSS课程总览。