📦 容器与盒子

容器 (Container)

✨ 预览效果 (宽度自适应+max-width)

我是 Container 容器，在大屏下居中且最大宽度受限制

<div class="container mx-auto px-4">内容</div>

Tailwind: container 设置最大宽度，mx-auto 水平居中，px-* 内边距

盒子大小 (Box Sizing)

border-box 总宽包含内边距+边框

content-box 宽度仅内容

/* border-box (推荐) */
.box { box-sizing: border-box; }
/* Tailwind: .box-border */

/* content-box */
.box { box-sizing: content-box; }
/* Tailwind: .box-content */

显示类型 (Display)

inlineblock

flex

inline-flexhidden

<div class="block">块级</div>
<span class="inline-block">行内块</span>
<div class="flex">弹性盒子</div>
<div class="hidden">隐藏</div>

浮动与清除

图片浮动左侧，文字环绕效果。使用 .float-left 实现。清除浮动使用 .clearfix 或 clear-both。

<img class="float-left mr-4">
<div class="clear-both"></div>
/* Tailwind: float-left, float-right, clear-both */

宽高 (Width/Height)

w-16

w-24

w-32

<div class="w-64 h-32">固定宽高</div>
<div class="w-full">宽度100%</div>
<div class="h-screen">高度视口100%</div>

最大宽高 (Max-Width/Height)

max-w-md：最大宽度28rem，超长文本演示截断效果

<div class="max-w-md">最大宽度 28rem</div>
<div class="max-w-full">最大宽度100%</div>
<div class="max-h-32">最大高度 8rem</div>

最小宽高 (Min-Width/Height)

min-w-48 (最小宽度12rem)

<div class="min-w-0">最小宽度0</div>
<div class="min-h-screen">最小高度视口</div>
<div class="min-w-full">最小宽度100%</div>

溢出 (Overflow)

overflow-hidden 超出内容被裁剪隐藏

overflow-auto 超出显示滚动条滚动内容区域可滚动

<div class="overflow-hidden">隐藏溢出</div>
<div class="overflow-auto">自动滚动</div>
<div class="overflow-scroll">强制滚动</div>
<div class="overflow-visible">溢出可见(默认)</div>

元素适配方式 (object-fit)

object-contain

object-cover

object-fill

object-none

<img class="object-contain">  // 包含完整显示
<img class="object-cover">   // 覆盖裁剪填充
<img class="object-fill">    // 拉伸填充
<img class="object-none">    // 原尺寸显示
<img class="object-scale-down"> // 缩小显示

元素定位 (object-position)

object-top

object-center

object-bottom

<img class="object-cover object-top">     // 顶部对齐
<img class="object-cover object-center">  // 居中对齐
<img class="object-cover object-bottom">  // 底部对齐
<img class="object-left-top">             // 左上角

元素可见性 (visibility)

visible

invisible(占位)

可见

collapse(表格)

<div class="visible">可见(默认)</div>
<div class="invisible">隐藏但保留占位</div>
<div class="hidden">完全隐藏不占位</div>
<div class="collapse">折叠(表格专用)</div>

元素隔离 (isolation)

isolate 创建独立堆叠上下文

isolation 用于防止混合模式、z-index 等向外传播

<div class="isolate">
  创建独立的堆叠上下文
</div>
/* 用于控制混合模式和z-index的影响范围 */

📏 间距与尺寸

内边距 (Padding)

p-4 (内边距1rem) 让内容与边缘有呼吸空间

pl-8 (左内边距32px) 特殊效果

/* Tailwind 内边距工具类 */
<div class="p-4"> 四周内边距 </div>
<div class="px-6 py-3"> 左右+垂直 </div>
<div class="pt-2 pb-2 pl-5 pr-5"> 单独方向 </div>
/* 对应CSS: padding: 1rem; padding-left: 1.25rem */

外边距 (Margin)

m-2 (外边距8px)

ml-auto 自动左外边距

mx-4 左右边距

/* 常用外边距 */
<div class="m-4">外边距1rem</div>
<div class="mt-6 mb-4">上下边距</div>
<div class="mx-auto">水平居中</div>
/* 对应CSS: margin: 1rem; margin-left: auto; */

宽高 & 尺寸扩展

w-24

w-32

max-w-xs 最大宽度限制，超长文本自动截断

<div class="w-64 h-32">固定宽高</div>
<div class="w-full max-w-lg">全宽但限制最大</div>
<div class="min-h-screen">最小高度视口</div>

横向元素间距 (space-x)

1

2

3

1

2

3

1

2

3

<div class="flex space-x-2">横向间距0.5rem</div>
<div class="flex space-x-4">横向间距1rem</div>
<div class="flex space-x-8">横向间距2rem</div>

纵向元素间距 (space-y)

1 (space-y-2)

2

3

1 (space-y-4)

2

3

<div class="space-y-2">纵向间距0.5rem</div>
<div class="space-y-4">纵向间距1rem</div>
<div class="space-y-6">纵向间距1.5rem</div>

横向分割线 (divide-x)

1

2

3

1

2

3

粗分割线

4px

效果

<div class="flex divide-x divide-gray-600">横向分割线</div>
<div class="flex divide-x-2 divide-blue-500">2px蓝色分割线</div>

纵向分割线 (divide-y)

项目1

项目2

项目3

2px分割线

蓝色

效果

<div class="divide-y divide-gray-600">纵向分割线</div>
<div class="divide-y-2 divide-purple-500">2px紫色分割线</div>

✍️ 排版与文本

字体大小 (Font Size)

text-sm: 超小文本

text-sm: 小号文本

text-base: 基础文本

text-lg: 大号文本

text-xl: 超大文本

<p class="text-sm">超小文本</p>
<p class="text-sm">小号文本</p>
<p class="text-base">基础文本</p>
<p class="text-lg">大号文本</p>
<p class="text-xl">超大文本</p>

字体粗细 (Font Weight)

font-thin: 纤细字体

font-light: 轻字体

font-normal: 正常字体

font-medium: 中等字体

font-bold: 粗体

font-black: 超粗体

<p class="font-thin">纤细字体</p>
<p class="font-light">轻字体</p>
<p class="font-normal">正常字体</p>
<p class="font-bold">粗体</p>

行高 (Line Height)

leading-none: 紧凑行高，适合标题

leading-tight: 较紧凑

leading-normal: 正常行高

leading-relaxed: 宽松行高，适合阅读

leading-loose: 非常宽松

<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>

字间距 (Letter Spacing)

tracking-tighter: 非常紧凑

tracking-tight: 紧凑

tracking-normal: 正常间距

tracking-wide: 稍宽

tracking-wider: 更宽

tracking-widest: 最宽

<p class="tracking-tight">紧凑字间距</p>
<p class="tracking-normal">正常字间距</p>
<p class="tracking-wide">宽松字间距</p>

文本对齐 (Text Align)

text-left: 左对齐

text-center: 居中对齐

text-right: 右对齐

text-justify: 两端对齐

<p class="text-left">左对齐文本</p>
<p class="text-center">居中文本</p>
<p class="text-right">右对齐文本</p>
<p class="text-justify">两端对齐文本</p>

换行与截断

whitespace-normal: 正常换行，这是一段很长的文本内容演示换行效果

whitespace-nowrap: 不换行，超长滚动

truncate: 单行截断省略，这是一段很长的文本会被截断

break-words: 长单词内部换行，Supercalifragilisticexpialidocious

<div class="whitespace-normal">正常换行</div>
<div class="whitespace-nowrap">不换行</div>
<div class="truncate">单行截断...</div>
<div class="break-words">长单词换行</div>

文本缩进 (Text Indent)

indent-4: 首行缩进1rem。这是一段演示文本，可以看到第一行有缩进效果，后续行正常排列，适合段落排版使用。

<p class="indent-4">首行缩进1rem</p>
<p class="indent-8">首行缩进2rem</p>
/* 对应CSS: text-indent: 1rem */

大小写转换

normal-case: Hello World 正常显示

uppercase: Hello World 全部大写

lowercase: Hello World 全部小写

capitalize: hello world 首字母大写

<p class="uppercase">全部大写</p>
<p class="lowercase">全部小写</p>
<p class="capitalize">首字母大写</p>

文本装饰

underline: 下划线

line-through: 删除线

overline: 上划线

no-underline: 无装饰

<p class="underline">下划线文本</p>
<p class="line-through">删除线文本</p>
<a class="no-underline">无下划线链接</a>

文本溢出

truncate: 这是一段很长很长的文本会被显示为省略号...

另一种方式实现文本溢出省略号效果

<div class="truncate">超出显示省略号...</div>
/* 需要配合 w-* 或 max-w-* 使用 */
/* CSS: text-overflow: ellipsis */

列表样式 (List Style)

list-disc: 实心圆点
无序列表项

list-decimal: 数字编号
有序列表项

<ul class="list-disc list-inside">
  <li>实心圆点列表</li>
</ul>
<ol class="list-decimal list-outside">
  <li>数字编号列表</li>
</ol>
<ul class="list-none">无标记列表</ul>

垂直对齐 (Vertical Align)

baselinetopmiddlebottomtext-top
subsuper

<span class="align-baseline">基线对齐</span>
<span class="align-top">顶部对齐</span>
<span class="align-middle">居中对齐</span>
<span class="align-bottom">底部对齐</span>
/* 常用于图片与文字对齐 */

💪 Flex 布局 (Flexbox)

基础 Flex 容器

1

2

3

<div class="flex">  /* 弹性容器 */
  <div>项目1</div>
  <div>项目2</div>
</div>
/* 子元素自动排列在一行 */

Flex 方向 (Flex Direction)

flex-row →

1

2

flex-col ↓

1

2

<div class="flex flex-row">水平排列(默认)</div>
<div class="flex flex-col">垂直排列</div>
<div class="flex flex-row-reverse">反向水平</div>
<div class="flex flex-col-reverse">反向垂直</div>

主轴对齐 (Justify Content)

start

center

between

<div class="justify-start">起始对齐</div>
<div class="justify-center">居中对齐</div>
<div class="justify-between">两端对齐</div>
<div class="justify-around">均匀分布</div>
<div class="justify-evenly">完全均匀</div>

交叉轴对齐 (Align Items)

1

2

3

start

1

2

3

center

1

2

3

end

<div class="items-start">顶部对齐</div>
<div class="items-center">居中</div>
<div class="items-end">底部对齐</div>
<div class="items-stretch">拉伸填充</div>

Flex 换行 (Flex Wrap)

1

2

3

4

<div class="flex flex-wrap">自动换行</div>
<div class="flex flex-nowrap">不换行</div>
<div class="flex flex-wrap-reverse">反向换行</div>

内容间距 (Gap)

1

2

3

<div class="flex gap-2">间距0.5rem</div>
<div class="flex gap-4">间距1rem</div>
<div class="flex gap-x-4 gap-y-2">行列不同间距</div>

元素排序 (Order)

1(order:3)

2(order:1)

3(order:2)

<div class="order-1">排第1</div>
<div class="order-2">排第2</div>
<div class="order-last">排最后</div>
<div class="order-first">排最前</div>

元素基础尺寸 (Flex Basis)

basis-1/4

basis-1/2

basis-1/4

<div class="basis-1/4">占1/4宽度</div>
<div class="basis-1/2">占1/2宽度</div>
<div class="basis-full">占满整行</div>

多行对齐 (Align Content)

1

2

3

4

content-center

<div class="content-center">多行居中</div>
<div class="content-between">两端对齐</div>
/* 需要 flex-wrap 配合 */

Flex 伸缩 (Grow/Shrink)

grow

固定

<div class="flex-grow">占据剩余空间</div>
<div class="flex-shrink-0">不缩小</div>
<div class="flex-1">flex:1 1 0%</div>

项目独立对齐 (Self Align)

默认

self-center

self-end

