Article

样式构建 TailwindCSS

更新于：2026-07-08

第一章：Tailwind CSS 入门基础

1.1 什么是 Tailwind CSS

概念名称说明注意事项
Tailwind CSS一个功能优先（Utility-First）的 CSS 框架，提供低级工具类直接在 HTML 中构建自定义设计。不是组件库（如 Bootstrap），不预设按钮、卡片等组件样式，需自行组合类构建。
实用类（Utility Class）每个类只负责一个样式属性（如 text-center 只控制文本居中）。类名多，HTML 标签可能较长，需适应开发习惯。
原子化 CSS（Atomic CSS）将样式拆分为最小原子单位，在模板中组合使用。需配合良好编辑器支持（如类名自动补全）提升开发效率。
设计系统友好支持通过配置文件定义设计约束（颜色、间距、字体等），确保一致性。初学者可使用默认配置快速上手。
参考特效Creative Tim - TWComponents免费提供各种开箱即用的组件、资源等。

1.2 Tailwind 与传统 CSS 的对比

对比维度Tailwind CSS传统 CSS（或 SCSS）
开发方式在 HTML 中使用工具类直接构建样式编写独立 CSS 文件，通过类名或选择器关联 HTML
样式复用通过组合已有工具类复用，无需命名通过 CSS 类、Mixin 或组件复用
命名难题无需为 CSS 类命名，避免命名冲突或语义模糊需思考语义化类名（如 .card-header），易产生命名混乱
自定义能力极高，可精细控制每个属性，快速实现独特设计受预设结构限制，修改需重写规则
学习曲线初期需记忆类名，但逻辑一致，易掌握需掌握 CSS 选择器、层叠、优先级等复杂机制
文件体积开发时类多，但可通过 JIT 模式和 PurgeCSS 优化生产环境体积易产生冗余 CSS，需手动清理或工具优化
维护性样式与结构紧耦合，修改直观；但 HTML 可能臃肿样式与结构分离，利于团队分工；但易出现未使用或冲突的 CSS 规则
响应式支持内置断点前缀（如 md:text-lg），开箱即用需手动编写媒体查询，逻辑分散

1.3 安装与项目集成方式

集成方式语法/步骤用途说明注意事项
使用 npm 安装npm install -D tailwindcss将 Tailwind 添加为开发依赖需 Node.js 环境
初始化配置文件npx tailwindcss init生成 tailwind.config.js 配置文件可添加 --full 参数生成完整配置模板
引入 Tailwind在主 CSS 文件中添加 @tailwind base; @tailwind components; @tailwind utilities;注入 Tailwind 的基础样式、组件占位和工具类必须包含这三个指令，否则样式不生效
构建命令npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch编译并监听 CSS 文件变化可配置为开发服务器的一部分（如 Vite、Webpack）
CDN 方式引入在 HTML <head> 中引入 <script src="https://cdn.tailwindcss.com"></script>快速原型或学习使用，无需构建流程不支持自定义配置、JIT 模式，功能受限，不推荐用于生产环境

1.4 配置文件 tailwind.config.js 概述

配置项语法示例用途说明注意事项
contentcontent: ['./src/**/*.{html,js,jsx,ts,tsx}']指定扫描的文件路径，用于按需提取类名（PurgeCSS）必须正确配置，否则未使用的类会被移除，导致样式缺失
themetheme: { extend: { colors: { primary: '#3490dc' } } }定义设计系统变量（颜色、字体、间距等）可使用 extend 扩展默认主题，避免覆盖
extendextend: { spacing: { '128': '32rem' } }在默认主题基础上添加新值推荐使用 extend 而非完全重写 theme
pluginsplugins: [require('@tailwindcss/forms')]添加官方或第三方插件扩展功能插件可能引入额外类名，需查阅文档使用
corePluginscorePlugins: { preflight: false }控制是否启用 Tailwind 的基础样式重置（Preflight）若与现有 CSS 框架冲突，可禁用
darkModedarkMode: 'class' 或 darkMode: 'media'设置暗黑模式触发方式：类名控制或系统偏好class 更灵活，media 依赖用户系统设置
variantsvariants: { extend: { textColor: ['hover', 'focus', 'group-hover'] } }（v3+ 已简化）旧版本用于控制变体生成v3+ 默认启用常用变体，通常无需配置
importantimportant: true 或 important: '#app'强制所有类名带 !important 或限定作用域用于嵌入第三方环境或避免样式冲突

第二章：核心概念与工作原理

2.1 实用优先（Utility-First）理念

概念名称说明注意事项
实用类（Utility Class）每个类只控制一个 CSS 属性，如 p-4 设置 padding，text-red-500 设置文本颜色。类名语义明确，但 HTML 中类名数量多，需编辑器支持。
组合构建通过组合多个实用类创建复杂样式，如 flex items-center justify-between。避免创建新的 CSS 类，减少样式文件体积。
无抽象层级不预设 .button 或 .card 等组件类，鼓励直接使用工具类组合。可通过 @apply 提取重复样式，但应谨慎使用，避免脱离实用优先原则。
快速原型无需切换文件，直接在 HTML 中调整样式，提升开发效率。适合快速迭代，但需注意可维护性。
设计约束通过配置文件限制颜色、间距等值，确保设计一致性。防止随意使用 magic number，提升团队协作效率。

2.2 响应式设计机制（Breakpoints）

断点前缀默认最小宽度语法示例用途说明注意事项
(无)0pxtext-sm应用于所有屏幕尺寸移动优先，默认样式
sm640pxsm:text-base屏幕 ≥640px 时生效常用于平板设备
md768pxmd:flex屏幕 ≥768px 时生效常用于小桌面显示器
lg1024pxlg:grid屏幕 ≥1024px 时生效常用于标准桌面显示器
xl1280pxxl:container屏幕 ≥1280px 时生效用于大桌面显示器
2xl1536px2xl:max-w-7xl屏幕 ≥1536px 时生效用于超大屏幕
自定义断点-在 theme.screens 中定义扩展或修改默认断点可命名自定义断点（如 3xl: '1920px'）
堆叠使用-md:flex lg:block不同断点应用不同样式后定义的类不会覆盖前一个断点，而是按媒体查询生效

2.3 状态变体（Variants：hover, focus, active 等）

