Tailwind CSS

一、官方网址

Tailwind CSS 官方网站：https://tailwindcss.com

Tailwind CSS 是原子化（Utility-First）CSS 框架的领军项目，通过在 HTML 中组合实用类构建界面，配合即时编译（JIT）按需生成样式，近年来在前端社区流行度持续飙升。

二、核心功能

1. 实用类优先：flex、pt-4、text-center 等类名直接描述样式。
2. 按需生成：构建时扫描源码，只输出用到的 CSS，体积极小。
3. 设计令牌：间距、色板等体系化变量，视觉一致性天然保障。
4. 深度定制：tailwind.config 可扩展主题、插件与变体。
5. 响应式变体：sm:、md:、dark: 等前缀优雅处理响应式与暗色模式。

三、适用场景

• 组件化前端项目（React/Vue）
• 高度定制的设计系统落地
• 营销页与产品官网开发
• 追求极致 CSS 体积控制的项目

四、使用优势

• 开发效率高，无需离开 HTML
• 产物体积极小，性能优秀
• 设计约束内建，风格统一
• 生态繁荣，组件库众多

五、注意事项

• HTML 类名较长，可读性需要适应
• 需配置构建流程，不如传统 CSS 直接