<div class="self-start">顶部对齐</div>
<div class="self-center">居中</div>
<div class="self-end">底部对齐</div>

导航栏布局实例

Logo

首页关于

<nav class="flex justify-between items-center">
  <div>Logo</div>
  <div class="flex gap-4">菜单项</div>
  <button>按钮</button>
</nav>

卡片网格布局实例

卡片1

卡片2

卡片3

<div class="flex flex-wrap gap-4">
  <div class="w-[calc(33%-1rem)]">卡片</div>
  <div class="flex-1 min-w-[200px]">响应式卡片</div>
</div>

🔲 网格布局 (CSS Grid)

基础 Grid 容器

1

2

3

4

<div class="grid">  /* 网格容器 */
  <div>项目1</div>
  <div>项目2</div>
</div>
/* 需要配合 grid-cols-* 定义列数 */

网格列数 (Grid Columns)

1

2

1

2

3

<div class="grid grid-cols-2">2列布局</div>
<div class="grid grid-cols-3">3列布局</div>
<div class="grid grid-cols-4">4列布局</div>
<div class="grid grid-cols-6">6列布局</div>

网格行数 (Grid Rows)

1

2

3

4

<div class="grid grid-rows-2 grid-cols-2">
  <div>1</div> <div>2</div>
  <div>3</div> <div>4</div>
</div> /* 固定2行 */

自动网格布局

自动行高

内容

自适应

<div class="auto-rows-min">最小行高</div>
<div class="auto-rows-max">最大行高</div>
<div class="auto-cols-auto">自动列宽</div>

网格间距 (Gap)

gap-4

间距1rem

项目3

项目4

<div class="gap-2">间距0.5rem</div>
<div class="gap-4">间距1rem</div>
<div class="gap-6">间距1.5rem</div>

行列间距 (Gap X/Y)

行间距2

列间距6

项目3

项目4

<div class="gap-x-4">列间距1rem</div>
<div class="gap-y-2">行间距0.5rem</div>
<div class="gap-x-6 gap-y-3">行列不同间距</div>

网格列定位 (Column Span)

col-span-2

2

3

4

<div class="col-span-1">占1列</div>
<div class="col-span-2">占2列</div>
<div class="col-span-3">占满整行</div>

网格行定位 (Row Span)

row-span-2

2

3

<div class="row-span-1">占1行</div>
<div class="row-span-2">占2行</div>
<div class="row-span-3">占3行</div>

元素跨列/跨行

col-span-2
row-span-2

2

3

4

<div class="col-span-2 row-span-2">
  同时跨2列2行
</div>

网格对齐方式

居中

<div class="place-items-center">项目居中</div>
<div class="justify-items-start">列起始</div>
<div class="items-end">行底部对齐</div>

仪表板布局实例

Header

Sidebar

Main Content

Footer

<div class="grid grid-cols-12 gap-4">
  <div class="col-span-12">头部</div>
  <div class="col-span-3">侧边栏</div>
  <div class="col-span-9">内容区</div>
  <div class="col-span-12">底部</div>
</div>

图片网格布局实例

图片1

图片2

图片3

图片4

图片5

<div class="grid grid-cols-3 md:grid-cols-4 gap-4">
  <img class="w-full h-48 object-cover">
  <div class="col-span-2 row-span-2">特色图片</div>
</div>
/* 响应式图片画廊 */

🎨 颜色与背景 (Colors & Background)

文字颜色 (Text Color)

text-blue-400: 蓝色文字

text-red-400: 红色文字

text-green-400: 绿色文字

text-yellow-400: 黄色文字

text-purple-400: 紫色文字

text-pink-400: 粉色文字

<p class="text-blue-500">蓝色文字</p>
<p class="text-red-600">深红文字</p>
<p class="text-gray-400">灰色文字</p>
/* 支持 50-900 色阶 */

背景色 (Background Color)

bg-blue-600

bg-red-600

bg-green-600

bg-purple-600

bg-amber-500

<div class="bg-blue-500">蓝色背景</div>
<div class="bg-gray-800">深灰背景</div>
/* 支持任意颜色和透明度 */

边框色 (Border Color)

border-blue-500

border-red-500

border-green-500

<div class="border-2 border-blue-500">蓝色边框</div>
<div class="border-4 border-red-600">粗红边框</div>

不透明度 (Opacity)

100%

75%

50%

25%

<div class="opacity-100">完全不透明</div>
<div class="opacity-50">半透明</div>
<div class="opacity-0">完全透明</div>

背景尺寸 (Background Size)

bg-cover

bg-contain

<div class="bg-cover">覆盖整个容器</div>
<div class="bg-contain">完整显示图片</div>
<div class="bg-auto">原始尺寸</div>

背景位置 (Background Position)

center

top

<div class="bg-center">居中</div>
<div class="bg-top">顶部对齐</div>
<div class="bg-bottom">底部对齐</div>

背景重复 (Background Repeat)

bg-repeat

bg-no-repeat

<div class="bg-repeat">平铺重复</div>
<div class="bg-no-repeat">不重复</div>
<div class="bg-repeat-x">水平重复</div>

渐变 (Gradient)

from-blue-500 to-purple-600

from-green-500 to-teal-500

from-pink-500 to-rose-600

from-amber-500 to-orange-600

<div class="bg-gradient-to-r from-blue-500 to-purple-600">
  从左到右渐变
</div>
/* 方向: to-r, to-l, to-t, to-b, to-tr, to-tl, to-br, to-bl */
/* 支持多个颜色节点: via-* */

背景透明度 (bg-opacity)

100%

75%

50%

25%

10%

<div class="bg-blue-600 bg-opacity-50">50%透明背景</div>
<div class="bg-red-500 bg-opacity-25">25%透明背景</div>
/* 简写: bg-blue-500/50 */

文字透明度 (text-opacity)

text-opacity-100

text-opacity-75

text-opacity-50

text-opacity-25

<p class="text-blue-500 text-opacity-50">半透明文字</p>
<p class="text-red-500/50">简写: 50%透明</p>

背景滤镜 (backdrop-filter)

backdrop-blur-sm 背景模糊

backdrop-grayscale 灰度滤镜

<div class="backdrop-blur-sm">背景模糊效果</div>
<div class="backdrop-grayscale">背景灰度效果</div>
<div class="backdrop-brightness-150">背景亮度</div>

背景模糊 (backdrop-blur)

blur-sm

blur

blur-md

blur-lg

<div class="backdrop-blur-sm">轻度背景模糊</div>
<div class="backdrop-blur-md">中度背景模糊</div>
<div class="backdrop-blur-xl">重度背景模糊</div>

🖌️ 边框与轮廓 (Borders & Outline)

边框宽度 (Border Width)

border

border-2

border-4

border-8

<div class="border">默认1px边框</div>
<div class="border-2">2px边框</div>
<div class="border-4">4px边框</div>
<div class="border-t-2">上边框2px</div>

边框样式 (Border Style)

solid

dashed

dotted

double

<div class="border-solid">实线边框</div>
<div class="border-dashed">虚线边框</div>
<div class="border-dotted">点状边框</div>
<div class="border-double">双线边框</div>
<div class="border-none">无边框</div>

边框圆角 (Border Radius)

rounded-none

rounded-sm

rounded-md

rounded-lg

rounded-xl

rounded-full

<div class="rounded-none">无圆角</div>
<div class="rounded-md">中等圆角</div>
<div class="rounded-lg">大圆角</div>
<div class="rounded-full">完全圆形</div>
<div class="rounded-t-lg">仅顶部圆角</div>

边框颜色 (Border Color)

border-blue-500

border-red-500

border-green-500

border-purple-500

border-yellow-500

<div class="border border-blue-500">蓝色边框</div>
<div class="border-t-2 border-red-600">上边框红色</div>
<div class="border-l-4 border-green-500">左边框绿色</div>

轮廓 (Outline)

<button class="outline-none">无轮廓</button>
<button class="outline outline-2 outline-blue-500">蓝色轮廓</button>
/* outline-offset-2 控制偏移量 */

分割线 (Divider)

底部边框分割线

左侧边框分割效果

<hr class="border-t border-gray-600">水平分割线
<div class="border-b">底部边框</div>
<div class="border-l-4 border-blue-500 pl-4">左侧边框</div>

圆角半径 (Radius Size)

rounded-tl-xl

rounded-tr-xl

rounded-br-xl

rounded-bl-xl

<div class="rounded-t-lg">顶部圆角</div>
<div class="rounded-r-lg">右侧圆角</div>
<div class="rounded-b-lg">底部圆角</div>
<div class="rounded-l-lg">左侧圆角</div>

📍 定位与层级 (Position & Z-index)

Static 定位

static 定位（默认）

正常文档流，top/left/right/bottom 无效

<div class="static">静态定位（默认）</div>
/* 不受 top/right/bottom/left 影响 */
/* 保持在正常文档流中 */

Relative 定位

正常元素

relative (top-4 left-4)

<div class="relative">相对定位</div>
/* 相对于自身原始位置偏移 */
<div class="relative top-2 left-4">向下2向右4</div>

Absolute 定位

父容器 relative

absolute (bottom-2 right-2)

<div class="relative">父容器</div>
  <div class="absolute top-0 right-0">右上角</div>
/* 相对于最近的非 static 父元素定位 */

Fixed 定位

fixed 定位相对于浏览器视口

示例：返回顶部按钮、固定导航栏

<div class="fixed top-0 left-0">固定左上角</div>
<div class="fixed bottom-4 right-4">固定右下角</div>
/* 相对于浏览器视口，滚动时位置不变 */

Sticky 定位

sticky 顶部吸顶

滚动到此会固定，需要父容器有高度限制

内容1

内容2

内容3

<div class="sticky top-0">吸顶效果</div>
/* 滚动到阈值时固定，需指定 top/right/bottom/left */
/* 需要父容器有足够的滚动空间 */

偏移定位 (Top/Right/Bottom/Left)

top-0 left-0

bottom-0 right-0

居中

<div class="top-0">顶部0</div>
<div class="right-4">右侧1rem</div>
<div class="bottom-auto">自动底部</div>
<div class="inset-0">四边全拉伸</div>
/* inset-0 = top-0 right-0 bottom-0 left-0 */

Z-index 层级

z-10

z-20

z-30

<div class="z-0">默认层级</div>
<div class="z-10">较高层级</div>
<div class="z-20">更高层级</div>
<div class="z-auto">自动层级</div>
<div class="z-50">最高预设层级</div>

📱 响应式设计 (Responsive Design)

断点说明 (Breakpoints)

sm: 640px手机横屏/小屏

md: 768px平板竖屏

lg: 1024px平板横屏/笔记本

xl: 1280px桌面显示器

2xl: 1536px大屏显示器

/* Tailwind 响应式前缀 */
/* 移动端优先设计 */
sm: 640px↑  md: 768px↑
lg: 1024px↑ xl: 1280px↑
2xl: 1536px↑
/* 无前缀 = 所有屏幕 */

移动端优先 (Mobile First)

默认（手机）→ 平板 → 桌面

text-base md:text-lg lg:text-xl

<div class="text-sm md:text-base lg:text-lg">
  手机小字 → 平板正常 → 大屏大字
</div>
/* 无前缀 = 所有屏幕基础样式 */
/* 更大断点覆盖更小断点 */

响应式文字大小

响应式文字

<p class="text-sm sm:text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-2xl">
  断点递增的文字大小
</p>

响应式间距

内边距响应式变化

<div class="p-2 sm:p-4 md:p-6 lg:p-8">
  屏幕越大内边距越大
</div>

响应式网格布局

1

2

3

4

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
  <div>1</div> <div>2</div>
  <div>3</div> <div>4</div>
</div>

响应式显示/隐藏

📱 仅手机显示 (sm:hidden)

💻 平板及以上显示 (sm:block)

🖥️ 桌面端显示 (md:flex)

