Why Tailwind Works
Tailwind 将样式原子化，利于组合与复用。关键在于“约束”与“命名”的平衡，以保证一致性与可维护性。
约定与设计令牌（Design Tokens）
- 在
tailwind.config.ts统一配色、字体、间距与阴影。 - 通过 CSS 变量（如主题色）与设计系统对齐，避免散落的临时值。
组合而非复制
- 抽出可复用的 UI 片段为组件（如
Button、Card）。 - 对常用组合使用
@apply或者封装成组件 props，而非到处复制类名。
与组件库配合
- 使用 Radix UI、Headless UI 等提供无样式交互的库，与 Tailwind 组合灵活度最高。
性能与体积
- 确保 Purge/Content 配置正确，移除未使用类。
- 避免过度动态类名（如字符串拼接），必要时使用 safelist。
团队协作
- 约定组件/页面的 className 排序与分组（布局、尺寸、颜色、状态）。
- 在 PR 中关注一致性与可读性，而非仅关注“能否工作”。
结语
Tailwind 的威力来自规则化与组合。把常用样式沉淀为“约定 + 组件”，项目会越做越稳。