什么时候用 Tailwind 什么时候用 CSS
结合自己开发项目，进行整理
对比图
| 特性/场景 | Tailwind CSS | 普通 CSS |
|---|---|---|
| 常见布局 | ✅ margin, padding, flex, grid | ⚠️ 可用但繁琐 |
| 基础样式 | ✅ 颜色、字体、间距等预设值 | ⚠️ 需要手动定义 |
| 响应式设计 | ✅ sm:, md:, lg: 前缀 | ⚠️ 需要写 media queries |
| 特定数值 | ❌ 受限于预设值 | ✅ 完全自定义 |
| 复杂动画 | ❌ 仅支持基础动画 | ✅ @keyframes 完全控制 |
| 自定义渐变 | ⚠️ 基础渐变支持 | ✅ 完全自定义 |
| 伪类选择器 | ⚠️ 基础支持 (hover:, focus:) | ✅ 完全支持 |
| CSS变量 | ❌ 不直接支持 | ✅ 原生支持 |
| 第三方组件样式覆盖 | ⚠️ 较难实现 | ✅ 容易实现 |
| 开发速度 | ✅ 快速 | ❌ 相对较慢 |
| 代码复用 | ❌ 需要重复类名 | ✅ 可通过类/变量复用 |
| 文件体积 | ✅ 按需生成，较小 | ⚠️ 需要手动优化 |
| 学习曲线 | ⚠️ 需要学习类名 | ✅ 标准 CSS 语法 |
| 代码可读性 | ⚠️ 类名可能很长 | ✅ 结构清晰 |
| 维护性 | ✅ 就地修改，直观 | ⚠️ 需要在不同文件间切换 |
最佳实践：
1、优先使用 Tailwind
- 对于 80% 的常见样式需求
- 当样式符合设计系统预设值时
2、结合使用
- 可以混合使用 Tailwind 和 CSS
- 根据具体需求选择最合适的方案
3、使用 CSS 的时机
- 当 Tailwind 类名组合过长时
- 需要频繁复用的复杂样式组合
- 需要特定数值或复杂效果时