[!info] related notes

• 所属：设计系统
• 相关：心智模型 · React 组件设计 · Vue 组件设计

Tailwind 样式复用策略

这个概念为什么出现

当相同 UI 需要一起演进时，散落的重复标记会增加修改成本。少量相似 class 本身不代表已经需要抽象。

[!abstract] 一句话理解 重复 UI 抽组件；重复 token 进 theme；谨慎 @apply 回到 CSS 间接层。

按重复内容选择复用方式

1. UI 结构和行为重复：组件或模板
2. 有限外观差异：用 size / tone 映射完整类名
3. 多处共享的设计值：主题 token
4. 无法控制标记的第三方组件等场景：普通 CSS 或适量 @apply

反模式

• 过早 @apply 造语义类海洋
• 无约束字符串拼接
• 拼接类名片段，如 bg-${color}-600；构建时没有完整候选类，无法生成对应 CSS

条件分支可以包含完整类名，例如 active ? 'bg-blue-600' : 'bg-gray-600'。扫描器关心类名是否完整地出现在被扫描源码中，不是禁止 if/else。

v4 中，在 Vue / Svelte 的独立样式块或 CSS Modules 使用 @apply 时，可能需要 @reference 引用定义主题的主样式表；它只提供编译上下文，不重复输出那份 CSS。

本节总结

复用发生在组件与 token，不在“再发明一套 BEM 外壳”的自动反射。

自测题

1. 三处相同按钮该怎么办？

参考答案

若三处属于同一组件并需统一变化，可抽 Button 组件；如果只是偶然外观相似，保留重复或先共享 token，避免把不同职责绑在一起。

参考

• Styling with utility classes
• Source detection
• @apply 与 @reference