Tailwind CSS 实战入门教程-171主机测评

Tailwind CSS 实战入门教程

作者：wcy 适用人群：已经掌握基础 HTML 和 CSS，想知道"现代前端怎么快速写样式"的初学者

1. Tailwind CSS 是什么

回顾一下我们学 CSS 的方式：先给元素起个类名（.card、.btn-primary），再到 CSS 文件里写一堆样式规则。这种"先命名、再写样式"的方式叫 CSS 框架式（如 Bootstrap）。

Tailwind CSS 走的是完全相反的路：用一套预先定义好的"工具类"直接在 HTML 里拼样式，基本不用写自定义 CSS。

<!– 传统写法：写 CSS 文件 –>
<button class="btn">登录</button>

.btn {
background-color: #1a73e8;
color: white;
padding: 8px 16px;
border-radius: 8px;
}

<!– Tailwind 写法：直接在 class 里拼 –>
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg">登录</button>

bg-blue-600：背景色（blue 系 600 号色）；
text-white：白色文字；
px-4 / py-2：左右/上下内边距；
rounded-lg：圆角。

几个类名，零自定义 CSS，效果和上面传统写法完全一样。

为什么越来越流行

不用想类名：传统写 CSS 最痛苦的是给类起名（.header-left-subtitle……），Tailwind 全是现成的；

全局样式统一：所有颜色、间距、字号都来自一套设计系统，天然一致；

改起来快：改样式就是改 HTML 里的类名，不用来回切文件；

不会"样式冲突"：没有全局作用域，类名之间互不影响；

文件更小：只打包用到的类，CSS 体积非常小。

什么人适合学

如果你已经会基础 CSS（知道 flex、padding、border-radius 是什么），学 Tailwind 会非常快——因为 Tailwind 的类名就是 CSS 属性的口语缩写。

一句话总结：Tailwind 是一套"写死在 HTML 里的样式速记法"，用类名拼出样式，又快又统一，是现代前端（尤其 React/Vue 项目）的主流选择。

2. 快速上手

有两条路：CDN 直接试（适合学习和演示）和构建工具集成（适合正式项目）。

2.1 方式一：CDN（最快，适合学习）

新建一个 HTML 文件，引入官方 CDN：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Tailwind 试试看</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
<h1 class="text-3xl font-bold text-blue-600">你好，Tailwind！</h1>
<button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">
按钮
</button>
</body>
</html>

保存为 .html 用浏览器打开，样式立刻生效。

CDN 适合学习、原型、小工具。正式项目不推荐（体积大、无法按需打包、有性能开销）。

2.2 方式二：构建项目（推荐，正式开发）

Tailwind 本质是一个 PostCSS 插件，通过构建工具（Vite / Webpack）把用到的类名转成真正的 CSS。

以 Vite + React 为例（你在 CaenLinkDB 等项目里看到的基本就是这套）：

npm create vite@latest my-app — –template react
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

生成 tailwind.config.js，在其中声明"扫描哪些文件"：

/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

在 CSS 入口文件（如 src/index.css）写入三行指令：

@tailwind base; /* 基础样式重置 */
@tailwind components;/* 组件层 */
@tailwind utilities; /* 工具类层 */

然后就可以在 JSX / TSX 里直接用 Tailwind 类名了：

export default function App() {
return (
<div className="flex justify-center items-center h-screen bg-gray-50">
<button className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg shadow">
点我
</button>
</div>
);
}

注意：React 里要写 className（不是 class）。在 HTML 文件里仍然写 class。

2.3 一条命令体验（Play CDN）

学习阶段最推荐 CDN 方式，把示例贴到浏览器里就能看到效果。后面所有实战代码都会注明运行方式。

3. 工具类思维

Tailwind 的核心是 Utility-first（工具类优先）。理解它很重要。

3.1 什么是工具类

每个类名只做一件事：

类名效果对应 CSS

p-4	内边距 1rem	padding: 1rem
px-4	左右内边距	padding-left/right: 1rem
py-2	上下内边距	padding-top/bottom: 0.5rem
m-4	外边距	margin: 1rem
text-lg	字号	font-size: 1.125rem
font-bold	加粗	font-weight: 700
rounded	圆角	border-radius: 0.25rem
flex	弹性布局	display: flex

