Tailwind CSS 实战经验总结

Tailwind CSS 是一个功能类优先的 CSS 框架，使用一段时间后来分享一下我的实战经验。 ## 为什么选择 Tailwind？ - **开发速度快**：不需要在 CSS 文件间来回切换 - **一致性好**：预定义的设计系统保证了视觉一致性 - **响应式方便**：sm、md、lg 前缀非常直观 - **包体积小**：生产环境自动移除未使用的样式 ## 最佳实践 ### 1. 善用 @apply 提取重复样式 当发现某组类名反复出现时，可以用 @apply 提取成组件类： ```css .btn-primary { @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600; } ``` ### 2. 配置设计 Token 在 tailwind.config.js 中配置项目的颜色、字体、间距等设计 Token，保持全局一致。 ### 3. 响应式设计优先 始终从移动端开始设计，然后用 md:、lg: 前缀逐步适配更大的屏幕。 ## 总结 Tailwind CSS 极大提升了我的前端开发效率，推荐给所有前端开发者尝试。