状态变体语法示例用途说明注意事项
hoverhover:bg-gray-200鼠标悬停时生效仅桌面端有效，移动端需谨慎使用
focusfocus:outline-blue-500元素获得焦点时生效（如输入框）对可聚焦元素（input, button, a）有效
focus-withinfocus-within:shadow-lg元素或其子元素获得焦点时生效常用于表单容器高亮
activeactive:bg-blue-600元素被激活（如点击时）生效点击瞬间触发，常用于按钮反馈
visitedvisited:text-purple-600链接被访问过时生效仅对 <a> 标签有效，受浏览器隐私策略限制
disableddisabled:opacity-50元素禁用时生效对 disabled 属性的表单元素有效
group-hovergroup:hover .child-class父元素 hover 时，子元素应用样式需父元素加 group 类，子元素用 group-hover:*
peer-*peer:focus ~ .sibling同级元素状态影响其他同级元素样式需前一个元素加 peer 类，后续兄弟元素用 peer-focus:* 等
aria-*aria-checked:bg-green-500根据 aria-* 属性状态应用样式用于可访问性增强，如复选框、开关
data-*data-open:translate-x-0根据自定义 data-* 属性应用样式需结合 JS 控制 data-* 属性变化

2.4 前缀模式（Preflight 与 @tailwind 指令）

概念/指令语法/说明用途说明注意事项
PreflightTailwind 内置的 CSS 重置 + 增强统一浏览器默认样式，修复常见问题（如字体、链接样式）基于 modern-normalize，比传统 reset 更智能
@tailwind base在 CSS 文件中写入 @tailwind base;注入 Preflight 样式必须放在最前，确保基础样式优先
@tailwind components在 CSS 文件中写入 @tailwind components;用于放置 @apply 定义的组件类或自定义组件样式可为空，但建议保留位置
@tailwind utilities在 CSS 文件中写入 @tailwind utilities;注入所有工具类（由配置生成）必须存在，否则无工具类可用
自定义基础样式使用 @layer base 定义自己的基础样式扩展 Preflight，为自定义元素设置默认样式例如：@layer base { h1 { @apply text-2xl font-bold; } }
禁用 Preflight在 tailwind.config.js 中设置 corePlugins: { preflight: false }若项目已有 CSS 框架（如 Bootstrap），避免样式冲突禁用后需自行处理重置样式
指令顺序要求必须按 base → components → utilities 顺序书写确保样式优先级正确错误顺序可能导致样式覆盖异常

第三章：布局系统

3.1 盒模型基础（Box Sizing、Display）

类名语法用途代码示例注意事项
blockblock设置元素为块级<div class="block">内容</div>独占一行，可设置宽高
inlineinline设置元素为内联<span class="inline">文本</span>不可设置宽高，同行排列
inline-blockinline-block内联块级元素<button class="inline-block">按钮</button>可设置宽高，同行排列
flexflex设置为 Flex 容器<div class="flex">...</div>启用 Flex 布局
inline-flexinline-flex内联 Flex 容器<div class="inline-flex">...</div>不独占行
gridgrid设置为 Grid 容器<div class="grid">...</div>启用 Grid 布局
inline-gridinline-grid内联 Grid 容器<div class="inline-grid">...</div>不独占行
hiddenhidden隐藏元素（display: none）<div class="hidden">隐藏</div>完全从文档流移除
box-borderbox-borderbox-sizing: border-box<div class="box-border p-4">宽高含边框</div>推荐全局使用
box-contentbox-contentbox-sizing: content-box<div class="box-content">宽高不含边框</div>默认行为，宽高仅内容区

3.2 Flexbox 布局工具类

类名语法用途代码示例注意事项
flex-rowflex-row主轴水平（左到右）<div class="flex flex-row">...</div>默认方向
flex-colflex-col主轴垂直（上到下）<div class="flex flex-col">...</div>常用于垂直布局
flex-wrapflex-wrap允许换行<div class="flex flex-wrap">...</div>子项过多时换行
flex-nowrapflex-nowrap禁止换行<div class="flex flex-nowrap">...</div>默认行为
justify-startjustify-start主轴起点对齐<div class="justify-start">...</div>默认对齐
justify-centerjustify-center主轴居中对齐<div class="justify-center">...</div>常用于居中布局
justify-endjustify-end主轴终点对齐<div class="justify-end">...</div>右对齐
justify-betweenjustify-between两端对齐，间距平均分布<div class="justify-between">...</div>常用于导航栏
justify-aroundjustify-around间距环绕子项<div class="justify-around">...</div>两侧间距为中间一半
justify-evenlyjustify-evenly间距完全均分<div class="justify-evenly">...</div>更均匀分布
items-startitems-start交叉轴顶部对齐<div class="flex items-start">...</div>垂直顶部对齐
items-centeritems-center交叉轴居中对齐<div class="flex items-center">...</div>常用于垂直居中
items-enditems-end交叉轴底部对齐<div class="flex items-end">...</div>垂直底部对齐
items-stretchitems-stretch拉伸占满容器<div class="flex items-stretch">...</div>默认行为
self-startself-start单个子项顶部对齐<div class="self-start">...</div>作用于子项
self-centerself-center单个子项居中对齐<div class="self-center">...</div>作用于子项
self-endself-end单个子项底部对齐<div class="self-end">...</div>作用于子项
flex-1flex-1等分剩余空间（flex: 1 1 0%）<div class="flex-1">...</div>常用于占满空间
flex-autoflex-auto自动伸缩（flex: 1 1 auto）<div class="flex-auto">...</div>内容决定基础大小
flex-initialflex-initial不伸缩（flex: 0 1 auto）<div class="flex-initial">...</div>默认行为

3.3 Grid 布局工具类

类名语法用途代码示例注意事项
grid-cols-1 到 12grid-cols-{n}设置列数<div class="grid grid-cols-3">...</div>最多支持 12 列
grid-cols-nonegrid-cols-none不自动创建列轨道<div class="grid grid-cols-none">...</div>手动定义 grid-template-columns
grid-rows-1 到 12grid-rows-{n}设置行数<div class="grid grid-rows-2">...</div>固定行数
grid-flow-rowgrid-flow-row按行填充<div class="grid grid-flow-row">...</div>默认行为
grid-flow-colgrid-flow-col按列填充<div class="grid grid-flow-col">...</div>垂直优先排列
col-span-1 到 12col-span-{n}跨越 n 列<div class="col-span-2">...</div>用于合并列
col-span-fullcol-span-full跨越所有列<div class="col-span-full">...</div>全宽布局
row-span-1 到 6row-span-{n}跨越 n 行<div class="row-span-2">...</div>用于合并行
row-span-fullrow-span-full跨越所有行<div class="row-span-full">...</div>全高布局
col-start-1 到 13col-start-{n}列起始线<div class="col-start-2">...</div>从第 n 条线开始
col-end-1 到 13col-end-{n}列结束线<div class="col-end-4">...</div>到第 n 条线结束
row-start-1 到 7row-start-{n}行起始线<div class="row-start-2">...</div>从第 n 行开始
row-end-1 到 7row-end-{n}行结束线<div class="row-end-3">...</div>到第 n 行结束
gap-{n}gap-{size}设置行列间距<div class="grid gap-4">...</div>支持 0-96 及分数