<div class="block sm:hidden">仅手机显示</div>
<div class="hidden sm:block">平板以上显示</div>
<div class="hidden lg:flex">大屏显示为Flex</div>

响应式Flex布局

1

2

3

<div class="flex flex-col sm:flex-row">
  <div>手机垂直，平板水平</div>
</div>

响应式圆角

圆角随屏幕变化

<div class="rounded-none sm:rounded-md md:rounded-lg lg:rounded-xl">
  手机无圆角，平板小圆角，桌面大圆角
</div>

响应式字体粗细

响应式字重 - 屏幕越大越粗

<p class="font-light sm:font-normal md:font-semibold lg:font-bold">
  字重递增效果
</p>

完整响应式卡片

响应式卡片

内边距、大小、圆角都随屏幕响应，完美适配各种设备。

<div class="p-3 sm:p-5 max-w-xs sm:max-w-md mx-auto">
  <div class="text-base sm:text-lg md:text-xl">标题</div>
  <p class="text-sm sm:text-sm">描述文字</p>
  <button class="px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-sm">按钮</button>
</div>

⚡ 悬停/聚焦/激活等状态 (States)

悬停状态 (hover:)

<button class="hover:bg-blue-600">悬停变蓝</button>
<button class="hover:scale-105 hover:shadow-lg">悬停放大加阴影</button>
/* 支持所有属性：颜色、变换、阴影等 */

聚焦状态 (focus:)

<input class="focus:border-blue-500 focus:ring-2 focus:outline-none">
<button class="focus:ring-2 focus:ring-offset-2">聚焦环</button>

激活状态 (active:)

<button class="active:scale-95 active:bg-gray-700">
  点击时有按压效果
</button>

访问链接状态 (visited:)

示例链接 - 点击后变色（visited效果）第二个链接 - 访问后变灰

<a href="#" class="text-blue-500 visited:text-purple-500">
  链接 - 访问后变紫色
</a>

禁用状态 (disabled:)

<button disabled class="disabled:opacity-50 disabled:cursor-not-allowed">
  禁用样式
</button>

选中状态 (checked:)

默认复选框自定义复选框单选按钮

<input type="checkbox" class="checked:bg-blue-600">
<input type="radio" class="checked:border-blue-500">

键盘聚焦 (focus-visible:)

<button class="focus-visible:ring-2 focus-visible:ring-blue-500">
  仅键盘Tab时显示聚焦环
</button>
/* 鼠标点击不显示，键盘导航显示 */

状态组合示例

选项

<button class="hover:bg-blue-600 active:scale-95 focus:ring-2 focus:ring-blue-400 disabled:opacity-50">
  支持所有状态的复合按钮
</button>

分组悬浮 (group-hover)

父容器悬浮时子元素变色

→ 悬浮移动

<div class="group">
  <p class="group-hover:text-white">悬浮变色</p>
  <button class="group-hover:bg-blue-500">按钮</button>
</div>

同级关联选择器 (peer)

切换状态选中时变色

聚焦时变色

<input type="checkbox" class="peer">
<span class="peer-checked:text-green-500">选中样式</span>
/* peer-* 用于同级元素联动 */

同级悬浮触发 (peer-hover)

悬浮左侧方块 → 文字移动效果

<div class="peer">触发元素</div>
<span class="peer-hover:text-blue-500">悬浮时样式</span>

内部聚焦 (focus-within)

表单组（内部聚焦容器高亮）

容器内任意元素聚焦时，容器整体高亮

<div class="focus-within:ring-2 focus-within:ring-blue-500">
  <input> 内部聚焦时父容器高亮
</div>

聚焦可见样式 (focus-visible)

<button class="focus-visible:ring-2 focus-visible:ring-blue-500">
  仅键盘Tab时显示聚焦环
</button>

✨ 过渡与动画 (Transitions & Animation)

过渡属性 (Transition Property)

<button class="transition-all">所有属性过渡</button>
<button class="transition-colors">仅颜色过渡</button>
<button class="transition-transform">仅变换过渡</button>
<button class="transition-opacity">仅透明度过渡</button>

过渡时长 (Duration)

<button class="duration-150">150ms 过渡</button>
<button class="duration-300">300ms 过渡</button>
<button class="duration-700">700ms 过渡</button>

速度曲线 (Timing Function)

ease-linear (匀速)

ease-in (慢→快)

ease-out (快→慢)

ease-in-out (慢→快→慢)

<div class="ease-linear">匀速过渡</div>
<div class="ease-in">加速进入</div>
<div class="ease-out">减速退出</div>
<div class="ease-in-out">缓动默认</div>

过渡延迟 (Delay)

<button class="delay-150">延迟150ms后过渡</button>
<button class="delay-300">延迟300ms后过渡</button>

基础动画

<div class="animate-pulse">脉冲动画</div>
<div class="animate-spin">旋转动画</div>
<div class="animate-bounce">弹跳动画</div>
<div class="animate-ping">点击波纹效果</div>

动画时长

<div class="animate-bounce duration-300">快速弹跳</div>
<div class="animate-pulse duration-1000">慢速脉冲</div>

动画重复次数

/* Tailwind 默认 infinite 无限循环 */
<div class="animate-bounce">无限循环</div>
/* 自定义有限次数需添加CSS */
.animate-once { animation-iteration-count: 1; }

完整过渡按钮

<button class="bg-rose-600 hover:bg-rose-500 hover:scale-105 hover:shadow-lg active:scale-95 transition-all duration-300 ease-in-out">
  悬停放大变色，点击缩小
</button>

🎭 阴影与效果 (Shadows & Effects)

阴影大小 (Box Shadow)

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

shadow-2xl

<div class="shadow-sm">小阴影</div>
<div class="shadow-md">中等阴影</div>
<div class="shadow-lg">大阴影</div>
<div class="shadow-xl">超大阴影</div>
<div class="shadow-2xl">最大阴影</div>

内阴影 (Inner Shadow)

shadow-inner

内凹效果

<div class="shadow-inner">内阴影效果</div>
/* 常用于凹陷、嵌入效果 */

阴影颜色

shadow-blue

shadow-red

shadow-green

shadow-purple

shadow-yellow

<div class="shadow-lg shadow-blue-500/50">蓝色阴影</div>
<div class="shadow-lg shadow-red-500/50">红色阴影</div>
/* 格式: shadow-{color}-{opacity} */

文字阴影 (Text Shadow)

drop-shadow-sm 文字阴影

drop-shadow-md 文字阴影

drop-shadow-lg 文字阴影

drop-shadow-xl 文字阴影

<p class="drop-shadow-md">文字投影</p>
<p class="drop-shadow-lg drop-shadow-blue-500">彩色文字投影</p>
/* 注意：Tailwind 使用 drop-shadow 而非 text-shadow */

模糊滤镜 (Blur)

原图

blur-sm

blur

blur-md

blur-lg

blur-xl

blur-3xl

<div class="blur-sm">轻度模糊</div>
<div class="blur-md">中度模糊</div>
<div class="blur-xl">重度模糊</div>

亮度滤镜 (Brightness)

50%

75%

100%

125%

150%

200%

<div class="brightness-50">50% 亮度</div>
<div class="brightness-125">125% 亮度</div>
/* 范围 0-200 */

对比度滤镜 (Contrast)

50%

75%

100%

125%

150%

200%

<div class="contrast-50">低对比度</div>
<div class="contrast-150">高对比度</div>

饱和度滤镜 (Saturate)

0%

50%

100%

150%

200%

<div class="saturate-0">完全去色/黑白</div>
<div class="saturate-150">鲜艳饱和度</div>

混合模式 (Mix Blend)

mix-blend-multiply

<div class="mix-blend-multiply">正片叠底</div>
<div class="mix-blend-screen">滤色</div>
<div class="mix-blend-overlay">叠加</div>
<div class="mix-blend-soft-light">柔光</div>

背景混合模式 (Bg Blend)

multiply

overlay

<div class="bg-blend-multiply">背景正片叠底</div>
<div class="bg-blend-overlay">背景叠加</div>

背景模糊 (backdrop-blur)

blur-sm

blur

blur-md

blur-lg

blur-xl

<div class="backdrop-blur-sm">轻度背景模糊</div>
<div class="backdrop-blur-md">中度背景模糊</div>
<div class="backdrop-blur-xl">重度背景模糊</div>

背景亮度 (backdrop-brightness)

50%

75%

100%

150%

200%

<div class="backdrop-brightness-50">50%背景亮度</div>
<div class="backdrop-brightness-150">150%背景亮度</div>

背景对比度 (backdrop-contrast)

50%

75%

100%

150%

200%

<div class="backdrop-contrast-50">低对比度</div>
<div class="backdrop-contrast-150">高对比度</div>

🖱️ 交互与光标 (Interactivity)

光标样式 (Cursor)

pointer (手型)

grab (抓手)

move (移动)

wait (等待)

help (帮助)

text (文本)

crosshair (十字)

not-allowed (禁止)

zoom-in (放大)

zoom-out (缩小)

<div class="cursor-pointer">手型光标</div>
<div class="cursor-grab">可拖动抓手</div>
<div class="cursor-not-allowed">禁止操作</div>
<div class="cursor-progress">加载中</div>

点击穿透 (Pointer Events)

透明层 pointer-events-none

<div class="pointer-events-none">元素不响应鼠标事件</div>
<div class="pointer-events-auto">正常响应鼠标事件</div>
/* 常用于覆盖层、透明遮罩 */

用户选择 (User Select)

select-none: 无法选中文本（尝试拖动选择）

select-text: 可选中文本（默认）

select-all: 点击时自动全选

select-auto: 自动（浏览器默认）

<p class="select-none">禁止选中文本</p>
<p class="select-all">点击自动全选</p>
<p class="select-text">允许选中</p>

滚动行为 (Scroll Behavior)

滚动区域（平滑滚动）

内容2

内容3

目标位置（点击下方按钮）

scroll-auto（默认）

滚动内容

滚动条样式

scrollbar-thin（细滚动条）

支持部分浏览器

滚动查看更多

自定义滚动条颜色

橙色滚动条

WebKit浏览器

<div class="scrollbar-thin">细滚动条</div>
<div class="scrollbar-hide">隐藏滚动条</div>
/* 自定义滚动条颜色需添加额外CSS */

触摸操作 (Touch Action)

touch-auto（默认）

可正常滚动

大小调整 (Resize)

resize (双向可调)

resize-x (水平可调)

resize-y (垂直可调)

resize-none (不可调)

<div class="resize">双向可调整大小</div>
<div class="resize-x">仅水平调整</div>
<div class="resize-y">仅垂直调整</div>
<div class="resize-none">不可调整</div>

隔离 (Isolation)

isolate (创建独立堆叠上下文)

正常元素

<div class="isolate">创建独立的堆叠上下文</div>
/* 用于防止混合模式、z-index 等向外传播 */

鼠标事件穿透 (pointer-events)

透明层 pointer-events-none

<div class="pointer-events-none">不响应鼠标事件</div>
<div class="pointer-events-auto">正常响应鼠标事件</div>

触摸操作限制 (touch-action)

touch-auto

正常滚动

touch-pan-y

仅垂直滚动

touch-pan-x

仅水平滚动

touch-none

禁止触摸滚动

<div class="touch-auto">默认触摸行为</div>
<div class="touch-pan-y">仅垂直滚动</div>
<div class="touch-pan-x">仅水平滚动</div>
<div class="touch-none">禁止触摸滚动</div>

元素缩放调整 (resize)

resize(双向)

resize-x(水平)

resize-y(垂直)

resize-none(不可)

<div class="resize">双向可调整</div>
<div class="resize-x">仅水平调整</div>
<div class="resize-y">仅垂直调整</div>

原生样式重置 (appearance)

appearance-none 自定义复选框

<input class="appearance-none">重置原生样式</input>
<select class="appearance-none">自定义下拉框</select>