3.2 工具类命名规律

命名非常规则，记住"属性缩写 + 值"就能猜出八九成：

bg- → background（背景）
text- → color / text（文字颜色或字号）
p- → padding（内边距）
m- → margin（外边距）
w- → width（宽度）
h- → height（高度）
rounded-→ border-radius（圆角）
shadow- → box-shadow（阴影）
flex/ grid → 布局

3.3 不用记，靠"猜"和"查"

Tailwind 类名太多，不用背。三个办法：

联想：bg-red-500 猜是红色背景，基本没错；

编辑器提示：VS Code 装 Tailwind CSS IntelliSense 插件，输入类名自动补全并显示效果；

官方速查：导航 https://tailwindcss.com/docs 按属性查。

3.4 组件化的类名组合

把多个工具类组合，可以做出任意效果：

核心心态：放弃"写 CSS"的直觉，接受"拼类名"。刚开始觉得类名很长，习惯后会发现它换来的是极快的开发速度和一致的效果。

4. 文本与字体

4.1 字号 text-*

常用档位：text-xs、text-sm、text-base、text-lg、text-xl、text-2xl ~ text-6xl。

4.2 粗细与样式

4.3 对齐与换行

<p class="text-left">左对齐</p>
<p class="text-center">居中</p>
<p class="text-right">右对齐</p>
<p class="truncate">超长文字会被省略号截断……</p>

text-left / text-center / text-right：对齐；
truncate：超出部分显示省略号（需要配合限制宽度）。

4.4 行高与字距

4.5 完整文字示例

规律：text-{大小} 控制字号，font-{粗细} 控制字重，text-{颜色} 控制颜色——同名里靠"值"来区分用途。

5. 颜色与背景

5.1 颜色体系（色号）

Tailwind 每个色系有 50~950 多个色号，数字越大越深：

<p class="text-blue-500">蓝色文字</p>
<p class="text-red-600 bg-yellow-100">红字黄底</p>
<p class="text-green-700 font-bold">深绿加粗</p>
<p class="text-gray-900">接近黑的深灰</p>
<p class="text-white bg-black">白字黑底</p>

常用色系：gray、red、orange、yellow、green、blue、indigo、purple、pink。

5.2 背景色

<div class="bg-gray-100">浅灰背景</div>
<div class="bg-blue-500">蓝色背景</div>
<div class="bg-red-50">极浅红背景</div>

5.3 背景图

<div class="bg-cover bg-center bg-no-repeat" style="background-image: url('banner.jpg')">
带背景图的区域
</div>

bg-cover：图片铺满；
bg-center：居中定位；
bg-no-repeat：不重复。

5.4 透明度

<div class="bg-blue-500/50">50% 透明度的蓝色</div>
<div class="bg-black/30">半透明黑（遮罩常用）</div>

后缀 /50、/30 表示透明度百分比。

5.5 完整配色示例

<div class="p-6 rounded-lg bg-gradient-to-r from-blue-500 to-indigo-600">
<p class="text-white font-bold text-xl">渐变色卡片</p>
</div>

bg-gradient-to-r from-{色} to-{色} 一条类名就完成线性渐变。

规律：颜色类名格式统一为 {作用}-{色系}-{色号}，如 bg-blue-600、text-gray-500、border-red-400。色号决定了深浅浓淡。

6. 间距与尺寸

6.1 内边距 padding

<div class="p-4">四边 1rem</div>
<div class="px-4">左右 1rem</div>
<div class="py-2">上下 0.5rem</div>
<div class="pt-2 pr-4 pb-2 pl-4">分别设置四边</div>

方向缩写：t（top 上）、r（right 右）、b（bottom 下）、l（left 左）、x（左右）、y（上下）。

6.2 外边距 margin

<div class="m-4">四边 1rem</div>
<div class="mx-auto">左右自动（配合定宽可居中）</div>
<div class="mt-8">上边距 2rem</div>

水平居中是高频操作：

