Tailwind CSS 使用详解
目录
1. Tailwind CSS 简介
Tailwind CSS 是一个实用优先（Utility-First） 的 CSS 框架，与 Bootstrap、Element UI 等组件库不同，它不提供预定义的组件（如按钮、卡片），而是提供大量低级别的工具类（utility classes），让你通过组合这些类来构建任何设计。
核心理念： 直接在 HTML 中通过类名控制样式，无需编写自定义 CSS。
<!-- 传统 CSS 方式 -->
<div class="card">
<h2 class="card-title">Hello</h2>
<p class="card-body">World</p>
</div>
<!-- Tailwind 方式 -->
<div class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-xl font-bold text-gray-800">Hello</h2>
<p class="text-gray-600">World</p>
</div>
优势
- 开发速度快 — 无需在 HTML 和 CSS 文件间切换
- 设计一致 — 基于设计系统的预定义间距、颜色、断点
- 响应式内建 — 通过前缀轻松控制不同屏幕尺寸的样式
- 可定制性强 — 配置文件可覆盖所有设计令牌
- 体积小 — 生产构建通过 PurgeCSS 自动移除未使用的样式
2. 安装与配置
通过 npm 安装
npm install -D tailwindcss @tailwindcss/cli
创建配置文件
npx tailwindcss init
生成 tailwind.config.js 文件：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
引入到 CSS
在 input.css 中：
@import "tailwindcss";
构建
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
CDN 方式（快速原型）
<script src="https://cdn.tailwindcss.com"></script>
3. 核心概念
实用优先
每个类只做一件事，类名即样式：
| 类名 | 作用 |
|---|---|
text-center |
文本居中 |
font-bold |
加粗 |
p-4 |
内边距 1rem |
bg-blue-500 |
蓝色背景 |
rounded-lg |
大圆角 |
设计系统
Tailwind 基于一套设计系统，所有值都遵循固定比例：
- 间距：
0,0.5,1,1.5,2,2.5,3,3.5,4,5,6,7,8,9,10,11,12,14,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96 - 颜色： 每种颜色有 50, 100, 200, ..., 900 共 10 个色阶
- 断点：
sm(640px),md(768px),lg(1024px),xl(1280px),2xl(1536px)
4. 布局系统
Display
<div class="block">块级</div>
<div class="inline-block">行内块</div>
<div class="inline">行内</div>
<div class="flex">弹性</div>
<div class="grid">网格</div>
<div class="hidden">隐藏</div>
盒子模型
<div class="box-border">border-box</div>
<div class="box-content">content-box</div>
Overflow
<div class="overflow-auto">自动滚动</div>
<div class="overflow-hidden">隐藏溢出</div>
<div class="overflow-scroll">始终滚动</div>
<div class="overflow-visible">可见溢出</div>
定位
<div class="relative">
<div class="absolute top-0 left-0">绝对定位</div>
</div>
<div class="fixed top-0">固定定位</div>
<div class="sticky top-0">粘性定位</div>
5. 排版与文本
字体大小
<p class="text-xs">extra small</p> <!-- 12px -->
<p class="text-sm">small</p> <!-- 14px -->
<p class="text-base">base (default)</p> <!-- 16px -->
<p class="text-lg">large</p> <!-- 18px -->
<p class="text-xl">extra large</p> <!-- 20px -->
<p class="text-2xl">2xl</p> <!-- 24px -->
<p class="text-3xl">3xl</p> <!-- 30px -->
<p class="text-4xl">4xl</p> <!-- 36px -->
<p class="text-5xl">5xl</p> <!-- 48px -->
<p class="text-6xl">6xl</p> <!-- 60px -->
<p class="text-7xl">7xl</p> <!-- 72px -->
<p class="text-8xl">8xl</p> <!-- 96px -->
<p class="text-9xl">9xl</p> <!-- 128px -->
字体粗细
<p class="font-thin">100</p>
<p class="font-light">300</p>
<p class="font-normal">400</p>
<p class="font-medium">500</p>
<p class="font-semibold">600</p>
<p class="font-bold">700</p>
<p class="font-extrabold">800</p>
<p class="font-black">900</p>
文本对齐
<p class="text-left">左对齐</p>
<p class="text-center">居中</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐</p>
文本装饰
<p class="underline">下划线</p>
<p class="line-through">删除线</p>
<p class="overline">上划线</p>
<p class="no-underline">无装饰</p>
行高
<p class="leading-none">1</p>
<p class="leading-tight">1.25</p>
<p class="leading-normal">1.5</p>
<p class="leading-relaxed">1.625</p>
<p class="leading-loose">2</p>
文本截断
<p class="truncate">超出部分显示省略号...</p>
<p class="line-clamp-2">最多显示两行，多余部分省略</p>
<p class="line-clamp-3">最多显示三行</p>
6. 颜色与背景
文本颜色
<p class="text-gray-500">灰色</p>
<p class="text-red-500">红色</p>
<p class="text-blue-500">蓝色</p>
<p class="text-green-500">绿色</p>
<p class="text-yellow-500">黄色</p>
<p class="text-indigo-500">靛蓝</p>
<p class="text-purple-500">紫色</p>
<p class="text-pink-500">粉色</p>
<p class="text-white">白色</p>
<p class="text-black">黑色</p>
背景颜色
<div class="bg-gray-100">浅灰色背景</div>
<div class="bg-blue-500">蓝色背景</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-500">渐变背景</div>
透明度
<div class="bg-blue-500/50">50% 透明度</div>
<div class="bg-blue-500/75">75% 透明度</div>
<div class="text-black/25">25% 透明度的文字</div>
边框
<div class="border">默认边框</div>
<div class="border-2 border-red-500">2px 红色边框</div>
<div class="border-b-4">底部 4px 边框</div>
<div class="border-dashed">虚线边框</div>
<div class="border-dotted">点线边框</div>
<div class="border-none">无边框</div>
圆角
<div class="rounded-sm">小圆角</div>
<div class="rounded">默认圆角</div>
<div class="rounded-md">中等圆角</div>
<div class="rounded-lg">大圆角</div>
<div class="rounded-xl">超大圆角</div>
<div class="rounded-2xl">2xl 圆角</div>
<div class="rounded-full">圆形</div>
<div class="rounded-t-lg">顶部圆角</div>
<div class="rounded-bl-xl">左下角圆角</div>
7. 间距与尺寸
内边距（Padding）
<div class="p-0">p-0</div> <!-- 0px -->
<div class="p-1">p-1</div> <!-- 4px -->
<div class="p-2">p-2</div> <!-- 8px -->
<div class="p-4">p-4</div> <!-- 16px -->
<div class="p-8">p-8</div> <!-- 32px -->
<!-- 方向 -->
<div class="pt-4">padding-top</div>
<div class="pr-4">padding-right</div>
<div class="pb-4">padding-bottom</div>
<div class="pl-4">padding-left</div>
<div class="px-4">padding-x (左右)</div>
<div class="py-4">padding-y (上下)</div>
外边距（Margin）
<div class="m-4">m-4</div> <!-- 16px -->
<div class="mt-4">margin-top</div>
<div class="mr-4">margin-right</div>
<div class="mb-4">margin-bottom</div>
<div class="ml-4">margin-left</div>
<div class="mx-auto">水平居中</div>
<div class="my-4">margin-y (上下)</div>
宽度
<div class="w-4">w-4</div> <!-- 16px -->
<div class="w-1/2">w-1/2</div> <!-- 50% -->
<div class="w-1/3">w-1/3</div> <!-- 33.333% -->
<div class="w-2/3">w-2/3</div> <!-- 66.667% -->
<div class="w-full">w-full</div> <!-- 100% -->
<div class="w-screen">w-screen</div> <!-- 100vw -->
<div class="w-auto">w-auto</div> <!-- auto -->
<div class="max-w-md">max-w-md</div> <!-- 最大宽度 448px -->
<div class="min-h-screen">min-h-screen</div> <!-- 最小高度 100vh -->
高度
<div class="h-4">h-4</div> <!-- 16px -->
<div class="h-1/2">h-1/2</div> <!-- 50% -->
<div class="h-full">h-full</div> <!-- 100% -->
<div class="h-screen">h-screen</div> <!-- 100vh -->
8. Flexbox 与 Grid
Flexbox
<!-- 基础弹性容器 -->
<div class="flex">
<div>项目 1</div>
<div>项目 2</div>
<div>项目 3</div>
</div>
<!-- 方向 -->
<div class="flex-row">横向</div>
<div class="flex-col">纵向</div>
<div class="flex-row-reverse">横向反向</div>
<div class="flex-col-reverse">纵向反向</div>
<!-- 换行 -->
<div class="flex-wrap">换行</div>
<div class="flex-nowrap">不换行</div>
<div class="flex-wrap-reverse">反向换行</div>
<!-- 主轴对齐 (justify-content) -->
<div class="flex justify-start">开头对齐</div>
<div class="flex justify-end">末尾对齐</div>
<div class="flex justify-center">居中</div>
<div class="flex justify-between">两端对齐</div>
<div class="flex justify-around">均匀分布</div>
<div class="flex justify-evenly">等距分布</div>
<!-- 交叉轴对齐 (align-items) -->
<div class="flex items-start">顶部对齐</div>
<div class="flex items-end">底部对齐</div>
<div class="flex items-center">垂直居中</div>
<div class="flex items-baseline">基线对齐</div>
<div class="flex items-stretch">拉伸对齐</div>
<!-- 单个项目对齐 -->
<div class="self-start">自身顶部</div>
<div class="self-end">自身底部</div>
<div class="self-center">自身居中</div>
<!-- 伸缩 -->
<div class="flex-1">flex: 1 1 0%</div>
<div class="flex-auto">flex: 1 1 auto</div>
<div class="flex-initial">flex: 0 1 auto</div>
<div class="flex-none">flex: none</div>
<!-- 间距 -->
<div class="flex gap-4">项目间距 16px</div>
<div class="flex gap-x-2">水平间距</div>
<div class="flex gap-y-2">垂直间距</div>
实战示例 — 导航栏：
<nav class="flex items-center justify-between bg-gray-800 text-white p-4">
<div class="text-lg font-bold">Logo</div>
<ul class="flex gap-6">
<li><a href="#" class="hover:text-gray-300">首页</a></li>
<li><a href="#" class="hover:text-gray-300">关于</a></li>
<li><a href="#" class="hover:text-gray-300">联系</a></li>
</ul>
</nav>
Grid
<!-- 基础网格 -->
<div class="grid grid-cols-3 gap-4">
<div>列 1</div>
<div>列 2</div>
<div>列 3</div>
</div>
<!-- 列数 -->
<div class="grid-cols-1">1列</div>
<div class="grid-cols-2">2列</div>
<div class="grid-cols-3">3列</div>
<div class="grid-cols-4">4列</div>
<div class="grid-cols-6">6列</div>
<div class="grid-cols-12">12列</div>
<!-- 行数 -->
<div class="grid-rows-3">3行</div>
<!-- 跨列 -->
<div class="col-span-2">占2列</div>
<div class="col-span-full">占全部列</div>
<div class="col-start-2">从第2列开始</div>
<div class="col-end-4">到第4列结束</div>
<!-- 跨行 -->
<div class="row-span-2">占2行</div>
<div class="row-span-full">占全部行</div>
<!-- 网格对齐 -->
<div class="grid justify-items-start">水平开头</div>
<div class="grid justify-items-center">水平居中</div>
<div class="grid justify-items-end">水平末尾</div>
<div class="grid items-start">垂直开头</div>
<div class="grid items-center">垂直居中</div>
<div class="grid items-end">垂直末尾</div>
<!-- 自动流 -->
<div class="grid grid-flow-row">行优先</div>
<div class="grid grid-flow-col">列优先</div>
<div class="grid grid-flow-dense">紧凑填充</div>
实战示例 — 响应式卡片布局：
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-semibold">卡片标题</h3>
<p class="text-gray-600 mt-2">卡片内容...</p>
</div>
<!-- 更多卡片... -->
</div>
9. 响应式设计
断点前缀
Tailwind 使用移动优先（mobile-first）的断点系统：
| 前缀 | 最小宽度 | 说明 |
|---|---|---|
sm: |
640px | 平板（小） |
md: |
768px | 平板（大） |
lg: |
1024px | 笔记本 |
xl: |
1280px | 桌面 |
2xl: |
1536px | 大屏 |
使用方法： 在任意工具类前加上断点前缀。
<!-- 默认手机版：单列，md 以上：两列，lg 以上：三列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-blue-200 p-4">1</div>
<div class="bg-blue-200 p-4">2</div>
<div class="bg-blue-200 p-4">3</div>
</div>
<!-- 响应式排版 -->
<p class="text-sm md:text-base lg:text-lg">
这段文字在手机上小号，平板上中号，电脑上大号。
</p>
<!-- 响应式间距 -->
<div class="p-4 md:p-8 lg:p-12">
内边距随屏幕增大而增大。
</div>
<!-- 响应式显示/隐藏 -->
<div class="hidden md:block">
只在 md 及以上显示
</div>
<div class="block md:hidden">
只在手机端显示
</div>
暗黑模式
<!-- 在 tailwind.config.js 中启用 -->
module.exports = {
darkMode: "class",
// ...
};
<!-- 使用 dark: 前缀 -->
<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
同时支持亮色和暗色模式
</div>
10. 伪类与状态
Hover & Focus
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
悬停变色
</button>
<input class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-300 outline-none p-2 rounded" />
<a href="#" class="text-blue-500 hover:text-blue-700 active:text-blue-900 visited:text-purple-500">
链接
</a>
伪类前缀
| 前缀 | 说明 |
|---|---|
hover: |
鼠标悬停 |
focus: |
获得焦点 |
focus-within: |
内部元素获得焦点 |
focus-visible: |
键盘导航获得焦点 |
active: |
激活/点击时 |
visited: |
已访问链接 |
disabled: |
禁用状态 |
enabled: |
启用状态 |
checked: |
选中状态 |
first: |
第一个子元素 |
last: |
最后一个子元素 |
odd: |
奇数子元素 |
even: |
偶数子元素 |
group-hover: |
父元素悬停时 |
group-focus: |
父元素聚焦时 |
peer: |
兄弟元素状态 |
分组悬停
<div class="group hover:bg-gray-100 p-4 rounded-lg cursor-pointer">
<h3 class="text-gray-800 group-hover:text-blue-500">标题</h3>
<p class="text-gray-500 group-hover:text-gray-700">描述文本</p>
</div>
Peer（兄弟元素联动）
<input type="checkbox" class="peer" />
<label class="peer-checked:text-blue-500 peer-checked:font-bold">
选中我时文字变蓝加粗
</label>
11. 动画与过渡
过渡
<button class="bg-blue-500 hover:bg-blue-700 transition duration-300 ease-in-out">
过渡动画
</button>
<div class="transition-all duration-500 ease-in-out">
<!-- transition-property: all -->
<!-- transition-duration: 500ms -->
<!-- transition-timing-function: ease-in-out -->
</div>
过渡相关类：
| 类 | 说明 |
|---|---|
transition-none |
无过渡 |
transition-all |
所有属性 |
transition-colors |
颜色 |
transition-opacity |
透明度 |
transition-shadow |
阴影 |
transition-transform |
变换 |
duration-{ms} |
持续时间 (75/100/150/200/300/500/700/1000) |
ease-linear |
匀速 |
ease-in |
加速 |
ease-out |
减速 |
ease-in-out |
先加速后减速 |
delay-{ms} |
延迟 |
变换
<div class="scale-110">放大 110%</div>
<div class="scale-150">放大 150%</div>
<div class="rotate-45">旋转 45°</div>
<div class="rotate-180">旋转 180°</div>
<div class="-rotate-90">旋转 -90°</div>
<div class="translate-x-4">X轴移动 16px</div>
<div class="translate-y-8">Y轴移动 32px</div>
<div class="skew-x-12">X轴倾斜 12°</div>
<div class="origin-center">变换原点：中心</div>
<div class="origin-top-left">变换原点：左上</div>
动画
<div class="animate-spin">旋转</div>
<div class="animate-ping">脉冲</div>
<div class="animate-pulse">闪烁</div>
<div class="animate-bounce">弹跳</div>
<div class="animate-pulse">呼吸</div>
自定义关键帧
在 tailwind.config.js 中：
module.exports = {
theme: {
extend: {
keyframes: {
"fade-in": {
"0%": { opacity: "0", transform: "translateY(10px)" },
"100%": { opacity: "1", transform: "translateY(0)" },
},
},
animation: {
"fade-in": "fade-in 0.3s ease-out",
},
},
},
};
使用：
<div class="animate-fade-in">淡入动画</div>
12. 自定义配置
默认配置
tailwind.config.js 是 Tailwind 的配置中心：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,js,ts,jsx,tsx}",
],
theme: {
// 覆盖默认值
screens: {
tablet: "640px",
laptop: "1024px",
desktop: "1280px",
},
colors: {
brand: {
light: "#3b82f6",
DEFAULT: "#2563eb",
dark: "#1d4ed8",
},
},
extend: {
// 扩展而不是覆盖
spacing: {
13: "3.25rem",
15: "3.75rem",
128: "32rem",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
},
fontSize: {
"2xs": "0.625rem",
},
borderRadius: {
"4xl": "2rem",
},
},
},
plugins: [],
};
@apply 指令（在 CSS 中复用）
.btn-primary {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700 transition duration-300;
}
<button class="btn-primary">按钮</button>
注意：
@apply应谨慎使用，过度使用会失去 Tailwind 的优势。
自定义插件
const plugin = require("tailwindcss/plugin");
module.exports = {
plugins: [
plugin(function ({ addUtilities, addComponents, addBase, theme }) {
addUtilities({
".scrollbar-hide": {
"-ms-overflow-style": "none",
"scrollbar-width": "none",
"&::-webkit-scrollbar": {
display: "none",
},
},
});
}),
],
};
13. 最佳实践
1. 提取组件
对于重复使用的 UI 模式，创建组件而非使用 @apply：
// React 组件
function Button({ children, variant = "primary" }) {
const base = "font-bold py-2 px-4 rounded transition duration-300";
const variants = {
primary: "bg-blue-500 hover:bg-blue-700 text-white",
secondary: "bg-gray-500 hover:bg-gray-700 text-white",
danger: "bg-red-500 hover:bg-red-700 text-white",
};
return (
<button className={`${base} ${variants[variant]}`}>
{children}
</button>
);
}
2. 类名排序
推荐使用 prettier-plugin-tailwindcss 自动排序：
npm install -D prettier prettier-plugin-tailwindcss
3. 避免内联样式
<!-- ❌ 不推荐 -->
<div style="padding: 1rem; color: blue;">...</div>
<!-- ✅ 推荐 -->
<div class="p-4 text-blue-500">...</div>
4. 善用 clsx / tailwind-merge
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
return twMerge(clsx(inputs));
}
// 使用
<button className={cn(
"px-4 py-2 rounded",
isActive ? "bg-blue-500 text-white" : "bg-gray-200"
)}>
按钮
</button>
5. 配置 VS Code 插件
- Tailwind CSS IntelliSense — 类名自动补全、悬停预览
- Tailwind Documentation — 快速查看文档
6. 生产优化
tailwind.config.js 中的 content 路径要精确，确保 PurgeCSS 能正确移除未使用的类：
module.exports = {
content: [
"./src/**/*.{html,js,ts,jsx,tsx}",
// 不要使用过于宽泛的路径
],
};
7. 学习资源
- 官方文档
- Tailwind UI — 官方组件库
- Tailwind Play — 在线 playground
- Awesome Tailwind CSS
快速参考卡片
最常用类速查
| 用途 | 类名 |
|---|---|
| 弹性布局 | flex items-center justify-between |
| 网格布局 | grid grid-cols-3 gap-4 |
| 卡片 | bg-white rounded-lg shadow-md p-6 |
| 按钮 | px-4 py-2 rounded bg-blue-500 text-white |
| 表单输入 | border rounded p-2 focus:ring-2 focus:border-blue-500 |
| 居中 | mx-auto (块级), flex items-center justify-center (弹性) |
| 隐藏 | hidden / block |
| 响应式容器 | max-w-6xl mx-auto px-4 |
| 文本截断 | truncate |
| 圆角按钮 | rounded-full |
| 分割线 | border-t border-gray-200 my-8 |
这份文档覆盖了 Tailwind CSS 的绝大部分日常用法。实际开发中建议搭配官方文档使用，随着对框架的熟悉，你会发现开发效率显著提升。