📝 表单样式 (Forms)

输入框样式 (Input)

<input type="text" class="bg-slate-800 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:border-teal-500">

单选/复选框

默认复选框

大号复选框

单选按钮 1

单选按钮 2

<input type="checkbox" class="w-4 h-4 rounded text-teal-500 focus:ring-teal-500">
<input type="radio" class="w-4 h-4 text-teal-500">

下拉框 (Select)

<select class="bg-slate-800 border rounded-lg px-4 py-2 appearance-none cursor-pointer">

按钮样式 (Button)

<button class="bg-teal-600 hover:bg-teal-500 text-white px-4 py-2 rounded-lg">按钮</button>

表单控件重置

<input class="border-0 focus:ring-0 focus:outline-none bg-transparent">
/* 移除所有默认表单样式 */

表单状态 (States)

表单验证错误提示

<input class="focus:border-teal-500 focus:ring-2">聚焦状态
<input class="hover:border-teal-500">悬停状态
<input disabled>禁用状态

完整表单示例

<form class="space-y-4">
  <input class="bg-slate-800 border rounded-lg px-4 py-2 focus:outline-none focus:border-teal-500">
  <button class="bg-teal-600 hover:bg-teal-500 rounded-lg px-6 py-2">提交</button>
</form>

文本域 (Textarea)

<textarea rows="3" class="resize-y"></textarea>
<textarea class="resize-none"></textarea>

📊 表格样式 (Tables)

表格布局 (Table Layout)

table-auto (自动布局)

名称	宽度自适应
内容1	随内容展开

table-fixed (固定布局)

名称	固定宽度占比
内容1	按比例分配

<table class="table-auto">自动布局（默认）</table>
<table class="table-fixed">固定布局</table>

边框合并 (Border Collapse)

border-collapse（合并边框）

标题1	标题2
单元格1	单元格2

border-separate（分离边框）

标题1	标题2
单元格1	单元格2

<table class="border-collapse">合并边框</table>
<table class="border-separate border-spacing-2">分离边框+间距</table>

单元格对齐 (Cell Align)

对齐方式	示例	垂直对齐
text-left	左对齐文本	top
text-center	居中文本	middle
text-right	右对齐文本	bottom

<td class="text-left align-top">水平左对齐+垂直顶部</td>
<td class="text-center align-middle">水平居中+垂直居中</td>
<td class="text-right align-bottom">水平右对齐+垂直底部</td>

表头固定 (Sticky Header)

ID	姓名	部门
1	张三	技术部
2	李四	市场部
3	王五	运营部
4	赵六	产品部
5	钱七	设计部

<div class="max-h-64 overflow-y-auto">
  <table>
    <thead class="sticky top-0 bg-gray-800">
      滚动时表头固定
    </thead>
  </table>
</div>

响应式表格 (水平滚动)

列1	列2	列3	列4	列5	列6
数据1	数据2	数据3	数据4	数据5	数据6

<div class="overflow-x-auto">
  <table class="min-w-[600px]">
    小屏水平滚动，大屏完整显示
  </table>
</div>

响应式表格 (卡片式)

姓名

张三

年龄

28

部门

技术部

姓名

李四

年龄

32

部门

市场部

姓名	年龄	部门
张三	28	技术部
李四	32	市场部

<!-- 小屏卡片式，大屏表格 -->
<div class="block sm:hidden">卡片布局</div>
<table class="hidden sm:table">表格布局</table>

斑马纹表格

员工	职位	薪资
张三	前端开发	15K
李四	后端开发	18K
王五	UI设计	14K
赵六	产品经理	22K

<tr class="even:bg-gray-800">偶数行背景</tr>
<tr class="odd:bg-gray-900">奇数行背景</tr>

完整表格样式

#	姓名	邮箱	状态
1	张三	zhang@example.com	激活
2	李四	li@example.com	待审
3	王五	wang@example.com	禁用

<table class="w-full border-collapse">
  <thead class="bg-indigo-800/60">
  <tr class="even:bg-indigo-900/20 hover:bg-indigo-800/30">
  <td class="border p-2">

🔘 按钮样式 (Buttons)

按钮基础尺寸

<button class="px-2 py-1 text-sm">超小</button>
<button class="px-3 py-1.5 text-sm">小号</button>
<button class="px-4 py-2 text-base">默认</button>
<button class="px-5 py-2.5 text-lg">大号</button>
<button class="px-6 py-3 text-xl">超大</button>

按钮形态 (形状)

<button class="rounded-none">直角按钮</button>
<button class="rounded-md">小圆角</button>
<button class="rounded-lg">大圆角</button>
<button class="rounded-full">胶囊按钮</button>

按钮风格

<button class="bg-pink-600">实心按钮</button>
<button class="border border-pink-500 text-pink-400">边框按钮</button>
<button class="text-pink-400">文本按钮</button>

按钮状态

<button class="hover:bg-pink-500">悬停状态</button>
<button class="active:scale-95">点击状态</button>
<button class="focus:ring-2 focus:ring-pink-400">聚焦状态</button>

按钮图标布局

<button class="inline-flex items-center gap-2">
  <i class="fas fa-plus"></i> 左图标
</button>
<button class="w-10 h-10 inline-flex items-center justify-center">仅图标</button>

按钮禁用样式

<button disabled class="opacity-50 cursor-not-allowed">
  禁用按钮
</button>
<button disabled class="disabled:opacity-40 disabled:cursor-not-allowed"></button>

按钮阴影

<button class="shadow-sm hover:shadow-md">悬停阴影加深</button>
<button class="shadow-xl shadow-pink-500/50">彩色阴影</button>

按压缩放效果

<button class="active:scale-95 transition-transform">点击缩放效果</button>
<button class="active:scale-90 active:bg-pink-700 transition-all">缩放+颜色变化</button>

按钮颜色变体

实心按钮颜色：bg-{color}-600 hover:bg-{color}-500

<button class="bg-blue-600 hover:bg-blue-500">蓝色按钮</button>
<button class="bg-purple-600 hover:bg-purple-500">紫色按钮</button>
<button class="bg-emerald-600 hover:bg-emerald-500">绿色按钮</button>

按钮边框颜色

边框按钮颜色：border-{color}-500 text-{color}-400 hover:bg-{color}-500

<button class="border border-blue-500 text-blue-400 hover:bg-blue-500 hover:text-white">蓝色边框按钮</button>

渐变按钮颜色

渐变按钮：bg-gradient-to-r from-{color}-500 to-{color}-500

<button class="bg-gradient-to-r from-blue-500 to-cyan-500">渐变按钮</button>

完整按钮库

<!-- 完整功能按钮模板 -->
<button class="bg-pink-600 hover:bg-pink-500 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed text-white px-4 py-2 rounded-lg shadow-md transition-all inline-flex items-center gap-2">
  <i class="fas fa-check"></i> 按钮文本
</button>

📐 尺寸比例 (Aspect Ratio)

自动比例 (aspect-auto)

aspect-auto (默认高度由内容决定)

<div class="aspect-auto">
  宽高比由内容自动决定
</div>
/* 默认值，不强制比例 */

正方形比例 (aspect-square)

1:1 正方形

<div class="aspect-square">
  1:1 正方形比例
</div>
/* 宽高相等 */

视频比例 (aspect-video)

16:9 宽屏比例 (视频常用)

<div class="aspect-video">
  16:9 视频常用比例
</div>
/* 宽:高 = 16:9 */

自定义比例

4:3 传统比例

3:4 竖版比例

21:9 超宽比例

<div class="aspect-[4/3]">4:3 比例</div>
<div class="aspect-[3/4]">3:4 竖版</div>
<div class="aspect-[16/9]">16:9 视频</div>

图片容器比例

1:1
头像

4:3
照片

16:9
横幅

<div class="aspect-square rounded-lg overflow-hidden">
  <img src="avatar.jpg" class="object-cover">
</div>

视频比例容器

🎬 16:9 视频播放器占位

📺 4:3 经典视频比例

<div class="aspect-video rounded-lg overflow-hidden">
  <iframe src="..." class="w-full h-full"></iframe>
</div>
/* 响应式视频嵌入容器 */

完整比例参考库

1:1正方形

4:3传统照片

3:2相机照片

16:9宽屏视频

2:3竖版照片

9:16手机视频

21:9电影比例

1:2长廊

2:1全景

5:4中画幅

7:5A4纸

4:5社交媒体

/* 常用比例类名一览 */
aspect-auto      // 默认自动
aspect-square   // 1:1 正方形
aspect-video    // 16:9 视频
aspect-[4/3]    // 4:3 传统
aspect-[3/2]    // 3:2 相机
aspect-[2/3]    // 2:3 竖版
aspect-[21/9]   // 21:9 超宽
// 支持任意比例 custom-[w/h]

🎯 对齐与间距补充 (Alignment)

主轴内容对齐 (justify-content)

justify-start

justify-center

justify-end

justify-between

justify-around

justify-evenly

<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>
<div class="flex justify-evenly">完全均匀</div>

交叉轴项目对齐 (align-items)

1

2

3

items-start

1

2

3

items-center

1

2

3

items-end

1

2

3

items-stretch

1

2

3

items-baseline

<div class="flex items-start">顶部对齐</div>
<div class="flex items-center">垂直居中</div>
<div class="flex items-end">底部对齐</div>
<div class="flex items-stretch">拉伸填充</div>
<div class="flex items-baseline">基线对齐</div>

多行内容对齐 (align-content)

1

2

3

content-start

1

2

3

content-center

1

2

3

content-end

1

2

3

content-between

<div class="flex flex-wrap content-start">多行起始</div>
<div class="flex flex-wrap content-center">多行居中</div>
<div class="flex flex-wrap content-between">多行两端</div>

复合元素对齐 (place-items)

居中

<div class="grid place-items-center">
  <div>垂直水平双居中</div>
</div>
/* 同时控制 justify-items 和 align-items */

复合内容对齐 (place-content)

1

2

3

4

<div class="grid place-content-center">
  整体内容双方向居中
</div>
/* 同时控制 justify-content 和 align-content */

自身复合对齐 (place-self)

默认

self-center

self-end

self-start

stretch

<div class="place-self-center">自身双居中</div>
<div class="place-self-end">右下角</div>
/* 同时控制 justify-self 和 align-self */

自身主轴对齐 (justify-self)

默认

justify-center

justify-end

<div class="justify-self-start">自身主轴起始</div>
<div class="justify-self-center">自身主轴居中</div>
<div class="justify-self-end">自身主轴末尾</div>

自身交叉轴对齐 (align-self)

默认

self-center

self-end

self-stretch

<div class="self-start">自身交叉轴顶部</div>
<div class="self-center">自身交叉轴居中</div>
<div class="self-end">自身交叉轴底部</div>

完整对齐示例

Flex 对齐组合

flex justify-between items-center

垂直+水平双居中

Grid 对齐组合

1

2

3

/* Flex 对齐 */
<div class="flex justify-center items-center">双居中</div>
<div class="flex justify-between items-start">两端+顶部</div>

/* Grid 对齐 */
<div class="grid place-items-center">所有项目居中</div>
<div class="grid place-content-center">内容网格居中</div>

/* 单项对齐 */
<div class="place-self-center">单项双居中</div>

👁️ 可见性与显示控制 (Visibility & Display)

可见 (visible)

visible - 元素正常可见（默认状态）

<div class="visible">元素正常可见</div>
/* 默认可见，通常无需显式设置 */

隐藏保留占位 (invisible)

不可见但占位

正常元素

⚠️ invisible：元素不可见，但仍占据空间（保留占位）

<div class="invisible">隐藏但保留占位</div>
/* 元素不可见，但布局空间仍然保留 */

折叠元素 (collapse)

⚠️ collapse 主要用于表格行/列，普通元素效果类似 hidden

行1	数据
折叠行	不可见(表格)
行3	数据