3.4 定位（Position、Inset、Z-index）

类名语法用途代码示例注意事项
staticstatic默认定位<div class="static">...</div>不受 top/right/bottom/left 影响
relativerelative相对定位<div class="relative">...</div>相对自身位置偏移
absoluteabsolute绝对定位<div class="absolute top-0">...</div>相对于最近定位祖先
fixedfixed固定定位<div class="fixed top-0">...</div>相对于视口
stickysticky粘性定位<div class="sticky top-0">...</div>滚动到阈值后固定
inset-0inset-{n}设置 top/right/bottom/left<div class="absolute inset-0">...</div>四边同时设置
-inset-0-inset-{n}负值偏移<div class="relative -top-4">...</div>支持负数
z-0 到 50z-{n}设置 z-index<div class="z-10">...</div>数值越大层级越高
z-autoz-auto自动层级<div class="z-auto">...</div>浏览器自动分配

3.5 容器与间距（Container、Padding、Margin）

类名语法用途代码示例注意事项
containercontainer响应式容器<div class="container mx-auto">...</div>自动设置最大宽度和水平居中
p-0 到 96p-{size}内边距（四边）<div class="p-4">...</div>支持 0.5, 1, 1.5, 2, … 96
px-0 到 96px-{size}左右内边距<div class="px-6">...</div>常用于水平留白
py-0 到 96py-{size}上下内边距<div class="py-8">...</div>常用于垂直留白
pt-0 到 96pt-{size}上内边距<div class="pt-4">...</div>—
pr-0 到 96pr-{size}右内边距<div class="pr-2">...</div>—
pb-0 到 96pb-{size}下内边距<div class="pb-6">...</div>—
pl-0 到 96pl-{size}左内边距<div class="pl-3">...</div>—
m-0 到 96m-{size}外边距（四边）<div class="m-4">...</div>支持负值 -m-4
mx-automx-auto水平居中<div class="mx-auto w-1/2">...</div>需设置宽度
mx-0 到 96mx-{size}左右外边距<div class="mx-6">...</div>支持负值
my-0 到 96my-{size}上下外边距<div class="my-8">...</div>支持负值
mt-0 到 96mt-{size}上外边距<div class="mt-4">...</div>—
mr-0 到 96mr-{size}右外边距<div class="mr-2">...</div>—
mb-0 到 96mb-{size}下外边距<div class="mb-6">...</div>—
ml-0 到 96ml-{size}左外边距<div class="ml-3">...</div>—

第四章：样式与视觉表现

4.1 颜色系统（Color Palette、文本与背景色）

类名语法用途代码示例注意事项
text-{color}text-gray-500设置文本颜色<p class="text-blue-600">文本</p>支持 gray, red, yellow, green, blue, purple, pink, indigo 等
bg-{color}bg-red-500设置背景色<div class="bg-green-200">...</div>—
border-{color}border-blue-500设置边框色<div class="border border-purple-300">...</div>需先有 border 类
divide-{color}divide-y divide-gray-200设置分割线颜色<div class="divide-y divide-gray-200">...</div>配合 divide-y 使用
placeholder-{color}placeholder:text-gray-400设置占位符颜色<input class="placeholder:text-green-500" placeholder="输入...">—
ring-{color}ring-blue-500设置轮廓色（focus ring）<input class="focus:ring-blue-500">...</input>配合 focus:ring 使用
transparentbg-transparent透明背景<div class="bg-transparent">...</div>—
currenttext-current当前文本颜色<div class="text-current">...</div>继承父元素颜色
inheritbg-inherit继承父元素背景色<div class="bg-inherit">...</div>—
{color}-50 到 900bg-blue-100颜色深浅（50 最浅，900 最深）<div class="text-red-900">...</div>通常 500 为标准色

4.2 文本样式（字体、大小、粗细、对齐、修饰）

类名语法用途代码示例注意事项
font-sansfont-sans无衬线字体<p class="font-sans">...</p>默认字体栈
font-seriffont-serif衬线字体<p class="font-serif">...</p>—
font-monofont-mono等宽字体<code class="font-mono">...</code>用于代码
text-xs 到 6xltext-lg文本大小<h1 class="text-4xl">标题</h1>xs, sm, base, lg, xl, 2xl, …, 6xl
text-lefttext-left左对齐<p class="text-left">...</p>默认对齐
text-centertext-center居中对齐<p class="text-center">...</p>—
text-righttext-right右对齐<p class="text-right">...</p>—
text-justifytext-justify两端对齐<p class="text-justify">...</p>—
font-thin 到 900font-bold字体粗细<p class="font-semibold">...</p>100-900，bold=700，semibold=600
italicitalic斜体<em class="italic">斜体</em>—
not-italicnot-italic取消斜体<em class="not-italic">正常</em>—
uppercaseuppercase大写<span class="uppercase">text</span>—
lowercaselowercase小写<span class="lowercase">TEXT</span>—
capitalizecapitalize首字母大写<span class="capitalize">hello</span>—
underlineunderline下划线<a class="underline">链接</a>—
overlineoverline上划线<span class="overline">文本</span>—
line-throughline-through删除线<del class="line-through">删除</del>—
no-underlineno-underline无下划线<a class="no-underline">链接</a>—
antialiasedantialiased抗锯齿<div class="antialiased">...</div>更平滑字体渲染
subpixel-antialiasedsubpixel-antialiased子像素抗锯齿<div class="subpixel-antialiased">...</div>默认行为

4.3 边框与圆角（Border、Radius、Shadow）

