什么时候用 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 类名组合过长时
• 需要频繁复用的复杂样式组合
• 需要特定数值或复杂效果时