表格中 collapse 可折叠行列，普通元素效果类似 hidden

<tr class="collapse">表格行折叠</tr>
<div class="collapse">普通元素折叠(类似hidden)</div>

完全隐藏 (hidden)

正常元素

⚠️ hidden：元素完全隐藏且不占空间（脱离文档流）

<div class="hidden">完全隐藏且不占位</div>
/* 元素从文档流中移除，不占空间 */

块级元素 (block)

块级元素 - 独占一行

块级元素 - 宽度默认100%

block 元素自动换行，可设置宽高

<div class="block">块级元素</div>
/* 独占一行，宽高可设置 */

行内元素 (inline)

行内1 行内2 行内3

inline 元素水平排列，宽高由内容决定

<span class="inline">行内元素</span>
/* 不换行，宽高由内容决定，不可设置宽高 */

行内块元素 (inline-block)

行内块

可设宽高

同行排列

inline-block 兼具行内和块级特性：同行排列 + 可设宽高

<div class="inline-block">行内块元素</div>
/* 同行排列，同时可设置宽高和内外边距 */

可见性与显示控制对比

👁️ 可见性对比

visible - 可见，占空间

invisible - 不可见，仍占空间

collapse - 折叠(主要表格)

hidden - 完全隐藏，不占空间

📦 显示类型对比

block - 块级，独占一行

inline - 行内，同行排列

inline-block - 行内块，同行+设宽高

💡 使用建议

隐藏元素用 hidden（不占位）
保留占位隐藏用 invisible
导航菜单常用 inline-block
布局容器多用 block
文字内元素用 inline

/* 可见性类名 */
visible     // 可见（默认）
invisible   // 隐藏但占位
collapse    // 折叠（表格专用）
hidden      // 完全隐藏

/* 显示类型类名 */
block       // 块级元素
inline      // 行内元素
inline-block // 行内块元素

📜 滚动与溢出增强 (Scroll Behavior)

滚动行为 (scroll-behavior)

平滑滚动区域

内容2

滚动目标位置

scroll-smooth: 平滑滚动效果

<div class="scroll-smooth">平滑滚动容器</div>
<div class="scroll-auto">默认滚动行为</div>

滚动外边距 (scroll-margin)

滚动到目标时额外偏移

目标元素 (scroll-mt-16)

底部内容

scroll-m-* 滚动时目标与视口边缘保持间距

<div class="scroll-mt-16">滚动时顶部留16px</div>
<div class="scroll-ml-8">滚动时左侧留8px</div>

滚动内边距 (scroll-padding)

项目1

项目2

项目3

scroll-p-* / scroll-pt-* 控制容器滚动内边距

<div class="scroll-pt-16">容器滚动顶部留白</div>
<div class="scroll-px-8">容器滚动左右留白</div>

滚动吸附布局 (Snap Scroll)

卡片1

卡片2

卡片3

水平滚动吸附 (snap-x snap-mandatory)

<div class="flex overflow-x-auto snap-x snap-mandatory">
  <div class="snap-start">吸附项</div>
</div>

滚动吸附类型 (scroll-snap-type)

snap-x (水平吸附)

1

2

3

snap-y (垂直吸附)

1

2

3

<div class="snap-x snap-mandatory">水平强制吸附</div>
<div class="snap-y snap-proximity">垂直邻近吸附</div>
<div class="snap-both">双向吸附</div>

滚动吸附对齐 (scroll-snap-align)

snap-start顶部吸附

snap-center居中吸附

snap-end底部吸附

吸附对齐方式: snap-start / snap-center / snap-end

<div class="snap-start">滚动时吸附到顶部</div>
<div class="snap-center">滚动时吸附到中间</div>
<div class="snap-end">滚动时吸附到底部</div>

滚动吸附停止 (scroll-snap-stop)

snap-always强制停止

snap-normal默认行为

快速滚动可跳过

snap-always: 强制在每个吸附点停止

<div class="snap-always">强制在吸附点停止</div>
<div class="snap-normal">快速滚动可跳过吸附点</div>

完整滚动吸附示例

📱 垂直滚动吸附 (全屏滑动)

第1屏

第2屏

第3屏

🖼️ 横向滚动吸附 (轮播图)

Slide 1

Slide 2

Slide 3

Slide 4

/* 垂直全屏滚动吸附 */
<div class="h-screen overflow-y-auto snap-y snap-mandatory">
  <div class="h-screen snap-start">第1屏</div>
  <div class="h-screen snap-start">第2屏</div>
</div>

/* 横向轮播吸附 */
<div class="flex overflow-x-auto snap-x snap-mandatory">
  <div class="snap-start">卡片1</div>
  <div class="snap-start">卡片2</div>
</div>

🖼️ 可见区域与裁剪 (Object Fit & Position)

包含适配 (object-contain)

object-contain (完整显示)

不裁剪，保比例

contain: 图片完整显示，可能留有黑边

<img class="w-full h-full object-contain">
/* 图片完整显示在容器内，保持比例 */

覆盖适配 (object-cover)

object-cover (填充裁剪)

填满容器，裁剪溢出

cover: 图片填满容器，超出部分裁剪

<img class="w-full h-full object-cover">
/* 图片填满容器，保持比例并裁剪 */

填充适配 (object-fill)

fill: 拉伸填满，不保持比例（可能导致变形）

<img class="w-full h-full object-fill">
/* 拉伸填满，不保持原比例 */

无适配 (object-none)

none: 保持原尺寸，可能溢出容器

<img class="w-full h-full object-none">
/* 保持原图尺寸，不缩放 */

缩放适配 (object-scale-down)

scale-down: 选择 contain 或 none 中较小的效果

<img class="w-full h-full object-scale-down">
/* 取 contain 和 none 中较小的效果 */

元素定位 (object-position)

object-top

object-center

object-bottom

<img class="object-cover object-top">顶部对齐
<img class="object-cover object-center">居中对齐
<img class="object-cover object-left-bottom">左下角

自定义定位 (object-position)

object-left-top

object-right-top

object-[50%_20%]

object-[80%_30%]

object-{position} / object-[x%_y%] 精确控制显示区域

<img class="object-cover object-left-top">左上角
<img class="object-cover object-[30%_70%]">自定义位置
/* 支持任意位置百分比或关键词 */

完整对比示例

contain

完整显示

cover

填满裁剪

fill

拉伸

none

原尺寸

scale-down

较小者

💡 使用建议

🎯 头像/缩略图 → object-cover + object-center

🖼️ 产品图预览 → object-contain (完整展示)

📱 轮播图/背景 → object-cover + object-top

🎬 视频封面 → object-cover + object-[x%_y%]

/* Object Fit 完整类名 */
object-contain     // 包含，保持比例
object-cover       // 覆盖，裁剪溢出
object-fill        // 拉伸填充
object-none        // 原始尺寸
object-scale-down  // 较小效果

/* Object Position 类名 */
object-top / object-bottom / object-left / object-right
object-center / object-left-top / object-right-bottom
object-[位置]      // 自定义百分比

📺 媒体查询扩展 (Media Queries)

屏幕方向 (orientation)

当前屏幕方向检测

📱 竖屏模式样式 (portrait)

通过调整浏览器窗口宽高比可测试

/* 竖屏模式 */
<div class="portrait:bg-blue-500">竖屏样式</div>
/* 横屏模式 */
<div class="landscape:bg-green-500">横屏样式</div>

允许动画 (motion-safe)

motion-safe: 仅在用户允许动画时显示

系统开启动画时显示脉冲效果，关闭时静止

<div class="motion-safe:animate-pulse">
  用户允许动画时显示
</div>

减弱动画 (motion-reduce)

用户偏好减弱动画时停止动画

⚡ 在系统偏好中开启"减弱动态效果"即可测试

<div class="animate-pulse motion-reduce:animate-none">
  用户减弱动画时停止脉冲</div>

对比度偏好 (prefers-contrast)

高对比度偏好示例

根据系统对比度偏好调整样式

高对比度

低对比度

/* 高对比度样式 */
<div class="contrast-more:bg-black contrast-more:text-white">
/* 低对比度样式 */
<div class="contrast-less:bg-gray-300 contrast-less:text-gray-500">

竖屏模式 (portrait)

📱 竖屏模式 (高度 > 宽度) 🔄 横屏模式 (宽度 > 高度)

portrait: 设备高度大于宽度时的样式

<div class="portrait:bg-blue-500">竖屏背景蓝</div>
/* 仅当设备处于竖屏时生效 */

横屏模式 (landscape)

横屏2列布局

横屏自适应

landscape: 设备宽度大于高度时的样式

<div class="landscape:grid-cols-2 portrait:grid-cols-1">
  横屏2列，竖屏1列
</div>

完整媒体查询示例

🎯 组合媒体查询

portrait and landscape (同时满足)

motion-safe and motion-reduce (动画偏好组合)

💡 实用场景建议

orientation: 响应式布局方向适配
motion-safe: 尊重用户动画偏好
motion-reduce: 减少动画，提升体验
prefers-contrast: 无障碍对比度优化
portrait/landscape: 移动端布局适配

/* 常用媒体查询类名 */
portrait:      // 竖屏模式
landscape:     // 横屏模式
motion-safe:   // 用户允许动画
motion-reduce: // 用户偏好减弱动画
contrast-more: // 高对比度偏好
contrast-less: // 低对比度偏好

/* 组合使用示例 */
<div class="portrait:flex-col landscape:flex-row motion-safe:transition-all motion-reduce:transition-none">

✨ 伪元素 (Before / After)

基础 before: / after:

前后添加装饰符号

爱心装饰效果

引号装饰文本

<div class="before:content-['★'] before:mr-2">内容</div>
/* before 在前面添加内容，after 在后面添加内容 */

content 内容类型

文本内容

Unicode 字符 (★)

特殊符号

FontAwesome 图标

/* 文本内容 */
before:content-['文字']
/* Unicode 字符 */
before:content-['\2605']
/* FontAwesome 需要引入字体 */

伪元素宽高

伪元素宽高示例 (16x16 方形) 上层内容

底部装饰线 (宽100%、高1px)

before:content-[''] before:absolute before:w-16 before:h-16
/* 必须设置 content 和 absolute 才能显示宽高 */

伪元素定位

右上角标 (绝对定位)

底部居中装饰线

渐变覆盖层

/* 父元素需 relative */
before:absolute before:-top-2 before:-right-2
/* 使用绝对定位控制位置 */

伪元素样式

红色NEW标签

圆形HOT标签

大号星星装饰

before:content-['标签'] before:bg-red-500 before:text-white before:px-1 before:py-0.5 before:rounded
/* 支持所有 CSS 样式 */

实用装饰效果

自定义列表项标记

方形列表标记

悬停下划线动画

/* 自定义列表标记 */
.item:before { content: ''; width: 8px; height: 8px; background: green; }
/* 悬停下划线动画 */
.link:after { content: ''; width: 0; transition: width 0.3s; }
.link:hover:after { width: 100%; }

工具提示 (Tooltip)

悬停显示提示

<div class="group before:content-[attr(data-tip)] hover:before:opacity-100" data-tip="提示内容">
  悬停显示工具提示
</div>

序号列表 (Counter)

任务一

任务二

.counter-reset { counter-reset: item; }
.item:before { counter-increment: item; content: counter(item) '. '; }

🌙 深色模式 (Dark Mode)

dark: 前缀基础

浅色/深色自动切换

dark: 前缀控制不同主题样式

边框和阴影也随主题变化

<div class="bg-white dark:bg-slate-800 text-black dark:text-white">
  dark: 前缀 - 深色模式专用样式
</div>

深色适配组件

深色模式卡片自动适配背景和文字

<button class="bg-blue-500 dark:bg-blue-600">按钮</button>
<input class="bg-white dark:bg-slate-800 border-gray-300 dark:border-gray-600">

系统深色模式