类名语法用途代码示例注意事项
borderborder添加边框（1px）<div class="border">...</div>默认颜色 currentColor
border-{t,r,b,l}border-t单边框<div class="border-l-4">...</div>支持 t(上), r(右), b(下), l(左)
border-0 到 8border-2边框宽度<div class="border-4">...</div>0=无边框，1=1px，2=2px，…
rounded-nonerounded-none无圆角<div class="rounded-none">...</div>—
rounded-smrounded-sm小圆角<div class="rounded-sm">...</div>0.125rem
roundedrounded默认圆角<div class="rounded">...</div>0.25rem
rounded-mdrounded-md中等圆角<div class="rounded-md">...</div>0.375rem
rounded-lgrounded-lg大圆角<div class="rounded-lg">...</div>0.5rem
rounded-xl 到 fullrounded-full更大圆角<div class="rounded-full">...</div>full=50% 实现圆形
shadow-sm 到 2xlshadow-md阴影大小<div class="shadow-lg">...</div>sm, md, lg, xl, 2xl
shadow-noneshadow-none无阴影<div class="shadow-none">...</div>—
shadow-{color}shadow-blue-500/50自定义阴影颜色<div class="shadow-lg shadow-black/50">...</div>支持透明度（/50）

4.4 背景与渐变（Backgrounds、Gradients）

类名语法用途代码示例注意事项
bg-fixedbg-fixed固定背景<div class="bg-fixed bg-cover">...</div>滚动时背景不动
bg-localbg-local滚动背景<div class="bg-local">...</div>背景随内容滚动
bg-scrollbg-scroll默认滚动<div class="bg-scroll">...</div>默认行为
bg-centerbg-center背景居中<div class="bg-center bg-no-repeat">...</div>支持 center, top, bottom, left, right
bg-coverbg-cover背景覆盖<div class="bg-cover">...</div>填满容器，可能裁剪
bg-containbg-contain背景包含<div class="bg-contain">...</div>完整显示，可能留白
bg-no-repeatbg-no-repeat不重复<div class="bg-no-repeat">...</div>—
bg-repeatbg-repeat重复<div class="bg-repeat">...</div>默认行为
bg-gradient-to-{t,r,b,l}bg-gradient-to-r渐变方向<div class="bg-gradient-to-r from-red-500 to-blue-500">...</div>支持 to-t, to-r, to-b, to-l
from-{color}from-green-400渐变起始色<div class="from-yellow-200">...</div>需配合 bg-gradient
via-{color}via-purple-500渐变中间色<div class="via-pink-400">...</div>可选
to-{color}to-blue-600渐变结束色<div class="to-teal-500">...</div>—

4.5 阴影与滤镜（Box Shadow、Filter、Blur）

类名语法用途代码示例注意事项
blur-noneblur-none无模糊<div class="blur-none">...</div>默认
blur-smblur-sm小模糊<img class="blur-sm">0.125rem
blurblur默认模糊<img class="blur">0.25rem
blur-mdblur-md中等模糊<img class="blur-md">0.375rem
blur-lgblur-lg大模糊<img class="blur-lg">0.5rem
blur-xlblur-xl更大模糊<img class="blur-xl">1rem
blur-2xlblur-2xl超大模糊<img class="blur-2xl">2rem
blur-3xlblur-3xl极大模糊<img class="blur-3xl">4rem
brightness-{n}brightness-125亮度调整<img class="brightness-75">0-200，100=正常
contrast-{n}contrast-125对比度调整<img class="contrast-75">0-200，100=正常
drop-shadowdrop-shadow-md投影滤镜<img class="drop-shadow-lg">独立于 shadow
grayscale-{n}grayscale灰度<img class="grayscale">100%，grayscale-0=关闭
hue-rotate-{n}hue-rotate-15色相旋转<img class="hue-rotate-90">单位 deg，支持 -180 到 180
invert-{n}invert反色<img class="invert">100%，invert-0=关闭
saturate-{n}saturate-150饱和度<img class="saturate-50">0-200，100=正常
sepia-{n}sepia褐色<img class="sepia">100%，sepia-0=关闭
filterfilter启用滤镜<div class="filter blur-sm">...</div>必须添加此基类
filter-nonefilter-none禁用滤镜<div class="filter-none">...</div>重置滤镜

第五章：交互与动态样式

5.1 Hover、Focus、Active 状态样式

类名语法用途代码示例注意事项
hover:*hover:bg-blue-500鼠标悬停时应用样式<button class="bg-gray-200 hover:bg-blue-500">按钮</button>仅桌面端有效，移动端点击后可能持续生效
focus:*focus:outline-blue-500元素获得焦点时应用样式<input class="focus:ring-2 focus:ring-blue-500" />常用于表单、可交互元素，提升可访问性
focus-within:*focus-within:shadow-md容器内子元素获得焦点时应用样式<div class="border focus-within:ring-2">...<input /></div>常用于表单容器高亮
active:*active:bg-blue-700元素被激活（如点击时）应用样式<button class="bg-blue-500 active:bg-blue-700">点击</button>点击瞬间触发，松开恢复
visited:*visited:text-purple-600链接被访问后应用样式<a class="text-blue-500 visited:text-purple-600" href="#">链接</a>仅对 <a> 标签有效，受浏览器隐私策略限制
disabled:*disabled:opacity-50元素禁用时应用样式<button class="disabled:bg-gray-300" disabled>禁用</button>需配合 disabled 属性使用
group-hover:*group-hover:opacity-100父元素加 group 类，子元素在父 hover 时生效<div class="group">...<span class="opacity-0 group-hover:opacity-100">显示</span></div>实现复杂悬停交互，如菜单展开
peer-*peer:focus ~ .sibling-class同级前元素状态影响后续兄弟元素<input class="peer" /><div class="peer-invalid:text-red-500">错误提示</div>常用于表单验证样式联动

5.2 表单元素样式控制

类名语法用途代码示例注意事项
appearance-noneappearance-none移除默认外观（如 select 下拉箭头）<select class="appearance-none bg-white">...</select>常用于自定义下拉样式
bg-nonebg-none无背景<input class="bg-none border">—
bg-opacity-{n}bg-opacity-50背景色透明度<div class="bg-blue-500 bg-opacity-50">半透明</div>支持 0-100，需配合 bg-{color}
text-opacity-{n}text-opacity-75文本颜色透明度<p class="text-red-500 text-opacity-75">半透明文本</p>支持 0-100
placeholder-opacity-{n}placeholder-opacity-50占位符透明度<input class="placeholder-opacity-50" placeholder="输入..." />控制 placeholder 颜色深浅
resizeresize允许拖拽调整大小<textarea class="resize"></textarea>默认允许
resize-noneresize-none禁止拖拽调整大小<textarea class="resize-none"></textarea>常用于固定尺寸文本域
resize-xresize-x仅水平调整<div class="resize-x w-32 h-32">...</div>—
resize-yresize-y仅垂直调整<div class="resize-y w-32 h-32">...</div>—
rounded-{size}rounded-lg表单圆角<input class="rounded-md border" />统一输入框样式
ring-{n}ring-2聚焦轮廓宽度<input class="focus:ring-4 focus:ring-blue-300" />默认 2，可设 0-96
invalid:*invalid:border-red-500表单验证失败时样式<input class="invalid:border-red-500" required pattern="[0-9]{3}" />基于 HTML5 验证 API

