传统写法要给每个元素想类名、写样式、维护命名空间。Tailwind 提供一套原子化的工具类，你直接在 HTML 里组合它们，样式内聚、命名消失、一致性强。
它真正的价值不是“少写代码”，而是“样式决策更一致”：间距、颜色、响应式全部来自同一套设计令牌。
认知误区：Tailwind 不是“不用写 CSS”，而是“用统一令牌代替零散 CSS”。它最适合有设计规范的项目。
常用能力速览。
间距/颜色/排版/布局全覆盖。
sm:/md:/lg: 按断点组合。
dark: 前缀一键适配。
自定义颜色/字体/断点。
仅生成用到的类，体积小。
@apply 抽取可复用样式。
从引入到规范。
安装 Tailwind，配置内容扫描路径与主题令牌。
吃透布局、间距、颜色、排版常用类，形成肌肉记忆。
用 @apply 与组件封装沉淀团队规范，避免类名满天飞。
两种范式对比。
| 维度 | Tailwind | 传统 CSS |
|---|---|---|
| 类名命名 | 无需自创命名 | 需语义化命名 |
| 一致性 | 令牌驱动、强一致 | 依赖自觉 |
| 可复用 | 组合式复用 | 类/组件复用 |
| 体积 | 按需生成、小 | 取决于书写 |
| 上手曲线 | 需转变心智 | 无门槛 |
把重复组合用 @apply 抽成组件类；核心是让常用模式有语义名字，零散场景用原子类。
能。Tailwind 负责布局与通用样式，组件库负责交互组件，注意命名空间与样式覆盖顺序。
JIT 只生成源码里完整出现的类名。不要动态拼接，用完整类名或 safelist 声明。
可以渐进引入，新页面用 Tailwind，旧页面保留原样式，逐步迁移。
