Tailwind CSS
以实用类为核心的 CSS 框架，快速构建定制化界面。
项目概述
Tailwind CSS 通过组合式实用类完成界面样式，并在构建时生成实际用到的 CSS。它适合设计系统、产品界面和需要快速迭代的团队。
Tailwind CSS 由 Tailwind Labs 维护并采用 MIT 许可证。它会扫描 HTML、组件和模板中的类名，按需生成静态 CSS，不需要在浏览器中运行样式运行时。当前工具链支持通过 CSS 主题变量组织设计令牌，并可与 React、Vue、Svelte、Laravel 等技术栈配合。
主要特点
Tailwind CSS 最具代表性的设计与工程能力。
实用类优先
通过组合间距、颜色、布局和排版等低层实用类直接构建设计，无需为每个元素反复命名 CSS 类。
按需生成
扫描源码中实际使用的类名，只生成需要的静态 CSS，避免把完整工具样式库全部发送给浏览器。
响应式变体
使用 sm:、md:、lg: 等移动优先前缀，在同一组类名中清晰表达不同断点下的布局变化。
状态与模式
hover:、focus:、disabled:、dark: 等变体可以组合使用，覆盖交互状态、深色模式和复杂选择器。
主题变量
通过 @theme 定义颜色、字体、断点、阴影和圆角等设计令牌，并自动生成对应的实用类。
任意值与扩展
使用方括号语法处理合理的一次性值，也可以添加自定义 utility、variant 或兼容插件扩展能力。
适用场景
当团队需要快速构建高度定制的界面时，Tailwind CSS 尤其合适。
SaaS 与产品界面
适合仪表盘、设置页、表单和工作台等需要大量定制布局与交互状态的产品。
设计系统与组件库
主题变量可承载设计令牌，组件层负责沉淀按钮、输入框、卡片等可复用模式。
快速原型与 MVP
无需在 JSX、模板和样式文件之间频繁切换，能够快速验证界面结构与视觉方向。
组件化前端应用
与 React、Vue、Svelte 等组件模型配合时，较长的类名会自然封装在可复用组件内部。
营销站与内容页面
丰富的排版、网格、响应式和状态工具适合构建品牌化落地页、文档及内容模块。
优点与注意事项
技术选型不仅要看能力，也要理解它带来的团队成本。
主要优点
Tailwind CSS 擅长的地方
- 无需为大量局部样式设计类名，开发和调整速度快
- 不附带固定视觉风格，适合实现高度定制的产品设计
- 响应式、交互状态和深色模式使用统一的变体语法
- 按需生成静态 CSS，没有浏览器端样式运行时
- 生态成熟，编辑器提示、格式化和主流框架集成完善
需要注意
采用前应考虑的问题
复杂组件可能包含大量实用类，应通过组件封装、合理换行和统一排序保持可读性。
Tailwind 提供样式原语，不直接提供完整按钮、对话框或表格；交互行为和无障碍仍需自行实现或引入组件方案。
不要使用字符串拼接生成不完整类名，应将完整类名写在源码中并通过条件映射选择，否则构建工具可能无法识别。
可选值很多并不代表应该随意使用，团队仍应定义颜色、间距、字体和组件层级，避免界面不一致。
不同大版本的配置方式和插件集成可能不同，迁移前应核对官方升级指南与现有插件兼容性。
快速开始
按照当前官方方式，通过 Vite 插件创建一个最小 Tailwind CSS 项目。
bashnpm create vite@latest my-project
cd my-project
npm install
npm install tailwindcss @tailwindcss/vitetypescriptimport { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [tailwindcss()],
});css@import "tailwindcss";
@theme {
--color-brand-500: oklch(0.72 0.11 221);
}html<main class="grid min-h-screen place-items-center bg-slate-950 p-6">
<section class="max-w-md rounded-2xl bg-white p-8 shadow-xl">
<p class="text-sm font-medium text-brand-500">Tailwind CSS</p>
<h1 class="mt-2 text-3xl font-bold tracking-tight text-slate-950">
Build anything
</h1>
<button class="mt-6 rounded-lg bg-brand-500 px-4 py-2 text-white">
开始构建
</button>
</section>
</main>bashnpm run dev下一步：先用 @theme 定义颜色、字体、间距和圆角等设计令牌，再将重复出现的界面模式封装为组件；不要仅为了缩短 class 字符串而过早抽象。
类似项目
在 Utility CSS、CSS-in-JS 和预制组件方向上值得比较的方案。
Tailwind CSS vs Bootstrap
Tailwind CSS 和 Bootstrap 都能提升界面开发效率，但一个提供低层样式原语，另一个更强调开箱即用的组件与默认设计。
| 比较维度 | Tailwind CSS | Bootstrap |
|---|---|---|
| 核心定位 | Utility-first CSS 框架 | 组件优先的 CSS 与 JavaScript 工具包 |
| 默认视觉 | 不提供固定外观，由团队自行设计 | 提供一致且可立即使用的默认主题 |
| 开发方式 | 组合低层实用类构建组件 | 使用预制组件类和结构快速搭建 |
| 组件能力 | 不包含交互组件，需要自行封装或搭配组件库 | 内置导航、弹窗、下拉菜单等常用组件 |
| 定制方式 | 通过主题变量和实用类构建设计系统 | 通过 Sass 变量、CSS 变量和覆盖样式调整主题 |
| 最终风格 | 更容易形成独特品牌视觉 | 开发很快，但深度定制时需弱化默认 Bootstrap 风格 |
| 更适合 | 定制产品、设计系统和组件化应用 | 后台原型、标准业务页面和快速交付项目 |
如果需要高度定制的品牌界面、愿意在组件层沉淀设计规范，优先考虑 Tailwind CSS；如果希望依靠成熟的默认样式和预制组件快速完成标准页面，Bootstrap 往往更直接。
资料核验
版本、维护信息与本页采用的官方资料来源。
本次核验覆盖 Tailwind CSS 的核心定位、主要能力、官方入口与开源许可。项目版本持续更新，具体补丁版本、兼容性和迁移要求请在采用前继续核对官方发布记录。
官方仓库未归档，核验时最近可见的代码活动日期为 2026 年 7 月 16 日。该状态表示项目近期仍有公开维护活动，不代表固定发布频率或长期支持承诺。