5.3 过渡与动画（Transition、Transform、Animation）

类名语法用途代码示例注意事项
transitiontransition启用过渡<div class="bg-blue-500 hover:bg-red-500 transition">...</div>必须添加此基类
transition-nonetransition-none禁用过渡<div class="transition-none">...</div>重置过渡
transition-alltransition-all所有属性过渡<div class="transition-all duration-300">...</div>常用
transition-colorstransition-colors颜色类属性过渡<div class="text-red-500 hover:text-blue-500 transition-colors">...</div>优化性能
transition-opacitytransition-opacity透明度过渡<div class="opacity-0 hover:opacity-100 transition-opacity">...</div>—
transition-shadowtransition-shadow阴影过渡<div class="shadow hover:shadow-xl transition-shadow">...</div>—
duration-{n}duration-300过渡持续时间<div class="transition duration-500">...</div>支持 75, 100, 150, 200, 300, 500, 700, 1000（ms）
ease-linearease-linear线性缓动<div class="transition ease-linear">...</div>匀速
ease-inease-in慢进<div class="transition ease-in">...</div>—
ease-outease-out慢出<div class="transition ease-out">...</div>—
ease-in-outease-in-out慢进慢出<div class="transition ease-in-out">...</div>最常用
delay-{n}delay-150过渡延迟<div class="transition delay-300">...</div>支持 75, 100, 150, 200, 300, 500, 700, 1000（ms）
transformtransform启用变换<div class="transform hover:scale-110">...</div>必须添加此基类
scale-{n}scale-110缩放<div class="hover:scale-105 transition">...</div>支持 0-150（%），如 scale-50, scale-150
scale-x-{n}scale-x-125X 轴缩放<div class="hover:scale-x-100">...</div>—
scale-y-{n}scale-y-75Y 轴缩放<div class="hover:scale-y-100">...</div>—
rotate-{n}rotate-45旋转<div class="rotate-12 hover:rotate-180">...</div>支持 -180 到 180（deg）
translate-x-{n}translate-x-4X 轴平移<div class="hover:translate-x-1 -translate-x-1">...</div>常用于按钮点击反馈
translate-y-{n}translate-y-2Y 轴平移<div class="hover:translate-y-0">...</div>—
skew-x-{n}skew-x-12X 轴倾斜<div class="skew-x-6">...</div>支持 -12 到 12（deg）
skew-y-{n}skew-y-3Y 轴倾斜<div class="skew-y-6">...</div>—
origin-centerorigin-center变换原点<div class="origin-top-left rotate-45">...</div>支持 center, top, bottom, left, right 及组合
animate-noneanimate-none禁用动画<div class="animate-bounce animate-none">...</div>—
animate-spinanimate-spin旋转动画<div class="inline-block w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"></div>常用于加载图标
animate-pulseanimate-pulse脉冲动画（透明度闪烁）<div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>模拟呼吸效果
animate-bounceanimate-bounce弹跳动画<div class="animate-bounce">...</div>—
animate-pinganimate-ping扩散波纹动画<div class="relative"><div class="animate-ping absolute ..."></div></div>常用于通知提示

第六章：响应式设计

6.1 断点系统（sm, md, lg, xl, 2xl）

断点前缀对应最小宽度CSS 媒体查询用途说明注意事项
(无)0px—默认样式，移动优先基础所有设备生效
sm640px@media (min-width: 640px)小屏幕（如平板）前缀 sm:
md768px@media (min-width: 768px)中等屏幕（小桌面）前缀 md:
lg1024px@media (min-width: 1024px)大屏幕（标准桌面）前缀 lg:
xl1280px@media (min-width: 1280px)超大屏幕（大桌面）前缀 xl:
2xl1536px@media (min-width: 1536px)超大桌面或 4K 屏前缀 2xl:
自定义断点—在 theme.screens 中定义扩展或修改默认断点如 3xl: '1920px'

6.2 响应式类前缀的使用

响应式类语法示例用途代码示例注意事项
{breakpoint}:{utility}md:flex, lg:text-lg在指定断点及以上应用样式<div class="block md:flex">...<span class="text-sm md:text-base">文本</span></div>移动优先，小屏用基础类，大屏覆盖
多断点组合sm:p-4 md:p-6 lg:p-8不同断点设置不同值<div class="p-2 sm:p-4 md:p-6">响应式间距</div>从左到右优先级递增
堆叠变体hover:md:bg-blue-500响应式 + 状态组合<div class="hover:bg-gray-200 hover:md:bg-blue-500">悬停时大屏变蓝</div>顺序：状态前缀在前，断点在后
条件启用lg:hidden, md:block大屏隐藏 / 中屏显示<nav class="hidden md:block">桌面导航</nav><nav class="md:hidden">移动菜单</nav>实现响应式导航切换
字体响应text-base sm:text-lg md:text-xl响应式字体大小<h2 class="text-xl sm:text-2xl md:text-3xl">标题</h2>提升可读性
布局切换flex flex-col md:flex-row移动列布局，桌面行布局<div class="flex flex-col md:flex-row">...<div>项1</div><div>项2</div></div>常见响应式布局模式

6.3 移动优先与桌面优先策略

策略说明使用方式代码示例注意事项
移动优先（Mobile-First）默认样式用于移动设备，通过断点类向上覆盖基础类用于小屏，sm: md: 等用于大屏<div class="p-4 sm:p-6 md:p-8">内容</div>Tailwind 默认策略，推荐使用
桌面优先（Desktop-First）默认样式用于桌面，通过负断点向下覆盖使用 max-width 媒体查询，需自定义自定义类：class="max-md:hidden"需在 tailwind.config.js 中配置 max 断点
max 断点配置在 theme.screens 中定义添加最大宽度断点screens: { 'max-sm': { max: '639px' } }实现 max-sm:hidden 类
条件隐藏结合断点控制显示大屏隐藏某元素<div class="hidden lg:block">仅大屏显示</div>常见于侧边栏、广告位
性能考虑仅生成使用的类配置 content 扫描路径content: ['./src/**/*.{html,js,jsx}']避免生成未使用类，减小 CSS 体积
设计一致性遵循设计系统断点与设计稿对齐断点值与 UI 设计工具保持一致提升开发还原度