6.3 常用间距档位

间距系统按 0.25rem（4px）递增：p-1（4px）、p-2（8px）、p-3（12px）、p-4（16px）、p-6（24px）、p-8（32px）……

6.4 宽高

<div class="w-16 h-16">固定 64px 正方形</div>
<div class="w-1/2">父容器一半宽</div>
<div class="w-full">父容器全宽</div>
<div class="h-screen">整屏高度</div>
<div class="max-w-md mx-auto">最大宽度 + 居中（非常常用）</div>

6.5 弹性宽度

<div class="flex gap-4">
<div class="flex-1">自动占一份</div>
<div class="flex-1">自动占一份（两列均分）</div>
</div>

记忆：p/m + 方向 + 尺寸管间距，w/h + 值管尺寸，flex-1 管占比。有了这一套，排版基本够用。

7. 边框与圆角

7.1 边框

<div class="border border-gray-300">1px 灰色边框</div>
<div class="border-2 border-blue-500">2px 蓝色边框</div>
<div class="border-b">只有底边框</div>

border：1px 边框（需要配合颜色，否则默认灰）；
border-2 / border-4：粗细；
border-b / border-t / border-l / border-r：单边。

7.2 圆角 rounded

rounded-full 配正方形就是圆形；
配长方形（高度固定）就是胶囊按钮。

7.3 圆形头像

7.4 边框阴影

<div class="shadow">基础阴影</div>
<div class="shadow-md">中等阴影</div>
<div class="shadow-lg">大阴影</div>
<div class="shadow-xl">更大（卡片浮起感）</div>
<div class="shadow-none">无阴影</div>

常用组合示例（卡片）：

卡片公式：rounded-{圆角} + shadow-{程度} + bg-white，一行类名就是一个现代风格卡片。

8. Flex 布局

学 CSS 时我们学的 justify-content、align-items 等，在 Tailwind 里对应一个类名，直接用。

8.1 开启 Flex

<div class="flex">子元素横向排列</div>

8.2 排列方向

8.3 主轴对齐 justify-*

<div class="flex justify-start">靠左</div>
<div class="flex justify-center">居中</div>
<div class="flex justify-end">靠右</div>
<div class="flex justify-between">两端对齐，中间分散</div>
<div class="flex justify-around">每个元素两侧等距</div>

8.4 交叉轴对齐 items-*

8.5 换行与空隙

<div class="flex flex-wrap gap-4">
<div class="w-1/3">三个一行，放不下自动换行，间距 1rem</div>
</div>

flex-wrap：放不下换行；
gap-4：子元素之间统一间距（比挨个加 margin 方便太多）。

8.6 子元素伸缩 flex-*

<div class="flex gap-4">
<div class="flex-none w-32">固定宽度不伸缩</div>
<div class="flex-1">占满剩余空间（自适应）</div>
</div>

8.7 经典：水平垂直居中

Flex 在 Tailwind 里 = flex（开启）+ justify-*（主轴）+ items-*（交叉轴）+ gap-*（间距）。这三板斧记住就能解决 90% 的布局。

9. Grid 布局

9.1 等分多列

<div class="grid grid-cols-3 gap-4">
<div>第 1 列</div>
<div>第 2 列</div>
<div>第 3 列</div>
<div>自动进入第二行</div>
</div>

grid：开启网格；
grid-cols-3：三等分列；
gap-4：行列间距。

9.2 非等分配置

9.3 响应式列数

9.4 内容指定位置

Grid 场景一句话：一排等分用 grid-cols-N，特定横跨用 col-span-N，配合 md:/lg: 前缀做响应式（下一章细讲）。

10. 响应式设计

Tailwind 的响应式极简单：给类名加前缀，表示"达到某个屏幕宽度后才生效"。

10.1 断点前缀

前缀最小宽度说明

无	0	手机（默认）
sm:	640px	小屏手机横屏
md:	768px	平板
lg:	1024px	笔记本
xl:	1280px	大屏
2xl:	1536px	超大屏

写法就是：默认值在前，断点前缀在后（前缀版本会覆盖默认）：

10.2 两栏 → 一栏的经典适配