系统深色模式检测 (prefers-color-scheme)

跟随系统主题

默认模式下，深色模式自动跟随系统设置

/* 跟随系统深色模式 */
/* Tailwind 默认检测 .dark 类 */
/* 手动控制需要通过 JS 切换 */

手动切换深色主题

手动切换演示 (点击下方按钮)

当前主题预览区域

提示：手动切换会覆盖系统设置，并保存到 localStorage

// 手动切换深色模式示例
document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', 'dark');

深色模式完整示例

渐变背景深色适配

文字颜色、边框、背景全响应深色模式

用户名

用户描述信息

<div class="bg-white dark:bg-slate-800 shadow dark:shadow-gray-800/50">
  <p class="text-gray-800 dark:text-white">内容</p>
</div>

深色模式配置说明

1. Tailwind 配置

tailwind.config = {
  darkMode: 'class', // 或 'media'
}

2. HTML 根元素

<html lang="zh-CN" class="dark">
// 或通过 JS 动态添加

3. localStorage 存储

localStorage.setItem('theme', 'dark');
localStorage.getItem('theme');

// 完整深色模式切换方案
const isDark = localStorage.theme === 'dark' || (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches);
document.documentElement.classList.toggle('dark', isDark);

⚙️ 函数与指令 (Functions & Directives)

@apply 指令

@apply 用法示例 (需在 CSS 中使用)

/* 将 Tailwind 类组合成自定义类 */
.btn-primary {
  @apply bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors;
}

btn-primary 效果示例

直接使用组合类

/* 在 CSS 文件中使用 */
.card {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-4;
}

@layer 指令

@layer 将样式归类到特定层级

@layer base {
  h1 { @apply text-2xl font-bold; }
  a { @apply text-blue-500 hover:text-blue-600; }
}

@layer components {
  .btn { @apply px-4 py-2 rounded; }
}

@layer utilities {
  .scrollbar-hide { scrollbar-width: none; }
}

/* 层级顺序: base → components → utilities */
@layer components { ... }
@layer utilities { ... }

@config 指令

@config 指定 Tailwind 配置文件路径

/* 在主 CSS 文件顶部 */
@config "./tailwind.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

⚠️ 注意：@config 仅在 CLI 构建时有效

@config "./tailwind-custom.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

自定义颜色

tailwind.config.js 自定义颜色

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
        accent: '#f59e0b',
      }
    }
  }
}

自定义 brand-500

自定义 accent

<div class="bg-brand-500">使用自定义颜色</div>
<div class="text-accent">使用 accent 颜色</div>

自定义间距

扩展间距系统

module.exports = {
  theme: {
    extend: {
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
        '128': '32rem',
      }
    }
  }
}

w-18

自定义间距: p-18, m-18, w-18 等

<div class="p-18 m-4">使用自定义间距</div>
/* p-18 = padding: 4.5rem */

自定义字体

扩展字体家族和字号

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Inter', 'system-ui'],
        'display': ['Poppins', 'sans-serif'],
      },
      fontSize: {
        'xxs': '0.625rem',
      }
    }
  }
}

font-display 自定义字体

<div class="font-display text-xxs">
  自定义字体和字号
</div>

theme() 函数

引用主题配置值

/* 在 @apply 或自定义 CSS 中 */
.custom-card {
  background-color: theme('colors.emerald.500');
  padding: theme('spacing.4');
  font-size: theme('fontSize.lg');
}

/* 在配置文件中 */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: theme('colors.blue.600'),
      }
    }
  }
}

.text-custom {
  color: theme('colors.primary');
}

自定义变体 & 插件

自定义变体

// tailwind.config.js
module.exports = {
  variants: {
    extend: {
      backgroundColor: ['active', 'group-hover'],
      opacity: ['disabled'],
    }
  }
}

自定义插件

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, theme }) {
      const newUtilities = {
        '.text-shadow': {
          textShadow: '2px 2px 4px rgba(0,0,0,0.3)',
        }
      }
      addUtilities(newUtilities)
    })
  ]
}

// 完整配置示例
module.exports = {
  darkMode: 'class',
  theme: { extend: { /* ... */ } },
  plugins: [require('@tailwindcss/forms')],
}

🔧 自定义配置 (Customization)

tailwind.config.js 基础

完整配置文件结构

module.exports = {
  content: ["./src/**/*.{html,js}"],
  darkMode: 'class',
  theme: { extend: {} },
  plugins: [],
  corePlugins: {},
  prefix: '',
  important: false,
}

// 基础配置选项说明
module.exports = {
  content: [],     // 扫描文件路径
  darkMode: 'class', // 深色模式策略
  theme: {},       // 主题配置
  plugins: [],     // 插件
}

扩展主题 (Extend)

扩展主题配置示例

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1fb6ff',
        'custom-pink': '#ff49db',
      },
      spacing: {
        '128': '32rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
      fontSize: {
        'xxs': '0.625rem',
      },
      animation: {
        'bounce-slow': 'bounce 2s infinite',
      }
    }
  }
}

custom-blue

custom-pink

rounded-4xl

// 使用扩展后的类
<div class="bg-custom-blue rounded-4xl p-128">扩展主题</div>

覆盖主题 (Override)

完全覆盖默认主题

module.exports = {
  theme: {
    colors: {
      'primary': '#1fb6ff',
      'secondary': '#ff49db',
      'dark': '#1a1a1a',
    },
    fontFamily: {
      'sans': ['Inter', 'system-ui'],
    },
  }
}

⚠️ 注意：覆盖后会丢失所有默认颜色和字体

// 只有自定义颜色可用，默认颜色消失
<div class="bg-primary">只有primary可用</div>

自定义工具类

通过 addUtilities 添加自定义工具类

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        '.text-shadow': {
          textShadow: '2px 2px 4px rgba(0,0,0,0.3)',
        },
        '.text-shadow-lg': {
          textShadow: '4px 4px 8px rgba(0,0,0,0.4)',
        },
        '.scrollbar-hide': {
          'scrollbar-width': 'none',
          '&::-webkit-scrollbar': { display: 'none' }
        }
      }
      addUtilities(newUtilities)
    })
  ]
}

text-shadow 自定义工具类效果

<div class="text-shadow scrollbar-hide">自定义工具类</div>

禁用默认样式

corePlugins 禁用默认核心插件

module.exports = {
  corePlugins: {
    preflight: false,    // 禁用基础样式重置
    container: false,    // 禁用 container 类
    float: false,        // 禁用 float 工具
    clear: false,        // 禁用 clear 工具
    objectFit: false,    // 禁用 object-fit
    objectPosition: false,
  }
}

// 禁用所有核心插件
corePlugins: []

⚠️ preflight: false 会保留浏览器默认样式

// 保留必要插件，禁用不需要的
corePlugins: {
  preflight: false,  // 保留浏览器默认样式
  float: false,      // 禁用浮动相关
}

自定义变体 (Variants)

扩展变体（Tailwind CSS v3 自动支持）

// Tailwind CSS v3 自动支持任意变体组合
// 无需手动配置 variants

// 自定义变体需要通过插件
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('hocus', ['&:hover', '&:focus'])
      addVariant('group-hocus', [':merge(.group):hover &', ':merge(.group):focus &'])
    })
  ]
}

<button class="hocus:bg-blue-600">自定义变体按钮</button>

自定义断点 (Screens)

自定义响应式断点

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px',    // 新增超大屏
      'tablet': '800px',   // 自定义命名
    }
  }
}

// 扩展而非覆盖（推荐）
theme: {
  extend: {
    screens: {
      '3xl': '1920px',
      'print': { raw: 'print' },
    }
  }
}

<div class="text-base 3xl:text-2xl">自定义断点响应</div>

内容路径配置 (Content)

基础配置

module.exports = {
  content: [
    './src/**/*.{html,js}',
    './public/index.html',
  ]
}

排除文件

module.exports = {
  content: [
    './src/**/*.{html,js}',
    '!./src/**/*.test.js',
  ]
}

动态内容安全类

// 确保动态类被生成
content: [
  './src/**/*.html',
  './src/**/*.js',
],
safelist: [
  'bg-red-500',
  'text-green-400',
  /^bg-/,
]

多框架支持

// React
content: ['./src/**/*.{js,jsx,ts,tsx}']
// Vue
content: ['./src/**/*.{vue,js,ts}']
// 多项目
content: [
  './packages/**/*.{html,js}',
  './apps/**/*.{html,js}',
]

// 完整配置示例
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx,vue}'],
  darkMode: 'class',
  theme: { extend: { /* ... */ } },
  plugins: [require('@tailwindcss/forms')],
}

♿ 无障碍 (Accessibility)

屏幕阅读器 (sr-only)

sr-only / not-sr-only 用法

可见内容：图标按钮

<span class="sr-only">仅屏幕阅读器可见</span>
<button><i class="fas fa-search"></i><span class="sr-only">搜索</span></button>

焦点状态 (focus: / focus-visible:)

键盘焦点指示器

链接聚焦

按 Tab 键测试焦点环效果

<button class="focus:ring-2 focus:ring-blue-400 focus:outline-none">
  键盘焦点样式
</button>

语义化 & ARIA

语义标签与 ARIA 属性

<nav aria-label="主导航">...</nav>
<button aria-label="关闭">✕</button>
<div role="progressbar" aria-valuenow="50"></div>

键盘导航

可聚焦元素与 Tab 顺序

自定义可聚焦 div (tabindex)

Tab 键顺序：输入框 → 按钮 → 自定义元素

<input tabindex="1" />  // 自定义 Tab 顺序
<div tabindex="0">可聚焦</div>
<div tabindex="-1">可编程聚焦(Tab跳过)</div>

跳过导航链接

导航区域内容...

主要内容区域（按 Tab 键聚焦跳过链接）

其他内容...

按 Tab 键可见"跳过导航"按钮，点击直接跳转主内容

<a href="#main" class="sr-only focus:not-sr-only">跳转到内容</a>
<main id="main" tabindex="-1">主内容</main>

颜色对比度提示

WCAG 对比度参考

✅ 良好对比度 (4.5:1+)

⚠️ 较差对比度 (约 2:1)

✅ 深色模式良好对比

建议：普通文本对比度 ≥ 4.5:1，大文本 ≥ 3:1

/* WCAG 推荐对比度 */
/* 正常文本 4.5:1，大标题 3:1 */
/* 使用工具检测对比度 */

无障碍表单完整示例

<label for="name">姓名</label>
<input id="name" aria-required="true" aria-describedby="hint">
<p id="hint">提示文字</p>
<fieldset><legend>分组标题</legend>...</fieldset>

🖨️ 打印样式 (Print Styles)

打印时显示/隐藏

🖥️ 这段内容仅在屏幕显示，打印时隐藏 (print:hidden)

这段内容屏幕和打印都显示

<div class="print:hidden">屏幕显示，打印隐藏</div>
<div class="hidden print:block">打印显示，屏幕隐藏</div>

打印布局优化

打印优化示例

打印时移除内边距、阴影，添加边框

📄 使用 print:break-inside-avoid 避免分页时内容被截断

<div class="print:m-0 print:p-0 print:shadow-none">打印重置边距/阴影</div>
<div class="print:break-inside-avoid">避免分页中断</div>

打印颜色适配

打印时背景色变透明，文字变黑色 (省墨)

打印时彩色文字变为黑色

边框颜色打印时调整为灰色

<div class="bg-blue-600 print:bg-transparent text-white print:text-black">
  打印去除背景色，文字变黑
</div>

打印分页控制

打印时从此处分页 (break-before-page)

打印后分页 (break-after-page)

避免内部断页 (break-inside-avoid)

<div class="print:break-before-page">之前分页</div>
<div class="print:break-after-page">之后分页</div>
<div class="print:break-inside-avoid">避免内部断页</div>

完整打印样式模板

📄 打印样式配置