第七章：自定义与扩展

7.1 自定义主题配置（theme 配置项）

配置项用途配置示例注意事项
colors自定义颜色调色板theme: { colors: { primary: '#3b82f6', secondary: '#6b7280', accent: '#f59e0b' } }替换或扩展默认颜色，支持 CSS 变量
spacing自定义间距系统theme: { spacing: { '1': '0.25rem', '2': '0.5rem', '3': '0.75rem', '4': '1rem', '10': '2.5rem', '20': '5rem' } }影响 p-、m-、gap- 等类
screens定义响应式断点theme: { screens: { sm: '640px', md: '768px', lg: '1024px', xl: '1280px' } }决定 sm:、md: 等前缀的触发点
fontFamily设置字体栈theme: { fontFamily: { sans: ['Inter', 'sans-serif'], mono: ['Fira Code', 'monospace'] } }影响 font-sans、font-mono 类
fontSize自定义字体大小theme: { fontSize: { xs: ['0.75rem', { lineHeight: '1rem' }], sm: ['0.875rem', { lineHeight: '1.25rem' }], base: ['1rem', { lineHeight: '1.5rem' }] } }支持设置字体大小和行高
borderRadius自定义圆角theme: { borderRadius: { none: '0', sm: '0.125rem', DEFAULT: '0.25rem', md: '0.375rem', lg: '0.5rem', full: '9999px' } }影响 rounded-* 类
boxShadow自定义阴影theme: { boxShadow: { sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)', DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)' } }影响 shadow-* 类

7.2 扩展默认配置（extend）