<div class="flex flex-col md:flex-row">
<div class="md:w-1/4">侧边栏（手机上变为顶部区块）</div>
<div class="flex-1">内容区</div>
</div>

10.3 响应式文字与间距

<h1 class="text-2xl md:text-4xl lg:text-5xl">标题随屏幕放大</h1>
<div class="p-4 md:p-8">手机 16px 内边距，平板起 32px</div>

10.4 响应式 Grid

心法：先写手机版（默认类），再用 md:/lg: 逐步增强。这也和传统媒体查询"移动优先"的思路一致。

11. 状态与交互

Tailwind 给"悬停、聚焦、激活"等状态也做成了前缀，写交互不用再写 CSS 伪类。

11.1 hover（悬停）

<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded transition">
悬停变深蓝
</button>

11.2 focus（聚焦）

聚焦时边框变蓝并去掉默认外框（focus:outline-none）。

11.3 active（按下）

<button class="bg-green-500 active:bg-green-700 …">按下去变深</button>

11.4 过渡动效

<div class="transition duration-300 hover:scale-105 hover:shadow-lg">
悬停轻微放大 + 阴影加深
</div>

transition：开启过渡；
duration-300：300ms 时长；
hover:scale-105：悬停放大 1.05 倍；
hover:shadow-lg：悬停阴影加深。

11.5 分组悬停 group

在父元素加 group，子元素用 group-hover:，实现"整块悬停联动"：

<div class="group bg-white border rounded-lg p-4 hover:shadow-lg transition cursor-pointer">
<h3 class="text-lg font-bold group-hover:text-blue-600">标题（悬停父级时变蓝）</h3>
<p class="text-gray-500">子元素随整块悬停变化</p>
</div>

11.6 禁用状态

Tailwind 的设计哲学：所有状态都是类名前缀（hover:、focus:、group-hover:），交互逻辑直观地写在 class 里。

12. 实战一：登录页面

用 CDN 方式新建一个响应式登录页，综合运用 flex、间距、边框、状态。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>登录</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">

<div class="w-full max-w-sm mx-auto p-8 bg-white rounded-xl shadow-md">
<h1 class="text-2xl font-bold text-gray-800 text-center">欢迎回来</h1>
<p class="mt-2 text-sm text-gray-500 text-center">登录你的账号继续</p>

<p class="mt-6 text-center text-sm text-gray-500">
还没有账号？<a href="#" class="text-blue-600 hover:underline">立即注册</a>
</p>
</div>

</body>
</html>

本页用到的要点：

min-h-screen flex items-center justify-center：容器撑满全屏并居中内容；
max-w-sm mx-auto：卡片最大宽度 + 水平居中；
space-y-4：子元素之间垂直间距；
focus:border-blue-500 focus:outline-none：聚焦态高亮；
hover:bg-blue-700 transition：悬停变色过渡。

直接另存为 login.html 用浏览器打开即可看到完整登录页。

13. 实战二：卡片网格

做一个响应式"商品卡片"网格，综合运用 Grid、group 悬停、圆角阴影。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>卡片网格</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen p-6">

<!– 商品卡片（复制此块即可生成更多卡片） –>
<div class="group bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-xl transition">
<div class="h-40 bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center">
<span class="text-white font-bold text-3xl group-hover:scale-110 transition">🐱</span>
</div>
<div class="p-4">
<h3 class="font-semibold text-gray-800 group-hover:text-blue-600 transition">猫咪挂件</h3>
<p class="mt-1 text-sm text-gray-500">可爱的桌面小摆件，人手一份。</p>
<div class="mt-3 flex items-center justify-between">
<span class="text-lg font-bold text-red-500">¥ 29.9</span>
<button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg transition">
加购物车
</button>
</div>
</div>
</div>
<!– 结束一个卡片 –>

