一、什么是 Tailwind CSS
Tailwind CSS 是一个实用优先的 CSS 框架，与 Bootstrap 等组件库不同，它不提供预定义的组件，而是提供低级别的实用类，让您能够快速构建完全自定义的设计。
主要特点：
实用优先：通过组合简单类名构建复杂界面
响应式设计：内置响应式前缀系统
高度可定制：可完全自定义设计系统
生产优化：自动移除未使用的 CSS
二、安装与配置
1.通过 CDN 使用（简单但有限制）
html<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.tailwindcss.com"></script>
</head>
<body><!-- 您的 HTML 内容 -->
</body>
</html>
2.通过 npm 安装（推荐方式）
bashnpm install -D tailwindcss
npx tailwindcss init
配置 tailwind.config.js：
javascript/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./src/**/*.{html,js}"],theme: {extend: {},},plugins: [],
}
创建 CSS 文件（如 src/input.css）：
css@tailwind base;
@tailwind components;
@tailwind utilities;
构建 CSS：
bashnpx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
三、核心概念
1.断点前缀：
| 断点前缀 | 最小宽度 | 典型设备 | 使用场景 |
|---|
sm: | 640px | 小屏手机（横屏） | 小型平板、大屏手机 |
md: | 768px | 平板（竖屏） | 小型笔记本、平板 |
lg: | 1024px | 平板（横屏）、笔记本 | 桌面端设计 |
xl: | 1280px | 台式机、大屏笔记本 | 大屏桌面端 |
2xl: | 1536px | 大屏显示器 | 超大屏幕 |
2.状态前缀：
2.1交互状态
| 状态前缀 | 触发条件 | 使用示例 |
|---|
hover: | 鼠标悬停 | hover:bg-blue-600 |
focus: | 获取焦点 | focus:ring-2 focus:ring-blue-500 |
active: | 激活状态（点击时） | active:scale-95 |
visited: | 访问过的链接 | visited:text-purple-600 |
2.2表单状态
| 状态前缀 | 触发条件 | 使用示例 |
|---|
checked: | 复选框/单选选中 | checked:bg-blue-500 |
disabled: | 禁用状态 | disabled:opacity-50 |
required: | 必填字段 | required:border-red-500 |
invalid: | 输入无效 | invalid:border-red-500 |
valid: | 输入有效 | valid:border-green-500 |
placeholder: | 占位符文本 | placeholder:text-gray-400 |
2.3分组状态
| 状态前缀 | 触发条件 | 使用示例 |
|---|
group-hover: | 父级悬停时 | group-hover:opacity-100 |
group-focus: | 父级聚焦时 | group-focus:visible |
group-active: | 父级激活时 | group-active:block |
2.4兄弟状态
| 状态前缀 | 触发条件 | 使用示例 |
|---|
peer-hover: | 前一个兄弟悬停 | peer-hover:bg-gray-100 |
peer-focus: | 前一个兄弟聚焦 | peer-focus:border-blue-500 |
peer-checked: | 前一个兄弟选中 | peer-checked:bg-blue-500 |
2.5结构选择器
| 状态前缀 | 触发条件 | 使用示例 |
|---|
first: | 第一个子元素 | first:rounded-t |
last: | 最后一个子元素 | last:rounded-b |
odd: | 奇数子元素 | odd:bg-gray-50 |
even: | 偶数子元素 | even:bg-white |
only: | 唯一子元素 | only:block |
empty: | 空元素 | empty:hidden |
2.6媒体查询状态
| 状态前缀 | 触发条件 | 使用示例 |
|---|
motion-safe: | 用户不偏好减少动画 | motion-safe:animate-spin |
motion-reduce: | 用户偏好减少动画 | motion-reduce:animate-none |
dark: | 深色模式 | dark:bg-gray-800 |
print: | 打印样式 | print:text-black |
3. 间距系统
Tailwind 使用基于 4px 的缩放系统：
3.1百分比宽度
| 类名 | 宽度 | 等价 CSS |
|---|
w-1/2 | 50% | width: 50%; |
w-1/3 | 33.333% | width: 33.333%; |
w-2/3 | 66.666% | width: 66.666%; |
w-1/4 | 25% | width: 25%; |
w-2/4 | 50% | width: 50%; |
w-3/4 | 75% | width: 75%; |
w-full | 100% | width: 100%; |
w-screen | 100vw | width: 100vw; |
3.2固定宽度（基于 rem）
| 类名 | 宽度 | 像素值 |
|---|
w-0 | 0rem | 0px |
w-1 | 0.25rem | 4px |
w-2 | 0.5rem | 8px |
w-4 | 1rem | 16px |
w-8 | 2rem | 32px |
w-16 | 4rem | 64px |
w-32 | 8rem | 128px |
w-64 | 16rem | 256px |
3.3内边距 (Padding)
| 类名 | 作用方向 | 等价 CSS |
|---|
p-4 | 所有方向 | padding: 1rem; |
px-4 | 水平方向 | padding-left: 1rem; padding-right: 1rem; |
py-4 | 垂直方向 | padding-top: 1rem; padding-bottom: 1rem; |
pt-4 | 顶部 | padding-top: 1rem; |
pb-4 | 底部 | padding-bottom: 1rem; |
pl-4 | 左侧 | padding-left: 1rem; |
pr-4 | 右侧 | padding-right: 1rem; |
3.4外边距 (Margin)
| 类名 | 作用方向 | 等价 CSS |
|---|
m-4 | 所有方向 | margin: 1rem; |
mx-4 | 水平方向 | margin-left: 1rem; margin-right: 1rem; |
my-4 | 垂直方向 | margin-top: 1rem; margin-bottom: 1rem; |
mt-4 | 顶部 | margin-top: 1rem; |
mb-4 | 底部 | margin-bottom: 1rem; |
ml-4 | 左侧 | margin-left: 1rem; |
mr-4 | 右侧 | margin-right: 1rem; |
| 类名 | 效果 | 等价 CSS |
|---|
mx-auto | 水平方向自动外边距 | margin-left: auto; margin-right: auto; |
my-auto | 垂直方向自动外边距 | margin-top: auto; margin-bottom: auto; |
m-auto | 所有方向自动外边距 | margin: auto; |
ml-auto | 左侧自动外边距 | margin-left: auto; |
mr-auto | 右侧自动外边距 | margin-right: auto; |
3.5最大宽度系统：
固定宽度值
| 类名 | 最大宽度 | 像素值 | 使用场景 |
|---|
max-w-0 | 0rem | 0px | 完全收起 |
max-w-none | none | 无限制 | 移除最大宽度 |
max-w-xs | 20rem | 320px | 超小内容 |
max-w-sm | 24rem | 384px | 小内容块 |
max-w-md | 28rem | 448px | 中等内容 |
max-w-lg | 32rem | 512px | 大内容块 |
max-w-xl | 36rem | 576px | 超大内容 |
max-w-2xl | 42rem | 672px | 2倍大内容 |
max-w-3xl | 48rem | 768px | 3倍大内容 |
max-w-4xl | 56rem | 896px | 4倍大内容 |
max-w-5xl | 64rem | 1024px | 5倍大内容 |
max-w-6xl | 72rem | 1152px | 6倍大内容 |
max-w-7xl | 80rem | 1280px | 7倍大内容 |
其他宽度类型
| 类名 | 效果 | 使用场景 |
|---|
max-w-full | 100% | 不超过父容器宽度 |
max-w-min | min-content | 最小内容宽度 |
max-w-max | max-content | 最大内容宽度 |
max-w-fit | fit-content | 适合内容宽度 |
max-w-prose | 65ch | 理想阅读宽度 |
max-w-screen-sm | 640px | 小屏幕断点 |
max-w-screen-md | 768px | 中等屏幕断点 |
max-w-screen-lg | 1024px | 大屏幕断点 |
4. 颜色系统
4.1最常用的颜色属性：
| 类别 | 常用类 | 用途 |
|---|
| 文本 | text-gray-900, text-gray-600, text-blue-600 | 内容层次 |
| 背景 | bg-white, bg-gray-100, bg-blue-500 | 容器背景 |
| 边框 | border-gray-300, border-blue-500 | 边框线条 |
| 状态 | bg-green-100, bg-red-100, bg-yellow-100 | 状态提示 |
4.2数字越大 = 颜色越深
50 → 100 → 200 → 300 → 400 → 500 → 600 → 700 → 800 → 900
最浅 ←─────────────────────────────────────────────→ 最深
4.3常用搭配
50-100：背景色、悬停状态
200-400：边框、分隔线
500-600：主要品牌色、按钮
700-900：深色文本、重要内容
5.字体排版
5.1字体大小 (Font Size)
| 类名 | 字体大小 | 行高 | 使用场景 |
|---|
text-xs | 0.75rem | 1rem | 辅助文字、标签 |
text-sm | 0.875rem | 1.25rem | 正文小字、描述 |
text-base | 1rem | 1.5rem | 默认正文大小 |
text-lg | 1.125rem | 1.75rem | 大正文、次要标题 |
text-xl | 1.25rem | 1.75rem | 小标题 |
text-2xl | 1.5rem | 2rem | 中等标题 |
text-3xl | 1.875rem | 2.25rem | 大标题 |
text-4xl | 2.25rem | 2.5rem | 超大标题 |
text-5xl | 3rem | 1 | 页面主标题 |
text-6xl | 3.75rem | 1 | 展示标题 |
text-7xl | 4.5rem | 1 | 特大标题 |
text-8xl | 6rem | 1 | 巨幅标题 |
text-9xl | 8rem | 1 | 最大标题 |
5.2字体粗细 (Font Weight)
| 类名 | 粗细值 | 使用场景 |
|---|
font-thin | 100 | 极细字体 |
font-extralight | 200 | 超细字体 |
font-light | 300 | 细字体 |
font-normal | 400 | 正常字体（默认） |
font-medium | 500 | 中等粗细 |
font-semibold | 600 | 半粗体 |
font-bold | 700 | 粗体 |
font-extrabold | 800 | 超粗体 |
font-black | 900 | 最粗体 |
5.3文本对齐 (Text Alignment)
| 类名 | 对齐方式 | 使用场景 |
|---|
text-left | 左对齐 | 默认对齐方式 |
text-center | 居中对齐 | 标题、按钮文字 |
text-right | 右对齐 | 数字、时间 |
text-justify | 两端对齐 | 长篇文章 |
5.4行高 (Line Height)
| 类名 | 行高值 | 使用场景 |
|---|
leading-3 | 0.75rem | 紧凑行高 |
leading-4 | 1rem | 紧密行高 |
leading-5 | 1.25rem | 默认行高 |
leading-6 | 1.5rem | 舒适行高 |
leading-7 | 1.75rem | 宽松行高 |
leading-8 | 2rem | 大段文本 |
leading-9 | 2.25rem | 标题行高 |
leading-10 | 2.5rem | 展示文本 |
leading-none | 1 | 无行高 |
leading-tight | 1.25 | 紧凑 |
leading-snug | 1.375 | 较紧凑 |
leading-normal | 1.5 | 正常 |
leading-relaxed | 1.625 | 宽松 |
leading-loose | 2 | 很宽松 |
5.5字母间距 (Letter Spacing)
| 类名 | 间距值 | 使用场景 |
|---|
tracking-tighter | -0.05em | 更紧凑 |
tracking-tight | -0.025em | 紧凑 |
tracking-normal | 0em | 正常（默认） |
tracking-wide | 0.025em | 宽松 |
tracking-wider | 0.05em | 更宽松 |
tracking-widest | 0.1em | 最宽松 |
5.6文本装饰 (Text Decoration)
| 类名 | 效果 | 使用场景 |
|---|
underline | 下划线 | 链接、重点 |
line-through | 删除线 | 原价、已取消 |
no-underline | 无装饰 | 移除默认下划线 |
overline | 上划线 | 特殊标注 |
5.7文本变形 (Text Transform)
| 类名 | 效果 | 使用场景 |
|---|
uppercase | 全部大写 | 标签、导航项 |
lowercase | 全部小写 | 特殊风格 |
capitalize | 首字母大写 | 标题、名称 |
normal-case | 正常大小写 | 恢复默认 |
5.8文本溢出 (Text Overflow)
| 类名 | 效果 | 使用场景 |
|---|
truncate | 单行截断 | 标题、列表项 |
overflow-ellipsis | 显示省略号 | 文本截断 |
overflow-clip | 直接裁剪 | 严格截断 |
5.9字体样式 (Font Style)
| 类名 | 效果 | 使用场景 |
|---|
italic | 斜体 | 引用、强调 |
not-italic | 非斜体 | 恢复正常 |
5.10垂直对齐 (Vertical Align)
| 类名 | 效果 | 使用场景 |
|---|
align-baseline | 基线对齐 | 默认对齐 |
align-top | 顶部对齐 | 图标对齐 |
align-middle | 居中对齐 | 表格单元格 |
align-bottom | 底部对齐 | 底部对齐 |
align-text-top | 文本顶部 | 文本对齐 |
align-text-bottom | 文本底部 | 文本对齐 |
5.11空白处理 (Whitespace)
| 类名 | 效果 | 使用场景 |
|---|
whitespace-normal | 正常空白 | 默认处理 |
whitespace-nowrap | 不换行 | 单行文本 |
whitespace-pre | 保留空白 | 代码显示 |
whitespace-pre-line | 保留换行 | 诗歌、地址 |
whitespace-pre-wrap | 保留空白和换行 | 代码块 |
5.12文字换行 (Word Break)
| 类名 | 效果 | 使用场景 |
|---|
break-normal | 正常换行 | 默认行为 |
break-words | 单词内换行 | 长单词处理 |
break-all | 任意位置换行 | 无空格文本 |
6.圆角相关属性：
6.1基础圆角类
| 类名 | 圆角值 | 效果 | 使用场景 |
|---|
rounded-none | 0px | 无圆角 | 直角设计 |
rounded-sm | 0.125rem | 小圆角 | 轻微圆润 |
rounded | 0.25rem | 默认圆角 | 标准按钮、卡片 |
rounded-md | 0.375rem | 中等圆角 | 常用圆角 |
rounded-lg | 0.5rem | 大圆角 | 明显圆角效果 |
rounded-xl | 0.75rem | 超大圆角 | 突出圆角 |
rounded-2xl | 1rem | 2倍大圆角 | 显著圆角 |
rounded-3xl | 1.5rem | 3倍大圆角 | 非常圆润 |
rounded-full | 9999px | 完全圆角 | 圆形、药丸形状 |
6.2方向性圆角
| 类名 | 作用位置 | 效果 |
|---|
rounded-t | 顶部 | 上边两个角 |
rounded-r | 右侧 | 右边两个角 |
rounded-b | 底部 | 下边两个角 |
rounded-l | 左侧 | 左边两个角 |
6.3单个角圆角
| 类名 | 作用位置 | 效果 |
|---|
rounded-tl | 左上角 | 左上角圆角 |
rounded-tr | 右上角 | 右上角圆角 |
rounded-br | 右下角 | 右下角圆角 |
rounded-bl | 左下角 | 左下角圆角 |
7.常用图标
7.1界面图标 (UI Icons)
| 图标类名 | 说明 | 用途 |
|---|
fa-home | 首页 | 导航、主页 |
fa-user | 用户 | 用户管理、个人中心 |
fa-cog | 齿轮 | 设置、配置 |
fa-bell | 铃铛 | 通知、提醒 |
fa-search | 搜索 | 搜索功能 |
fa-bars | 汉堡菜单 | 移动端导航 |
fa-times | 关闭 | 关闭、取消 |
fa-edit | 编辑 | 编辑操作 |
fa-trash | 删除 | 删除操作 |
fa-plus | 加号 | 添加、新建 |
fa-minus | 减号 | 减少、收缩 |
7.2文件操作
| 图标类名 | 说明 | 用途 |
|---|
fa-file | 文件 | 文档、文件 |
fa-folder | 文件夹 | 目录、分类 |
fa-save | 保存 | 保存操作 |
fa-download | 下载 | 下载文件 |
fa-upload | 上传 | 上传文件 |
7.3箭头方向
| 图标类名 | 说明 | 用途 |
|---|
fa-arrow-left | 左箭头 | 返回、后退 |
fa-arrow-right | 右箭头 | 前进、下一步 |
fa-arrow-up | 上箭头 | 向上、顶部 |
fa-arrow-down | 下箭头 | 向下、展开 |
fa-chevron-left | 左三角箭头 | 折叠、收起 |
fa-chevron-right | 右三角箭头 | 展开、更多 |
7.4状态指示
| 图标类名 | 说明 | 用途 |
|---|
fa-check | 对勾 | 完成、正确 |
fa-exclamation | 感叹号 | 警告、注意 |
fa-info | 信息 | 提示信息 |
fa-question | 问号 | 帮助、疑问 |
8.网格列数
| 类名 | 列数 | 等效 CSS |
|---|
grid-cols-1 | 1 列 | grid-template-columns: repeat(1, minmax(0, 1fr)) |
grid-cols-2 | 2 列 | grid-template-columns: repeat(2, minmax(0, 1fr)) |
grid-cols-3 | 3 列 | grid-template-columns: repeat(3, minmax(0, 1fr)) |
grid-cols-4 | 4 列 | grid-template-columns: repeat(4, minmax(0, 1fr)) |
grid-cols-6 | 6 列 | grid-template-columns: repeat(6, minmax(0, 1fr)) |
grid-cols-12 | 12 列 | grid-template-columns: repeat(12, minmax(0, 1fr)) |
9.分割线类：
9.1分隔线类
| 类名 | 方向 | 等效 CSS |
|---|
divide-y | 垂直分隔 | > * + * { border-top: 1px solid } |
divide-x | 水平分隔 | > * + * { border-left: 1px solid } |
divide-y-0 | 移除垂直分隔 | > * + * { border-top: 0 } |
divide-x-0 | 移除水平分隔 | > * + * { border-left: 0 } |
9.2颜色变体
| 类名 | 颜色值 | 颜色 |
|---|
divide-gray-100 | #f3f4f6 | 很浅的灰色 |
divide-gray-200 | #e5e7eb | 浅灰色 |
divide-gray-300 | #d1d5db | 中等灰色 |
divide-blue-200 | #bfdbfe | 浅蓝色 |
divide-red-200 | #fecaca | 浅红色 |
10.其他属性
| 类名 | 效果 |
|---|
inset-y-0
| 在垂直方向上拉伸元素，使其顶部和底部都紧贴容器边缘 |
四、自定义配置
1.扩展主题
在 tailwind.config.js 中：
javascriptmodule.exports = {theme: {extend: {colors: {'brand': {100: '#f0f9ff',500: '#0ea5e9',900: '#0c4a6e',}},spacing: {'128': '32rem',}},},
}
2.添加自定义类
在 CSS 文件中：
css@layer components {.btn-primary {@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;}.card {@apply bg-white rounded-lg shadow-md p-6;}
}
五、最佳实践
1. 保持 HTML 整洁
html<!-- 推荐：使用有意义的类组合 -->
<button class="btn-primary">主要按钮</button><!-- 不推荐：类名过长 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">主要按钮</button>
2. 使用 @apply 提取重复样式
css@layer components {.btn {@apply font-bold py-2 px-4 rounded;}.btn-blue {@apply btn bg-blue-500 text-white;}.btn-blue:hover {@apply bg-blue-700;}
}
3. 利用 IDE 插件
安装 Tailwind CSS IntelliSense 插件，获得自动完成和语法高亮。
4. 优化生产构建
确保在生产环境中使用 PurgeCSS 移除未使用的样式：
javascript// tailwind.config.js
module.exports = {content: ['./src/**/*.html','./src/**/*.js',// 添加所有使用 Tailwind 的文件],
}
六、实用示例
1.卡片组件
html<div class="max-w-sm rounded overflow-hidden shadow-lg"><img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains"><div class="px-6 py-4"><div class="font-bold text-xl mb-2">卡片标题</div><p class="text-gray-700 text-base">卡片内容描述...</p></div><div class="px-6 pt-4 pb-2"><span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#标签1</span><span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#标签2</span></div>
</div>
2.导航栏
html<nav class="bg-gray-800"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-16"><div class="flex items-center"><div class="flex-shrink-0"><span class="text-white font-bold text-xl">Logo</span></div><div class="hidden md:block"><div class="ml-10 flex items-baseline space-x-4"><a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">首页</a><a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">关于</a></div></div></div></div></div>
</nav>
七、总结
Tailwind CSS 通过实用优先的方法提供了极大的灵活性和定制能力。通过掌握核心概念、响应式设计和状态变体，您可以快速构建现代化、响应式的用户界面。记住合理提取重复样式、利用配置扩展主题，并遵循最佳实践来保持代码的可维护性。