配置项用途配置示例注意事项
extend.colors扩展而非覆盖颜色theme: { extend: { colors: { 'brand-blue': '#0070f3', 'brand-red': '#e30613' } } }保留默认颜色，新增自定义色
extend.spacing扩展间距theme: { extend: { spacing: { '128': '32rem', '144': '36rem' } } }不影响原有间距系统
extend.fontFamily添加字体theme: { extend: { fontFamily: { heading: ['"Playfair Display"', 'serif'] } } }新增 font-heading 类
extend.animation添加自定义动画theme: { extend: { animation: { 'fade-in-up': 'fadeInUp 0.5s ease-out' } } }需配合 @keyframes 使用
extend.keyframes定义关键帧theme: { extend: { keyframes: { fadeInUp: { '0%': { opacity: 0, transform: 'translateY(10px)' }, '100%': { opacity: 1, transform: 'translateY(0)' } } } } }必须与 animation 配合
extend.backgroundImage添加背景图theme: { extend: { backgroundImage: { 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))' } } }可创建 bg-gradient-radial 类

7.3 自定义插件（Plugins）

插件功能用途代码示例注意事项
添加新类扩展 Tailwind 功能plugin(function({ addUtilities }) { addUtilities({ '.text-shadow': { textShadow: '0 2px 4px rgba(0,0,0,0.1)' } }) })使用 addUtilities 注册新类
创建变体添加自定义状态plugin(function({ addVariant }) { addVariant('child', '& > *'); addVariant('child-hover', '& > *:hover') })可创建 child:、child-hover: 前缀
修改现有类覆盖默认行为plugin(function({ matchUtilities, theme }) { matchUtilities({ 'text-shadow': (value) => ({ textShadow: value }) }, { values: theme('textShadow') }) })需谨慎，避免破坏一致性
注册组件创建可复用组件类plugin(function({ addComponents }) { addComponents({ '.btn': { padding: '.5rem 1rem', borderRadius: '.25rem', fontWeight: '600' }, '.btn-blue': { backgroundColor: '#3b82f6', color: 'white' } }) })类似 @apply，但全局可用
条件逻辑动态生成样式plugin(function({ addBase }) { addBase({ '@font-face': { fontFamily: 'Inter', src: 'url(/fonts/inter.woff2) format("woff2")' } }) })可添加 @font-face、@layer 等

7.4 屏幕尺寸自定义（screens）

配置方式说明配置示例注意事项
固定像素值设置最小宽度断点theme: { screens: { tablet: '768px', desktop: '1280px' } }对应类名 tablet:、desktop:
对象语法（min/max）精确控制范围theme: { screens: { 'sm': { min: '640px' }, 'lg': { min: '1024px' }, '3xl': { min: '1536px' }, 'max-md': { max: '767px' } } }支持 max，实现桌面优先
字符串范围设置区间theme: { screens: { 'md': { min: '768px', max: '1023px' } } }仅在该区间内生效
移动优先断点推荐策略theme: { screens: { sm: '640px', md: '768px', lg: '1024px' } }从小屏到大屏递增
桌面优先断点反向策略theme: { screens: { 'max-lg': { max: '1023px' }, 'max-md': { max: '767px' }, 'max-sm': { max: '639px' } } }需配合 max-* 类使用
命名规范语义化命名theme: { screens: { mobile: '0px', tablet: '768px', laptop: '1024px', monitor: '1280px' } }提升代码可读性

第八章：高级用法与最佳实践

8.1 使用 @apply 提取重复样式

场景说明代码示例注意事项
提取按钮样式避免重复写类.btn { @apply px-4 py-2 bg-blue-500 text-white font-medium rounded hover:bg-blue-600; }
.btn-lg { @apply px-6 py-3 text-lg; }		在 CSS 文件中使用
创建组件类封装 UI 组件.card { @apply border rounded-lg p-6 shadow bg-white; }
.card-title { @apply text-xl font-bold mb-2; }		类似传统 CSS 组件
状态组合封装交互样式.link { @apply text-blue-600 underline; }
.link:hover { @apply text-blue-800; }		支持伪类
避免过度使用保持原子化优势不推荐：.header { @apply bg-gray-100 p-4 flex items-center justify-between; }过度封装会失去灵活性
与插件对比全局 vs 局部@apply 作用于 CSS，addComponents 在插件中全局注册插件更适合全局组件

8.2 使用 group 和 peer 实现状态联动

技术用途代码示例注意事项
group + group-hover父级悬停影响子级<div class="group"><img src="avatar.jpg" class="w-10 h-10 rounded-full"/><span class="opacity-0 group-hover:opacity-100">用户名</span></div>父元素加 group，子元素用 group-hover:*
peer + peer-focus同级元素状态联动<input type="checkbox" class="peer sr-only"/><label class="bg-gray-200 peer-checked:bg-blue-500">开关</label>peer 元素需在目标前，用 peer-*:* 影响后续兄弟
表单验证联动错误提示显示<input class="peer border" required /><p class="invisible peer-invalid:visible text-red-500">必填</p>利用 peer-invalid 触发
复杂交互菜单、下拉框<div class="group relative"><button class="group-hover:bg-gray-100">菜单</button><div class="absolute hidden group-hover:block">...</div></div>实现无需 JS 的下拉菜单
局限性浏览器兼容性支持现代浏览器，IE 不支持需考虑降级方案

8.3 处理复杂组件的策略（组件化思维）

策略说明示例注意事项
原子化优先优先使用工具类组合<button class="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"><svg>...</svg><span>提交</span></button>快速构建，无需额外 CSS
适当时封装高度复用组件提取使用 @apply 或插件创建 .btn-primary避免过早抽象
语义化结构使用语义化 HTML<article>、<section>、<nav> 配合工具类提升可访问性和 SEO
命名约定项目级组件命名.card、.navbar、.modal保持一致性
组件库集成结合 UI 库使用 Headless UI、DaisyUI 等平衡灵活性与开发效率

8.4 性能优化：减少生成的 CSS 体积

优化方法说明配置/示例注意事项
配置 content仅扫描使用路径module.exports = { content: ['./src/pages/**/*.{js,jsx,ts,tsx}', './src/components/**/*.{js,jsx,ts,tsx}'] }最关键，避免生成未使用类
移除未使用类生产环境清理npx tailwindcss -o styles.css --minify开发时禁用 purge，生产启用
按需加载动态类名处理避免字符串拼接如 class="text-${color}"JIT 模式下动态类可能不生成
使用 preflight重置基础样式默认启用，可配置 corePlugins.preflight确保样式一致性
禁用不使用模块减少功能corePlugins: { float: false, objectFit: false }根据项目需求裁剪
CDN 或预编译加快加载使用 @tailwindcss/jit 或预构建 CSS适合大型项目

8.5 JIT 模式与按需生成类名

特性说明使用方式注意事项
即时编译（JIT）按需生成类名，解决生成体积问题Tailwind v3+ 默认启用无需额外配置
按需生成仅生成实际使用的类基于 content 配置扫描文件动态类名（如模板字符串）可能无法识别
支持任意值使用方括号语法<div class="top-[23px] bg-[#bada55]">JIT 模式下支持 class="text-[22px]"
减少构建时间增量编译修改文件后快速生成新类开发体验极佳
与 PurgeCSS 对比替代传统 PurgeJIT 是现代替代方案v3 后 purge 已弃用，改用 content
动态类处理需特殊处理使用 safelist 配置确保生成：module.exports = { content: [...], safelist: ['text-red-500', 'bg-blue-600'] }—

第九章：与框架集成

9.1 与 React（Create React App / Vite）

初始化项目并安装 Tailwind CSS

方法名称语法用途代码示例注意事项
安装 Tailwind CSSnpm install -D tailwindcss postcss autoprefixer在项目中引入 Tailwind CSS 及其依赖npm install -D tailwindcss postcss autoprefixer确保 Node.js 版本兼容
创建配置文件npx tailwindcss init -p自动生成 tailwind.config.js 和 postcss.config.js 文件npx tailwindcss init -p配置文件需根据需求调整

配置 tailwind.config.js 和 postcss.config.js

方法名称说明代码示例注意事项
配置内容路径content: ["./src/**/*.{js,jsx}"]指定 Tailwind 应扫描的文件路径module.exports = { content: ["./src/**/*.{js,jsx}"], theme: {}, plugins: [] }
引入插件plugins: [require('@tailwindcss/forms')]添加额外功能或自定义样式plugins: [require('@tailwindcss/forms')]

在 React 组件中使用 Tailwind 类名

方法名称语法用途代码示例注意事项
使用类名className="text-blue-500 hover:text-green-600"应用 Tailwind 样式到元素<button className="bg-blue-500 text-white px-4 py-2 rounded">按钮</button>尽量避免内联样式，保持一致性

9.2 与 Vue.js 集成

在 Vue CLI 或 Vite 项目中引入 Tailwind CSS

方法名称语法用途代码示例注意事项
安装 Tailwind CSSnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest在 Vue 项目中安装 Tailwind CSSnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest确认 Vue 版本兼容性
初始化配置npx tailwindcss init -p创建必要的配置文件npx tailwindcss init -p根据项目结构修改配置

使用 Tailwind 的自定义样式和组件

方法名称说明代码示例注意事项
自定义主题修改 tailwind.config.js 中的主题设置theme: { extend: { colors: { 'primary': '#3490dc' } } }主题颜色应统一管理
组件库创建可复用的 Vue 组件并应用 Tailwind 样式<template><button :class="[customClass]">点击</button></template>组件应封装良好，便于维护

在 Vue 单文件组件 (SFC) 中应用 Tailwind 样式

方法名称语法用途代码示例注意事项
使用 scoped 样式<style scoped> 中导入 Tailwind在单文件组件中引入 Tailwind<style scoped> @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; </style>scoped 样式仅影响当前组件

9.3 与 Next.js 集成

在 Next.js 项目中设置 Tailwind CSS

方法名称语法用途代码示例注意事项
安装依赖npm install -D tailwindcss postcss autoprefixer在 Next.js 项目中安装 Tailwind 相关依赖npm install -D tailwindcss postcss autoprefixer确保版本匹配
创建配置文件npx tailwindcss init -p生成默认配置文件npx tailwindcss init -p需要根据项目结构调整

配置全局样式和按需加载

方法名称说明代码示例注意事项
全局样式在 _app.js 中导入基础样式import '../styles/globals.css'基础样式应在每个页面加载
按需加载通过 content 字段指定扫描路径content: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}']精确控制生成的 CSS 大小

使用 Tailwind 动态类名在 Next.js 页面和组件

方法名称语法用途代码示例注意事项
动态类名使用模板字符串动态插入类名<div className={text-${color}}>文本</div>动态类名可能不会被 JIT 编译器识别
条件类名根据状态条件添加类名<div className={isActive ? 'bg-blue-500' : 'bg-gray-300'}>内容</div>逻辑清晰，便于调试

9.4 与 Laravel / PHP 项目集成

在 Laravel Mix 中配置 Tailwind CSS