<!– 再复制几个展示网格效果 –>
<div class="group bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-xl transition">
<div class="h-40 bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center">
<span class="text-white font-bold text-3xl group-hover:scale-110 transition">📚</span>
</div>
<div class="p-4">
<h3 class="font-semibold text-gray-800 group-hover:text-blue-600 transition">前端入门书</h3>
<p class="mt-1 text-sm text-gray-500">从零开始的前端自学指南。</p>
<div class="mt-3 flex items-center justify-between">
<span class="text-lg font-bold text-red-500">¥ 59.0</span>
<button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg transition">
加购物车
</button>
</div>
</div>
</div>

</div>

</body>
</html>

本页用到的要点：

grid-cols-1 sm:grid-cols-2 lg:grid-cols-4：1/2/4 列响应式；
group + group-hover:：整卡悬停联动（放大图标的 emoji）；
hover:shadow-xl transition：悬停浮起效果；
颜色渐变 bg-gradient-to-br from-… to-… 装饰头部区块。

14. 实战三：仪表盘

综合实战：一个"数据概览仪表盘"，包含顶部导航、统计卡片、表格，使用 Grid + Flex + 响应式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>数据仪表盘</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen">

<!– 顶部导航 –>
<header class="bg-white border-b border-gray-200">
<div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
<span class="text-xl font-bold text-gray-800">📊 数据中心</span>
<div class="flex items-center gap-3">
<span class="hidden sm:block text-sm text-gray-500">wcy</span>
<div class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center text-sm font-bold">
C
</div>
</div>
</div>
</header>

<!– 主体 –>
<main class="max-w-6xl mx-auto px-4 py-6 space-y-6">

<!– 统计卡片 –>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
<p class="text-sm text-gray-500">今日访问</p>
<p class="mt-2 text-3xl font-bold text-gray-800">1,024</p>
<p class="mt-1 text-xs text-green-600">↑ 12.5%</p>
</div>
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
<p class="text-sm text-gray-500">新增用户</p>
<p class="mt-2 text-3xl font-bold text-gray-800">86</p>
<p class="mt-1 text-xs text-green-600">↑ 5.2%</p>
</div>
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
<p class="text-sm text-gray-500">订单数</p>
<p class="mt-2 text-3xl font-bold text-gray-800">321</p>
<p class="mt-1 text-xs text-red-500">↓ 3.1%</p>
</div>
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
<p class="text-sm text-gray-500">营收</p>
<p class="mt-2 text-3xl font-bold text-gray-800">¥12,530</p>
<p class="mt-1 text-xs text-green-600">↑ 18%</p>
</div>
</div>

<!– 列表与侧栏 –>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

<!– 订单表格 –>
<section class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-gray-100 p-5">
<h2 class="text-lg font-semibold text-gray-800 mb-4">最近订单</h2>
<table class="w-full text-sm">
<thead>
<tr class="text-left text-gray-500 border-b border-gray-200">
<th class="py-2">订单号</th>
<th class="py-2">客户</th>
<th class="py-2">金额</th>
<th class="py-2 hidden md:table-cell">状态</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-100">
<td class="py-3">#1024</td>
<td class="py-3">张三</td>
<td class="py-3 text-blue-600 font-semibold">¥198</td>
<td class="py-3 hidden md:table-cell">
<span class="px-2 py-1 text-xs bg-green-100 text-green-700 rounded-full">已完成</span>
</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-3">#1025</td>
<td class="py-3">李四</td>
<td class="py-3 text-blue-600 font-semibold">¥56</td>
<td class="py-3 hidden md:table-cell">
<span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-700 rounded-full">处理中</span>
</td>
</tr>
</tbody>
</table>
</section>

<!– 快捷操作 –>
<aside class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
<h2 class="text-lg font-semibold text-gray-800 mb-4">快捷操作</h2>
<div class="space-y-2">
<button class="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">新增订单</button>
<button class="w-full py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition">导出报表</button>
<button class="w-full py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition">查看统计</button>
</div>
<p class="mt-4 text-xs text-gray-400">提示：本页面为静态演示，数据不会真的保存。</p>
</aside>

</div>
</main>

</body>
</html>

这个仪表盘展示的能力：

布局：grid-cols-1 lg:grid-cols-3 + col-span-2 完成"表格 + 侧栏"；
组件样式：统计卡片、状态徽章（rounded-full + 浅色底）、按钮不变式；
响应式：表格状态列 hidden md:table-cell 在手机上隐藏；
全页只靠类名，没有一行自定义 CSS——这正是 Tailwind 项目的常态。