/* 打印样式完整配置 */
@media print {
  /* 隐藏不必要的元素 */
  .no-print, nav, .sidebar, button:not(.print-btn) {
    display: none !important;
  }
  /* 确保链接显示 URL */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* 强制黑白打印 */
  body, .card, .container {
    background: white !important;
    color: black !important;
  }
}

🖨️ Tailwind print: 前缀示例

<!-- 打印专用组件 -->
<div class="print:block hidden">
  <h1>打印标题</h1>
  <footer class="print:fixed print:bottom-0">
    第 <span class="print:counter(page)"></span> 页
  </footer>
</div>

// 推荐打印样式组合示例
<div class="print:bg-white print:text-black print:p-4 print:shadow-none">
  <h2 class="print:text-xl">打印优化标题</h2>
  <div class="print:hidden">打印隐藏</div>
  <div class="hidden print:block">打印显示</div>
</div>

📰 列布局 (CSS Columns)

多列文本 (Columns Count)

columns-2 (2列布局)

Tailwind CSS 是一个实用优先的 CSS 框架，通过组合类名快速构建现代网页。它提供了大量原子类，如 flex、padding、margin、颜色等，让开发者无需离开 HTML 就能完成样式设计。

columns-3 (3列布局)

响应式设计是 Tailwind 的核心特性之一，通过断点前缀 (sm:、md:、lg:) 可以轻松实现不同屏幕尺寸下的样式适配。这大大提高了开发效率，同时保持了代码的可维护性。

<div class="columns-2">自动分成2列</div>
<div class="columns-3">自动分成3列</div>
<div class="columns-4">自动分成4列</div>

列间距 (Column Gap)

columns-3 gap-4 (间距1rem)

列之间的间距可以通过 gap 类来控制。此处 gap-4 表示列间距为 1rem。适当的间距可以提升阅读体验，避免内容过于拥挤。

columns-3 gap-8 (间距2rem)

较大的间距 (gap-8) 让列与列之间留有更多空白，这种布局常见于杂志或报纸的排版风格，给人一种宽敞舒适的阅读感受。

<div class="columns-3 gap-4">列间距1rem</div>
<div class="columns-3 gap-8">列间距2rem</div>

列分隔线 (Column Rule)

divide-y (水平分隔线)

这是一段示例文本，演示列之间的分隔线效果。通过设置分隔线可以让阅读者更清晰地辨别不同列的内容。

divide-x (垂直分隔线)

这段文本展示了垂直分隔线的效果。分隔线可以增加列与列之间的视觉区分度，使多列布局更加清晰易读。

<div class="columns-3 divide-x divide-gray-500">垂直分隔线</div>
<div class="columns-3 divide-y divide-blue-500">水平分隔线</div>

报纸/杂志布局示例

📰 报纸风格布局

在报纸和杂志的排版中，多列布局是最常见的设计形式。这种布局可以充分利用页面空间，让读者在有限的空间内获取更多信息。

Tailwind CSS 提供了简单易用的列布局工具类，如 columns-2、columns-3、gap-*、divide-* 等，让开发者无需编写复杂的 CSS 就能实现专业的报刊排版。

通过合理搭配列数、列间距和分隔线，可以创造出极具美感的阅读体验。这种布局特别适合文章列表、产品展示、博客内容等场景。

响应式设计也能与列布局完美结合，在移动设备上自动调整为单列，在平板和桌面上展示多列效果。

✨ 完整报纸布局代码

<div class="columns-2 md:columns-3 lg:columns-4 gap-8 divide-x divide-gray-600">
  <div>
    <h3>新闻标题 1</h3>
    <p>新闻内容摘要...</p>
  </div>
  <div>
    <h3>新闻标题 2</h3>
    <p>新闻内容摘要...</p>
  </div>
  <div>
    <h3>新闻标题 3</h3>
    <p>新闻内容摘要...</p>
  </div>
</div>

// 响应式报纸布局
<div class="columns-1 sm:columns-2 md:columns-3 lg:columns-4 gap-6 divide-x divide-gray-600">
  // 移动端1列 → 平板2列 → 桌面3列 → 大屏4列
</div>

🔄 变换 (Transforms)

平移 (Translate)

hover:translate-x-4 →

hover:translate-y-4 ↓

translate-x-2

-translate-x-2

translate-y-2

-translate-y-2

<div class="translate-x-4">向右移动1rem</div>
<div class="-translate-y-2">向上移动0.5rem</div>
<div class="hover:translate-x-2">悬停时平移</div>

旋转 (Rotate)

hover:rotate-12

hover:-rotate-12

hover:rotate-45

0°

6°

12°

45°

<div class="rotate-12">旋转12度</div>
<div class="-rotate-45">旋转-45度</div>
<div class="hover:rotate-90">悬停旋转90度</div>

缩放 (Scale)

scale-110

scale-125

scale-90

scale-75

scale-90

scale-100

scale-110

scale-x-75

scale-y-50

<div class="scale-125">放大1.25倍</div>
<div class="scale-50">缩小一半</div>
<div class="scale-x-150">水平拉伸</div>

倾斜 (Skew)

skew-x-6

-skew-x-6

skew-y-6

0°

3°

6°

12°

<div class="skew-x-12">X轴倾斜12度</div>
<div class="skew-y-6">Y轴倾斜6度</div>
<div class="hover:skew-x-12">悬停时倾斜</div>

变换原点 (Transform Origin)

origin-top-left

origin-center

origin-bottom-right

origin-top-left

origin-top-right

origin-bottom-left

origin-bottom-right

origin-center

origin-left

<div class="origin-top-left hover:scale-110">从左上角放大</div>
<div class="origin-center hover:rotate-12">绕中心旋转</div>
<div class="origin-bottom-right hover:scale-90">从右下角缩小</div>

多变换组合示例

组合变换

悬停：平移+旋转+缩放

反向组合

悬停：上移+反转+缩小

倾斜+缩放

悬停：倾斜+放大+原点变换

<div class="transition-all duration-300 hover:translate-x-4 hover:rotate-6 hover:scale-110">
  多变换组合效果
</div>
/* 注意：变换会叠加，顺序影响最终效果 */

🎭 遮罩与裁剪 (Masks & Clip)

文本裁剪 (Truncate)

这是一段很长很长的文本内容，超出部分会被截断并显示省略号...

truncate - 单行文本截断

这是一段多行文本内容。当文本内容超过两行时，超出部分会被截断并在末尾显示省略号。这种效果常用于文章摘要、评论预览等场景。

line-clamp-2 - 多行文本截断（需要插件支持）

<p class="truncate">单行文本截断...</p>
/* 需要配合 width 或 max-width 使用 */

Overflow 裁剪

超出内容被裁剪

超出内容可见

<div class="overflow-clip">超出内容裁剪隐藏</div>
<div class="overflow-visible">超出内容可见（默认）</div>

圆形/形状裁剪

rounded-full

clip-circle

clip-ellipse

<div class="rounded-full">完全圆形</div>
/* 更复杂的裁剪需要自定义 clip-path */
.clip-circle { clip-path: circle(40%); }

多边形裁剪 (Polygon)

三角形

五边形

星形

/* 多边形裁剪示例 */
.clip-triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.clip-pentagon { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.clip-star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

Inset 矩形裁剪

inset 20px

inset 40px

inset + round

/* inset 矩形裁剪 */
.clip-inset-20 { clip-path: inset(20px); }
.clip-inset-40 { clip-path: inset(40px); }
.clip-inset-round { clip-path: inset(20px round 20px); }

图片裁剪综合示例

三角形

圆形

六边形

菱形

/* 更多形状裁剪示例 */
.clip-circle { clip-path: circle(50% at 50% 50%); }
.clip-hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.clip-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

🎨 SVG 样式 (SVG Styling)

填充色 (Fill)

不同填充色示例

<svg class="w-12 h-12" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" class="fill-blue-500" />
</svg>
/* fill-{color}-{shade} 控制填充色 */

描边颜色 (Stroke)

不同描边颜色示例

<circle cx="12" cy="12" r="9" fill="none" class="stroke-blue-500" />
/* stroke-{color}-{shade} 控制描边颜色 */

描边宽度 (Stroke Width)

描边宽度对比 (1px → 2px → 3px → 4px)

<circle stroke-width="1" />  <!-- 1px 描边 -->
<circle stroke-width="2" />  <!-- 2px 描边 -->
<circle stroke-width="4" />  <!-- 4px 描边 -->

SVG 尺寸控制

w-8 h-8

w-12 h-12

w-16 h-16

w-20 h-20

<svg class="w-8 h-8" viewBox="0 0 24 24">...</svg>
<svg class="w-16 h-16" viewBox="0 0 24 24">...</svg>
/* 使用 w-* h-* 控制 SVG 尺寸 */

组合效果示例

<svg class="w-14 h-14" viewBox="0 0 24 24">
  <circle class="fill-blue-500/20 stroke-blue-500" stroke-width="2" />
  <path class="stroke-blue-500" stroke-width="2" />
</svg>

自定义图标库示例

添加

关闭

加号

下载

/* 可复用的 SVG 图标组件 */
<svg class="w-6 h-6 text-gray-400 hover:text-rose-400 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="10" />
  <path d="M12 8v8M8 12h8" />
</svg>

⚠️ 重要样式 (!important)

! 前缀基础用法

!bg-red-500 强制覆盖 bg-blue-500

! 前缀强制应用该样式，优先级最高

!bg-紫色

红色文字

<div class="!bg-red-500">强制红色背景</div>
<div class="!text-white">强制白色文字</div>
/* 在任意工具类前加 ! 提升优先级 */

覆盖第三方样式

外部样式: background-color: green !important;

Tailwind !bg-blue-500 覆盖外部样式

! 前缀可覆盖其他库或内联样式

<div class="!bg-red-500 !text-white">
  强制覆盖所有样式
</div>

响应式 + !important

响应式 + !important 组合

sm:!text-base / md:!text-lg / lg:!text-xl

<div class="!text-sm sm:!text-base md:!text-lg">
  响应式强制字体大小
</div>

状态 + !important

悬停时强制覆盖背景色和边框色

<button class="hover:!bg-red-600 focus:!ring-2 focus:!ring-blue-500">
  悬停/聚焦时强制样式
</button>

暗色模式 + !important

暗色模式强制样式

dark:!bg-slate-900 / dark:!text-white

<div class="!bg-white dark:!bg-slate-900 !text-black dark:!text-white">
  暗色模式强制覆盖
</div>

有/无 !important 对比

无 !important (正常优先级)

hover:bg-green-500 正常工作

有 !important (强制优先级)

hover:!bg-green-500 强制覆盖

⚠️ 使用建议

尽量少用 !important，优先提高选择器特异性
仅在覆盖第三方库样式或内联样式时使用
配合响应式前缀使用: sm:!p-4
配合状态使用: hover:!bg-red-500, focus:!ring-2

/* 使用场景示例 */
<div class="!bg-red-500">覆盖所有背景</div>
<div class="sm:!p-4 hover:!scale-105">响应式+状态强制</div>
/* 全局配置 important 选项可在 tailwind.config.js 中设置 */

🔌 预处理与插件 (Plugins)

表单插件 (@tailwindcss/forms)

🔧 安装配置

npm install -D @tailwindcss/forms

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
  ]
}

/* 插件效果：统一表单控件样式 */
/* 自动重置 input, select, textarea, checkbox, radio */

forms 插件效果演示

输入框

下拉选择

复选框

选项 A 选项 B

单选按钮

是否

文本域

<input class="form-input w-full rounded-md">
<select class="form-select"></select>
<input type="checkbox" class="form-checkbox">
<input type="radio" class="form-radio">
<textarea class="form-textarea"></textarea>

文章排版 (@tailwindcss/typography)

🔧 安装配置

npm install -D @tailwindcss/typography

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
  ]
}