方法名称语法用途代码示例注意事项
安装依赖npm install -D tailwindcss在 Laravel 项目中安装 Tailwindnpm install -D tailwindcss确保 Laravel Mix 正常工作
初始化配置npx tailwindcss init创建 tailwind.config.jsnpx tailwindcss init需根据 Laravel 结构调整配置

使用 Laravel Blade 模板中的 Tailwind 类

方法名称说明代码示例注意事项
在 Blade 模板中使用利用 Tailwind 快速构建布局<div class="flex justify-center items-center h-screen">内容</div>—

创建可复用的 PHP 组件与 Tailwind 结合

方法名称说明代码示例注意事项
创建 Blade 组件使用 Blade 组件封装常用 UI<x-button class="bg-blue-500 text-white">按钮</x-button>组件应具备良好的扩展性和复用性
组件属性使用组件属性传递动态数据<x-card title="卡片标题" description="卡片描述"></x-card>属性应明确定义，便于调用

第十章：实战项目演练

10.1 构建响应式导航栏

项目内容代码示例注意事项
基础结构使用 nav 和 flex 布局<nav class="bg-white shadow"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex justify-between h-16"><div class="flex">Logo</div><div class="hidden sm:ml-6 sm:flex sm:space-x-8">菜单项</div><div class="flex items-center sm:hidden">菜单按钮</div></div></div></nav>使用 max-w-7xl 限制最大宽度，mx-auto 居中
桌面菜单水平排列的导航链接<a href="#" class="border-b-2 border-transparent text-gray-500 hover:border-gray-300 inline-flex items-center px-1 pt-1 text-sm font-medium">首页</a>使用 border-b-2 实现选中下划线效果
移动菜单按钮点击展开菜单的汉堡图标<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none"><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></button>配合 JavaScript 控制 hidden 类切换
移动菜单面板隐藏/显示的侧边菜单<div class="absolute top-16 right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 hidden"><div class="py-1" role="menu"><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">首页</a></div></div>初始 hidden，JS 控制 hidden → block
交互逻辑使用 hidden 和 flex 切换显示document.getElementById('menu-button').addEventListener('click', function() { const panel = document.getElementById('mobile-menu'); panel.classList.toggle('hidden'); });可使用 group 或 data-* 属性管理状态

10.2 制作卡片组件库

卡片类型特点代码示例注意事项
基础卡片包含标题、内容、阴影<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white"><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>使用 overflow-hidden 避免圆角溢出
图文卡片包含图片的卡片<div class="max-w-sm rounded-lg overflow-hidden shadow-md"><img class="w-full h-48 object-cover" src="image.jpg" alt="图片"><div class="p-4"><h3 class="text-lg font-semibold text-gray-900">图文标题</h3><p class="text-gray-600 mt-1">简短描述文字。</p></div></div>object-cover 保持图片比例
悬停效果添加交互反馈<div class="group rounded-lg overflow-hidden shadow hover:shadow-xl transition-shadow duration-300"><img class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" src="image.jpg"><div class="p-4"><h3 class="text-lg font-semibold">悬停放大</h3></div></div>使用 group 实现父子联动动画
卡片网格响应式布局展示多张卡片<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"><div class="...">卡片1</div><div class="...">卡片2</div><div class="...">卡片3</div></div>使用 gap-6 控制间距，断点适配
组件化使用 @apply 封装.card { @apply max-w-sm rounded-lg overflow-hidden shadow bg-white; }
.card-img { @apply w-full h-48 object-cover; }		适合高度复用的 UI 组件

10.3 实现登录/注册页面布局

模块功能代码示例注意事项
页面容器居中布局<div class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8"><div class="sm:mx-auto sm:w-full sm:max-w-md"><h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">登录到你的账户</h2></div></div>使用 min-h-screen 占满视口，flex-col 垂直居中
登录表单输入框与按钮<form class="space-y-6"><input type="email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"><button type="submit" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">登录</button></form>使用 space-y-6 控制垂直间距
社交登录第三方登录按钮<div class="mt-6"><div class="relative"><div class="absolute inset-0 flex items-center"><div class="w-full border-t border-gray-300"></div></div><div class="relative flex justify-center text-sm"><span class="px-2 bg-gray-50 text-gray-500">或使用以下方式登录</span></div></div></div>使用 grid-cols-2 并列按钮
表单验证错误提示样式<div class="text-sm text-red-600 mt-1 peer-invalid:visible visible">请输入有效的邮箱地址</div>结合 peer-* 实现输入框与提示联动
注册切换登录/注册页切换链接<p class="mt-2 text-center text-sm text-gray-600">还没有账户？<a href="#" class="font-medium text-blue-600 hover:text-blue-500">立即注册</a></p>提供清晰的导航路径

10.4 构建完整响应式主页

区域布局与样式代码示例注意事项
头部（Header）固定导航栏<header class="sticky top-0 z-50 bg-white shadow"><nav>...</nav></header>sticky 实现滚动吸附
英雄区域（Hero）大图+标题+CTA<section class="bg-blue-50"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center"><h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl md:text-6xl">主标题</h1><p class="mt-6 text-xl text-gray-600">副标题描述</p><a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md text-lg font-medium">开始使用</a></div></section>使用 text-center 居中内容
特性区域（Features）图标+标题+描述网格<section class="py-16 bg-white"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="grid grid-cols-1 gap-8 md:grid-cols-3"><div class="text-center"><div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto">图标</div><h3 class="mt-4 text-lg font-medium">特性1</h3><p class="mt-2 text-gray-600">描述文字</p></div></div></div></section>md:grid-cols-3 实现响应式网格
客户评价（Testimonials）引用卡片轮播<section class="py-16 bg-gray-50"><div class="max-w-3xl mx-auto px-4"><blockquote class="text-center"><p class="text-xl text-gray-700">"这是一款出色的产品，极大提升了我们的效率。"</p><footer class="mt-6"><cite class="font-semibold">— 客户姓名，公司</cite></footer></blockquote></div></section>使用 max-w-3xl 限制宽度提升可读性
页脚（Footer）多列链接+版权信息<footer class="bg-gray-900 text-white"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"><div class="grid grid-cols-2 md:grid-cols-4 gap-8"><div><h3 class="text-sm font-semibold">产品</h3><ul class="mt-4 space-y-2"><li><a href="#" class="text-gray-300 hover:text-white">功能</a></li></ul></div></div><div class="mt-8 pt-8 border-t border-gray-800 text-center"><p class="text-gray-400">© 2025 公司名称. 保留所有权利.</p></div></div></footer>使用 border-t 分隔版权区