Tailwind 样式复用策略
在重复 utility 出现时如何用组件抽取、变体 props 与有限抽象保持可维护性。
#type / concept
#status / growing
#tech / dev / frontend
#resource / css
[!info] 关联笔记
- 所属：设计系统
- 相关：心智模型 · React 组件设计 · Vue 组件设计
Tailwind 样式复用策略
这个概念为什么出现
同一按钮 class 复制 20 次后，改圆角要全局搜。utility-first 不等于复制粘贴优先。
[!abstract] 一句话理解 重复 UI 抽组件；重复 token 进 theme；谨慎
@apply回到 CSS 间接层。
推荐顺序
- 组件封装（React/Vue）
- 变体 props：
size/tone - 设计 token
- 必要时 CSS 间接层
反模式
- 过早
@apply造语义类海洋 - 无约束字符串拼接
- 把业务 if/else 写进 class 字符串无法扫描
本节总结
复用发生在组件与 token，不在“再发明一套 BEM 外壳”的自动反射。
自测题
- 三处相同按钮该怎么办？
参考答案
抽 Button 组件，内部 utility + 变体 props。