<article class="prose prose-invert">
  <h1>文章标题</h1>
  <p>文章内容自动获得优雅排版</p>
</article>

typography 插件效果演示

文章标题 H1

二级标题 H2

这是一段正文内容。粗体文字和斜体文字都有优雅的样式。链接会自动添加下划线效果。

这是一段引用文字，会自动添加左侧边框和合适的间距，让引用内容更加突出。

无序列表项 1
无序列表项 2
无序列表项 3

有序列表项 1
有序列表项 2

code 代码片段 也有专门的样式处理。

<article class="prose prose-lg prose-invert">
  <h1>标题</h1>
  <p>内容自动美化</p>
</article>
/* prose-sm, prose-lg, prose-xl 控制字号 */

比例容器 (@tailwindcss/aspect-ratio)

🔧 安装配置

npm install -D @tailwindcss/aspect-ratio

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/aspect-ratio'),
  ]
}

<div class="aspect-w-16 aspect-h-9">
  <iframe src="..."></iframe>
</div>
/* 常见比例: 1/1, 4/3, 16/9 */

aspect-ratio 插件效果演示

1:1 正方形

4:3 传统比例

16:9 宽屏视频

2:3 竖版图片

<div class="aspect-w-16 aspect-h-9">
  <img src="..." class="object-cover">
</div>
/* 常用比例类名前缀 */

多插件组合使用示例

16:9 视频占位区

文章标题示例

这是一个展示多个 Tailwind 插件组合使用的示例。@tailwindcss/typography 负责文章排版，@tailwindcss/aspect-ratio 控制比例容器，@tailwindcss/forms 美化表单控件。

// tailwind.config.js 完整插件配置
module.exports = {
  content: ['./src/**/*.{html,js}'],
  darkMode: 'class',
  theme: { extend: {} },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ]
}

✨ 任意值 (Arbitrary Values)

任意宽度/高度

w-[100px]
h-[100px]

w-[150px] h-[80px]

w-[200px] h-[50px]

80px

120px

5rem

<div class="w-[237px] h-[5rem]">任意宽度和高度</div>
<div class="w-[calc(100%-2rem)]">动态计算宽度</div>

任意颜色

#123456

#ff6b6b

#4ecdc4

#ffe66d

rgba(255,107,107,0.3)

text-[#ff6b6b]

hsl(200,80%,50%)

<div class="bg-[#123456]">十六进制颜色</div>
<div class="bg-[rgba(255,0,0,0.5)]">RGBA颜色</div>
<div class="text-[#ff6b6b]">任意文字颜色</div>

任意间距

p-[13px] (内边距13px)

m-[19px] (外边距19px)

gap-[23px]

<div class="m-[19px] p-[13px]">任意外边距/内边距</div>
<div class="gap-[23px]">任意间距</div>

任意字体/文字属性

text-[18px] - 18像素文字

text-[2rem] - 2rem文字

leading-[3rem] - 行高3rem

tracking-[0.2em] - 字间距0.2em

font-[500] - 字重500

<p class="text-[18px] leading-[2rem]">任意字体大小和行高</p>
<p class="tracking-[0.2em] font-[500]">任意字间距和字重</p>

任意定位值

top-[15px] left-[20px]

bottom-[25px] right-[30px]

居中区域

<div class="absolute top-[15px] left-[20px]">任意偏移量</div>
<div class="inset-[10px]">四边统一偏移</div>

任意边框/圆角

border-[3px]
rounded-[12px]

4角不同圆角

多色边框

<div class="border-[3px] rounded-[12px]">任意边框宽度/圆角</div>
<div class="rounded-[24px_12px_24px_12px]">四个角不同圆角</div>

任意阴影

黄色阴影

青色阴影

内阴影

<div class="shadow-[0_5px_15px_rgba(0,0,0,0.3)]">
  自定义阴影效果
</div>

任意变换值

translate-x-[20px]

rotate-[15deg]

scale-[1.2]

skew-x-[10deg]

📝 任意值使用说明

语法格式：class="w-[任意值]"
支持所有 Tailwind 工具类：bg、text、border、shadow、transform 等
支持 CSS 函数：calc()、min()、max()
支持所有 CSS 单位：px、rem、em、%、vh、vw、cm、mm 等
可与响应式前缀组合：sm:w-[200px]
可与状态前缀组合：hover:bg-[#123456]

/* 任意值完整示例 */
<div class="w-[237px] h-[5rem] bg-[#123456] rounded-[16px] shadow-[0_4px_6px_rgba(0,0,0,0.1)] hover:translate-x-[10px] sm:w-[300px]">
  完全自定义样式
</div>

🎨 变量与 CSS 变量 (Variables & CSS Custom Properties)

CSS 变量基础

使用 CSS 变量控制的样式: --primary-color: #3b82f6

定义变量: --变量名: 值; 使用变量: var(--变量名)

/* 定义 CSS 变量 */
:root { --theme-color: #3b82f6; }
/* 使用变量 */
.element { background: var(--theme-color); }

Tailwind 中使用 CSS 变量

使用 var(--custom-color)

Tailwind 中: bg-[var(--custom-color)] w-[calc(var(--custom-size))]

<div class="bg-[var(--theme-color)] w-[calc(var(--size,10rem))]">
  Tailwind 中使用 CSS 变量
</div>
/* 使用 var() 函数，可设置默认值 */

动态控制颜色

动态颜色区块 - 点击下方按钮改变颜色

通过 JS 修改 CSS 变量实现动态换色

// JavaScript 动态修改 CSS 变量
element.style.setProperty('--dynamic-color', '#ff0000');
// 或
document.documentElement.style.setProperty('--theme-color', '#00ff00');

动态控制尺寸

w-[var(--dynamic-size)]

动态控制宽高: --dynamic-size

<div class="w-[var(--size)] h-[var(--size)]">动态尺寸</div>
// JS: setProperty('--size', '200px')

主题切换（CSS 变量）

CSS 变量主题切换

背景、文字、卡片颜色都随主题变化

通过 CSS 变量集中管理主题配色

/* 定义不同主题的 CSS 变量 */
.theme-dark { --bg: #1a1a1a; --text: #ffffff; }
.theme-light { --bg: #ffffff; --text: #1a1a1a; }
/* 切换主题类即可 */

复杂变量组合 & 最佳实践

📦 变量派生与计算

padding: calc(var(--spacing-unit) * 2)
margin: calc(var(--spacing-unit) * 3)

🎯 全局变量定义建议

/* 在 :root 中定义全局变量 */
:root {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --spacing-unit: 0.25rem;
  --border-radius: 0.5rem;
  --transition-speed: 0.3s;
}

/* 组件级变量覆盖 */
.card { --card-padding: 1.5rem; }

💡 CSS 变量最佳实践

命名规范：使用双横线前缀，如 --color-primary、--spacing-md
提供回退值：var(--custom-color, #3b82f6) 防止变量未定义
作用域控制：在 :root 定义全局变量，在特定元素定义局部变量
与 Tailwind 结合：使用 bg-[var(--color-primary)] 引用变量
响应式支持：在不同断点重新定义变量值

/* 完整示例：CSS 变量驱动的设计系统 */
:root {
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --radius: 0.5rem;
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.btn {
  background: var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.btn:hover { background: var(--primary-dark); }

🚀 优化与生产构建 (Optimization & Production)

移除未使用样式 (Purge)

🔧 content 配置

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx,vue}',
    './public/index.html',
    './node_modules/my-library/**/*.js',
  ],
}

生产构建时自动移除未使用的样式，大幅减小 CSS 体积

// 安全列表 (防止误删动态类)
content: ['./src/**/*.html'],
safelist: [
  'bg-red-500',
  'text-green-400',
  /^bg-/,
]

CSS 压缩 (Minify)

📦 生产环境配置

// package.json
{
  "scripts": {
    "build": "NODE_ENV=production tailwindcss -o dist/tailwind.css --minify"
  }
}

// PostCSS 配置
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    cssnano: { preset: 'default' }
  }
}

压缩后 CSS 体积可减少 80%-90%

// CLI 命令
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

性能优化建议

⚡ 按需导入 - 只导入使用的 Tailwind 组件
📦 使用 CDN - 开发环境可用，生产建议本地构建
🎯 避免深层嵌套 - 减少 CSS 选择器复杂度
🔄 复用组件 - 创建可复用的组件类
📱 响应式优化 - 移动优先策略减少 CSS

// 建议：使用 @apply 合并常用类
.btn-primary {
  @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700;
}

最佳实践清单

📁 项目结构

src/
├── css/
│   ├── components.css
│   ├── utilities.css
│   └── main.css
├── js/
└── index.html

🔧 配置文件

// 分离开发/生产配置
module.exports = {
  content: ['./src/**/*.{html,js}'],
  darkMode: 'class',
  theme: { extend: {} },
  plugins: [],
}

📦 构建脚本

{
  "scripts": {
    "dev": "tailwindcss -i input.css -o output.css --watch",
    "build": "tailwindcss -i input.css -o output.css --minify"
  }
}

✅ 开发检查清单

✓ 使用 content 精确指定模板文件

✓ 生产环境使用 --minify 压缩

✓ 避免过度使用 @apply

✓ 合理使用 safelist 保留动态类

✓ 分离组件样式和工具样式

✓ 使用 CSS 变量实现主题切换

✓ 启用浏览器缓存和 Gzip 压缩

✓ 监控 CSS 包大小变化

# 完整生产构建流程
1. npm run build (生成压缩 CSS)
2. 检查产物大小 (tailwind.css 通常 < 20KB)
3. 部署到 CDN 或静态服务器
4. 启用 HTTP/2 和 Gzip/Brotli 压缩

📦 容器与盒子

📏 间距与尺寸

✍️ 排版与文本

💪 Flex 布局

🔲 网格布局

🎨 颜色与背景

🖌️ 边框与轮廓

📍 定位与层级

📱 响应式设计

⚡ 状态交互

✨ 过渡与动画

🎭 阴影与效果

🖱️ 交互与光标

📝 表单样式

📊 表格样式

🔘 按钮样式

📐 尺寸比例

🎯 对齐与间距补充

👁️ 可见性与显示控制

📜 滚动与溢出增强

🖼️ 可见区域与裁剪

📺 媒体查询扩展

✨ 伪元素

🌙 深色模式

⚙️ 函数与指令

🔧 自定义配置

♿ 无障碍

🖨️ 打印样式

📰 列布局

🔄 变换

🎭 遮罩与裁剪

🎨 SVG样式

⚠️ 重要样式

🔌 预处理与插件

✨ 任意值

🎨 变量与CSS变量

🚀 优化与构建

🎨 CSS 属性实验室 + Tailwind 速查

📦 容器与盒子

容器 (Container)

盒子大小 (Box Sizing)

显示类型 (Display)

浮动与清除

宽高 (Width/Height)

最大宽高 (Max-Width/Height)

最小宽高 (Min-Width/Height)

溢出 (Overflow)

元素适配方式 (object-fit)

元素定位 (object-position)

元素可见性 (visibility)

元素隔离 (isolation)

📏 间距与尺寸

内边距 (Padding)

外边距 (Margin)

宽高 & 尺寸扩展

横向元素间距 (space-x)

纵向元素间距 (space-y)

横向分割线 (divide-x)

纵向分割线 (divide-y)

✍️ 排版与文本

字体大小 (Font Size)

字体粗细 (Font Weight)

行高 (Line Height)

字间距 (Letter Spacing)

文本对齐 (Text Align)

换行与截断

文本缩进 (Text Indent)

大小写转换

文本装饰

文本溢出

列表样式 (List Style)

垂直对齐 (Vertical Align)

💪 Flex 布局 (Flexbox)

基础 Flex 容器

Flex 方向 (Flex Direction)

主轴对齐 (Justify Content)

交叉轴对齐 (Align Items)

Flex 换行 (Flex Wrap)

内容间距 (Gap)

元素排序 (Order)