15. 配置文件与自定义

正式项目里会用到 tailwind.config.js 定制主题。

15.1 自定义颜色

export default {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
brand: {
50: "#eef2ff",
500: "#4f46e5",
700: "#3730a3",
},
},
},
},
}

配置后就能用 bg-brand-500、text-brand-700。

15.2 自定义间距与字号

theme: {
extend: {
spacing: {
18: "4.5rem",
},
fontFamily: {
sans: ["Inter", "system-ui", "sans-serif"],
},
},
}

配置后 p-18、全局字体族 font-sans 生效。

15.3 暗黑模式

Tailwind 原生用 dark: 前缀：

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
跟随系统或手动切换
</div>

默认跟随系统 prefers-color-scheme；要想手动切换，配置文件改成：

export default {
darkMode: "class", // 改为手动在 html 上切换 .dark
// …
}

15.4 @apply（偶尔写少量自定义样式）

实在需要复用时，可以在 CSS 里用 @apply 组合工具类：

.btn {
@apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition;
}

建议：能组合类名就不用 @apply，保持"样式全在 HTML"的一致性；只有确需复用组件时才适度使用。

16. 小结与练习

本章总结

分类核心类名

上手	CDN 引入 / Vite 构建 + tailwind.config.js + @tailwind 三行
文本	text-{size}、font-bold、text-{color}、text-center、truncate
颜色	bg-{色}-{号}、text-{色}-{号}、/50 透明度、bg-gradient-to-r
间距	p/m + t/r/b/l/x/y + 尺寸、space-y-4、gap-4
尺寸	w-64、w-1/2、w-full、max-w-sm、h-screen、flex-1
边框	border/border-2、rounded-、rounded-full、shadow-
布局	flex + justify-* + items-*、grid grid-cols-N、col-span-N
响应式	sm:/md:/lg:/xl: 前缀，默认写手机版
状态	hover:、focus:、active:、group-hover:、transition
配置	theme.extend、darkMode: "class"、@apply

课后练习

用类名做一张"文章列表"：标题（加粗）、摘要（灰色）、日期（小号），整体卡片化带阴影。

把之前的"登录页面"改成深色版本：背景深灰、卡片深黑、文字浅色，试一下 dark: 前缀。

做一个三列等分的响应式布局：手机一列、平板两列、桌面三列（用 grid-cols-1 md:grid-cols-2 lg:grid-cols-3）。

给仪表盘加一个"总览横条"：用 space-x/space-y 排版三个一组的小数据块。

给卡片网格中的按钮加 active:scale-95，体验点击按下微微收缩的反馈。

常见问题

问：类名好长一串，看着好乱？答：习惯就好。长 class 正是 Tailwind 的特点——它把样式"就地"写在结构旁，不用来回翻 CSS 文件。如果一段组合反复出现，可以用组件封装（React 组件 / @apply）复用。

问：CDN 和构建方式有什么区别？答：CDN 适合学习、演示、小页面；正式项目用构建方式，才能按需打包（只生成用到的类），体积小、构建快、可定制配置。

问：记不住类名怎么办？答：装 VS Code 的 Tailwind CSS IntelliSense 插件，输入前缀会自动提示；拿不准的类都可以猜（p-4 是 padding，w-1/2 是半宽）。

问：和 Bootstrap 有什么区别？答：Bootstrap 提供"现成组件"（你改它的样式），Tailwind 提供"积木"（你拼自己的样式）。Tailwind 更灵活自由，没有自带组件；Bootstrap 上手更快但有"千站一面"的问题。

Tailwind 已经很适合独立学习和应用了。有了它，你"会用 CSS 写样式"的能力会在项目里变成"飞快地写出统一、精致、响应式的界面"。

对正在学 React/Vue 的同学：Tailwind + 组件化是当下最主流的前端开发组合——本教程的类名知识可以直接用在你接下来的框架项目里。

如果觉得教程有帮助，欢迎关注我的博客