Tailwind CSS 标签用法库

布局与容器

容器 (Container)

这是一个居中的容器

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

盒子大小 (Box Sizing)

box-border

<div class="box-border h-20 w-32 p-4 border-4">
  box-border
</div>

<div class="box-content h-20 w-32 p-4 border-4">
  box-content
</div>

显示类型 (Display)

block

inline-block

inline

flex

<div class="block">block</div>
<div class="inline-block">inline-block</div>
<div class="inline">inline</div>
<div class="flex">flex</div>
<div class="hidden">hidden</div>

浮动与清除 (Floats)

这是一个左浮动的图片，文字会环绕在图片周围。使用 float-left 类可以让元素向左浮动。

<div class="overflow-hidden">
  <img src="..." class="float-left mr-4">
  <p>文字内容...</p>
</div>

<div class="float-right">右浮动</div>
<div class="float-none">不浮动</div>
<div class="clear-left">清除左浮动</div>
<div class="clear-right">清除右浮动</div>
<div class="clear-both">清除两侧浮动</div>

间距与尺寸

内边距 (Padding)

p-0

p-2

p-4

p-8

<div class="p-0">p-0</div>
<div class="p-1">p-1</div>
<div class="p-2">p-2</div>
<div class="p-3">p-3</div>
<div class="p-4">p-4</div>
<div class="p-5">p-5</div>
<div class="p-6">p-6</div>
<div class="p-8">p-8</div>
<div class="p-10">p-10</div>
<div class="p-12">p-12</div>
<div class="p-16">p-16</div>
<div class="p-20">p-20</div>
<div class="p-24">p-24</div>
<div class="p-32">p-32</div>
<div class="p-40">p-40</div>
<div class="p-48">p-48</div>
<div class="p-56">p-56</div>
<div class="p-64">p-64</div>

外边距 (Margin)

m-0

m-2

m-4

m-8

<div class="m-0">m-0</div>
<div class="m-1">m-1</div>
<div class="m-2">m-2</div>
<div class="m-3">m-3</div>
<div class="m-4">m-4</div>
<div class="m-5">m-5</div>
<div class="m-6">m-6</div>
<div class="m-8">m-8</div>
<div class="m-10">m-10</div>
<div class="m-12">m-12</div>
<div class="m-16">m-16</div>
<div class="m-20">m-20</div>
<div class="m-24">m-24</div>
<div class="m-32">m-32</div>
<div class="m-40">m-40</div>
<div class="m-48">m-48</div>
<div class="m-56">m-56</div>
<div class="m-64">m-64</div>

排版与文本

字体大小 (Font Size)

text-xs - 超小字体

text-sm - 小字体

text-base - 基础字体

text-lg - 大字体

text-xl - 超大字体

text-2xl - 2倍字体

text-3xl - 3倍字体

<p class="text-xs">text-xs</p>
<p class="text-sm">text-sm</p>
<p class="text-base">text-base</p>
<p class="text-lg">text-lg</p>
<p class="text-xl">text-xl</p>
<p class="text-2xl">text-2xl</p>
<p class="text-3xl">text-3xl</p>
<p class="text-4xl">text-4xl</p>
<p class="text-5xl">text-5xl</p>
<p class="text-6xl">text-6xl</p>
<p class="text-7xl">text-7xl</p>
<p class="text-8xl">text-8xl</p>
<p class="text-9xl">text-9xl</p>

文本对齐 (Text Alignment)

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>

背景颜色 (Background Colors)

灰色系背景

bg-gray-100

bg-gray-300

bg-gray-500

bg-gray-700

bg-gray-900

<div class="bg-gray-100">bg-gray-100</div>
<div class="bg-gray-200">bg-gray-200</div>
<div class="bg-gray-300">bg-gray-300</div>
<div class="bg-gray-400">bg-gray-400</div>
<div class="bg-gray-500">bg-gray-500</div>
<div class="bg-gray-600">bg-gray-600</div>
<div class="bg-gray-700">bg-gray-700</div>
<div class="bg-gray-800">bg-gray-800</div>
<div class="bg-gray-900">bg-gray-900</div>

彩色背景

bg-red-500

bg-blue-500

bg-green-500

bg-yellow-500

bg-purple-500

<div class="bg-red-500">bg-red-500</div>
<div class="bg-blue-500">bg-blue-500</div>
<div class="bg-green-500">bg-green-500</div>
<div class="bg-yellow-500">bg-yellow-500</div>
<div class="bg-purple-500">bg-purple-500</div>
<div class="bg-pink-500">bg-pink-500</div>
<div class="bg-indigo-500">bg-indigo-500</div>
<div class="bg-teal-500">bg-teal-500</div>
<div class="bg-orange-500">bg-orange-500</div>

文本颜色 (Text Colors)

灰色文本

text-gray-100

text-gray-300

text-gray-500

text-gray-700

text-gray-900

<p class="text-gray-100">text-gray-100</p>
<p class="text-gray-200">text-gray-200</p>
<p class="text-gray-300">text-gray-300</p>
<p class="text-gray-400">text-gray-400</p>
<p class="text-gray-500">text-gray-500</p>
<p class="text-gray-600">text-gray-600</p>
<p class="text-gray-700">text-gray-700</p>
<p class="text-gray-800">text-gray-800</p>
<p class="text-gray-900">text-gray-900</p>

彩色文本

text-red-400

text-blue-400

text-green-400

text-yellow-400

text-purple-400

<p class="text-red-400">text-red-400</p>
<p class="text-blue-400">text-blue-400</p>
<p class="text-green-400">text-green-400</p>
<p class="text-yellow-400">text-yellow-400</p>
<p class="text-purple-400">text-purple-400</p>
<p class="text-pink-400">text-pink-400</p>
<p class="text-indigo-400">text-indigo-400</p>
<p class="text-teal-400">text-teal-400</p>
<p class="text-orange-400">text-orange-400</p>

背景渐变 (Background Gradients)

线性渐变

from-purple-400 to-pink-500

from-blue-500 to-teal-400

from-green-400 to-blue-500

<div class="bg-gradient-to-r from-purple-400 to-pink-500">
  从左到右渐变
</div>

<div class="bg-gradient-to-l from-blue-500 to-teal-400">
  从右到左渐变
</div>

<div class="bg-gradient-to-t from-green-400 to-blue-500">
  从下到上渐变
</div>

<div class="bg-gradient-to-b from-yellow-400 to-red-500">
  从上到下渐变
</div>

<div class="bg-gradient-to-tr from-purple-500 to-pink-500">
  从左下到右上渐变
</div>

<div class="bg-gradient-to-br from-blue-400 to-indigo-500">
  从左上到右下渐变
</div>

径向渐变

via-pink-500 (中间色)

via-purple-500 (中间色)

<div class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
  三色渐变 (via)
</div>

<div class="bg-radial from-blue-400 to-purple-500">
  径向渐变
</div>

<div class="bg-conic from-red-500 via-yellow-500 to-red-500">
  锥形渐变
</div>

背景属性 (Background Properties)

背景尺寸

bg-cover

bg-contain

bg-auto

<div class="bg-cover">背景图片覆盖整个元素</div>
<div class="bg-contain">背景图片完整显示在元素内</div>
<div class="bg-auto">背景图片原始尺寸</div>

<!-- 具体尺寸 -->
<div class="bg-50">背景图片宽度50%</div>
<div class="bg-100">背景图片宽度100%</div>

背景位置

bg-center

bg-top

bg-bottom

bg-left

bg-right

bg-left-top

<div class="bg-center">背景居中</div>
<div class="bg-top">背景顶部</div>
<div class="bg-bottom">背景底部</div>
<div class="bg-left">背景左侧</div>
<div class="bg-right">背景右侧</div>
<div class="bg-left-top">背景左上角</div>
<div class="bg-left-bottom">背景左下角</div>
<div class="bg-right-top">背景右上角</div>
<div class="bg-right-bottom">背景右下角</div>

背景重复 (Background Repeat)

重复模式

bg-repeat (默认)

bg-no-repeat

bg-repeat-x

bg-repeat-y

<div class="bg-repeat">背景重复 (默认)</div>
<div class="bg-no-repeat">背景不重复</div>
<div class="bg-repeat-x">背景水平重复</div>
<div class="bg-repeat-y">背景垂直重复</div>
<div class="bg-repeat-round">背景round重复</div>
<div class="bg-repeat-space">背景space重复</div>

背景透明度

bg-opacity-100

bg-opacity-75

bg-opacity-50

bg-opacity-25

bg-opacity-0

<div class="bg-blue-500 bg-opacity-100">不透明</div>
<div class="bg-blue-500 bg-opacity-75">75% 不透明度</div>
<div class="bg-blue-500 bg-opacity-50">50% 不透明度</div>
<div class="bg-blue-500 bg-opacity-25">25% 不透明度</div>
<div class="bg-blue-500 bg-opacity-0">完全透明</div>

<!-- 其他透明度值 -->
<div class="bg-opacity-0">0%</div>
<div class="bg-opacity-5">5%</div>
<div class="bg-opacity-10">10%</div>
<div class="bg-opacity-20">20%</div>
<div class="bg-opacity-25">25%</div>
<div class="bg-opacity-30">30%</div>
<div class="bg-opacity-40">40%</div>
<div class="bg-opacity-50">50%</div>
<div class="bg-opacity-60">60%</div>
<div class="bg-opacity-70">70%</div>
<div class="bg-opacity-75">75%</div>
<div class="bg-opacity-80">80%</div>
<div class="bg-opacity-90">90%</div>
<div class="bg-opacity-95">95%</div>
<div class="bg-opacity-100">100%</div>

边框宽度 (Border Width)

所有边边框

border-0

border (默认)

border-2

border-4

border-8

<div class="border-0">无边框</div>
<div class="border">默认边框 (1px)</div>
<div class="border-2">2px 边框</div>
<div class="border-4">4px 边框</div>
<div class="border-8">8px 边框</div>

<!-- 其他宽度 -->
<div class="border-0">0px</div>
<div class="border-2">2px</div>
<div class="border-4">4px</div>
<div class="border-8">8px</div>

单边边框

border-t-2 (上边框)

border-r-2 (右边框)

border-b-2 (下边框)

border-l-2 (左边框)

<div class="border-t-2">上边框 2px</div>
<div class="border-r-2">右边框 2px</div>
<div class="border-b-2">下边框 2px</div>
<div class="border-l-2">左边框 2px</div>

<!-- 其他单边边框 -->
<div class="border-t">上边框默认</div>
<div class="border-t-4">上边框 4px</div>
<div class="border-t-8">上边框 8px</div>

<div class="border-r">右边框默认</div>
<div class="border-r-4">右边框 4px</div>
<div class="border-r-8">右边框 8px</div>

<div class="border-b">下边框默认</div>
<div class="border-b-4">下边框 4px</div>
<div class="border-b-8">下边框 8px</div>

<div class="border-l">左边框默认</div>
<div class="border-l-4">左边框 4px</div>
<div class="border-l-8">左边框 8px</div>

边框颜色 (Border Colors)

灰色边框

border-gray-100

border-gray-300

border-gray-500

border-gray-700

border-gray-900

<div class="border border-gray-100">border-gray-100</div>
<div class="border border-gray-200">border-gray-200</div>
<div class="border border-gray-300">border-gray-300</div>
<div class="border border-gray-400">border-gray-400</div>
<div class="border border-gray-500">border-gray-500</div>
<div class="border border-gray-600">border-gray-600</div>
<div class="border border-gray-700">border-gray-700</div>
<div class="border border-gray-800">border-gray-800</div>
<div class="border border-gray-900">border-gray-900</div>

彩色边框

border-red-500

border-blue-500

border-green-500

border-yellow-500

border-purple-500

<div class="border border-red-500">border-red-500</div>
<div class="border border-blue-500">border-blue-500</div>
<div class="border border-green-500">border-green-500</div>
<div class="border border-yellow-500">border-yellow-500</div>
<div class="border border-purple-500">border-purple-500</div>
<div class="border border-pink-500">border-pink-500</div>
<div class="border border-indigo-500">border-indigo-500</div>
<div class="border border-teal-500">border-teal-500</div>
<div class="border border-orange-500">border-orange-500</div>

边框圆角 (Border Radius)

所有角圆角

rounded-none

rounded-sm

rounded (默认)

rounded-md

rounded-lg

rounded-xl

rounded-2xl

rounded-3xl

rounded-full

<div class="rounded-none">无圆角</div>
<div class="rounded-sm">小圆角</div>
<div class="rounded">默认圆角</div>
<div class="rounded-md">中等圆角</div>
<div class="rounded-lg">大圆角</div>
<div class="rounded-xl">超大圆角</div>
<div class="rounded-2xl">2倍圆角</div>
<div class="rounded-3xl">3倍圆角</div>
<div class="rounded-full">完全圆角</div>

单角圆角

rounded-t-lg (上角)

rounded-r-lg (右角)

rounded-b-lg (下角)

rounded-l-lg (左角)

rounded-tl-lg (左上)

rounded-tr-lg (右上)

rounded-br-lg (右下)

rounded-bl-lg (左下)

<div class="rounded-t-lg">上角圆角</div>
<div class="rounded-r-lg">右角圆角</div>
<div class="rounded-b-lg">下角圆角</div>
<div class="rounded-l-lg">左角圆角</div>

<div class="rounded-tl-lg">左上角圆角</div>
<div class="rounded-tr-lg">右上角圆角</div>
<div class="rounded-br-lg">右下角圆角</div>
<div class="rounded-bl-lg">左下角圆角</div>

<!-- 其他单角圆角 -->
<div class="rounded-t-none">上角无圆角</div>
<div class="rounded-t-sm">上角小圆角</div>
<div class="rounded-t-md">上角中等圆角</div>
<div class="rounded-t-xl">上角超大圆角</div>
<div class="rounded-t-2xl">上角2倍圆角</div>
<div class="rounded-t-3xl">上角3倍圆角</div>
<div class="rounded-t-full">上角完全圆角</div>

边框样式 (Border Style)

边框样式

border-solid (实线)

border-dashed (虚线)

border-dotted (点线)

border-double (双线)

border-none (无边框)

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

<!-- 单边样式 -->
<div class="border-t-dashed">上边框虚线</div>
<div class="border-r-dotted">右边框点线</div>
<div class="border-b-double">下边框双线</div>
<div class="border-l-dashed">左边框虚线</div>

轮廓样式 (Outline)

outline-1

outline-2

outline-4

outline-dashed

outline-none

<div class="outline outline-1">1px 轮廓</div>
<div class="outline outline-2">2px 轮廓</div>
<div class="outline outline-4">4px 轮廓</div>
<div class="outline outline-8">8px 轮廓</div>

<div class="outline-dashed">虚线轮廓</div>
<div class="outline-dotted">点线轮廓</div>
<div class="outline-double">双线轮廓</div>

<div class="outline-none">无轮廓</div>

<!-- 轮廓偏移 -->
<div class="outline outline-2 outline-offset-2">轮廓偏移 2px</div>
<div class="outline outline-2 outline-offset-4">轮廓偏移 4px</div>

分割线 (Dividers)

水平分割线

border-t (上分割线)

border-b (下分割线)

divide-y 项目 1

divide-y 项目 2

divide-y 项目 3

<!-- 水平分割线 -->
<div class="border-t border-gray-300"></div>
<div class="border-b border-gray-300"></div>

<!-- 垂直分割线 -->
<div class="border-l border-gray-300"></div>
<div class="border-r border-gray-300"></div>

<!-- 子元素分割线 -->
<div class="divide-y divide-gray-300">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<div class="divide-x divide-gray-300">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- 分割线样式 -->
<div class="divide-y divide-dashed">虚线分割</div>
<div class="divide-y divide-dotted">点线分割</div>

环状边框 (Ring)

ring-1

ring-2

ring-4

ring-8

ring-offset-2

<div class="ring-1 ring-blue-500">1px 环状边框</div>
<div class="ring-2 ring-green-500">2px 环状边框</div>
<div class="ring-4 ring-red-500">4px 环状边框</div>
<div class="ring-8 ring-purple-500">8px 环状边框</div>

<!-- 环状边框偏移 -->
<div class="ring-2 ring-blue-500 ring-offset-2">环状边框偏移 2px</div>
<div class="ring-2 ring-blue-500 ring-offset-4">环状边框偏移 4px</div>

<!-- 环状边框透明 -->
<div class="ring-2 ring-blue-500 ring-opacity-50">50% 透明度</div>
<div class="ring-2 ring-blue-500 ring-opacity-25">25% 透明度</div>

<!-- 无环状边框 -->
<div class="ring-0">无环状边框</div>

盒子阴影 (Box Shadow)

基础阴影

shadow-sm

shadow (默认)

shadow-md

shadow-lg

shadow-xl

shadow-2xl

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

<!-- 内阴影 -->
<div class="shadow-inner">内阴影</div>

<!-- 无阴影 -->
<div class="shadow-none">无阴影</div>

彩色阴影

shadow-blue-500/50

shadow-red-500/50

shadow-green-500/50

shadow-purple-500/50

<div class="shadow-lg shadow-blue-500/50">蓝色阴影 50% 透明度</div>
<div class="shadow-lg shadow-red-500/50">红色阴影 50% 透明度</div>
<div class="shadow-lg shadow-green-500/50">绿色阴影 50% 透明度</div>
<div class="shadow-lg shadow-purple-500/50">紫色阴影 50% 透明度</div>

<!-- 不同透明度 -->
<div class="shadow-lg shadow-blue-500/25">25% 透明度</div>
<div class="shadow-lg shadow-blue-500/75">75% 透明度</div>

<!-- 所有颜色 -->
<div class="shadow-lg shadow-gray-500/50">灰色阴影</div>
<div class="shadow-lg shadow-pink-500/50">粉色阴影</div>
<div class="shadow-lg shadow-indigo-500/50">靛蓝色阴影</div>
<div class="shadow-lg shadow-teal-500/50">蓝绿色阴影</div>
<div class="shadow-lg shadow-orange-500/50">橙色阴影</div>
<div class="shadow-lg shadow-yellow-500/50">黄色阴影</div>

不透明度 (Opacity)

元素不透明度

opacity-100

opacity-75

opacity-50

opacity-25

opacity-0

<div class="opacity-100">100% 不透明度</div>
<div class="opacity-95">95% 不透明度</div>
<div class="opacity-90">90% 不透明度</div>
<div class="opacity-80">80% 不透明度</div>
<div class="opacity-75">75% 不透明度</div>
<div class="opacity-70">70% 不透明度</div>
<div class="opacity-60">60% 不透明度</div>
<div class="opacity-50">50% 不透明度</div>
<div class="opacity-40">40% 不透明度</div>
<div class="opacity-30">30% 不透明度</div>
<div class="opacity-25">25% 不透明度</div>
<div class="opacity-20">20% 不透明度</div>
<div class="opacity-10">10% 不透明度</div>
<div class="opacity-5">5% 不透明度</div>
<div class="opacity-0">0% 不透明度</div>

混合模式

mix-blend-multiply

mix-blend-screen

mix-blend-overlay

<div class="mix-blend-normal">正常混合</div>
<div class="mix-blend-multiply">正片叠底</div>
<div class="mix-blend-screen">滤色</div>
<div class="mix-blend-overlay">叠加</div>
<div class="mix-blend-darken">变暗</div>
<div class="mix-blend-lighten">变亮</div>
<div class="mix-blend-color-dodge">颜色减淡</div>
<div class="mix-blend-color-burn">颜色加深</div>
<div class="mix-blend-hard-light">强光</div>
<div class="mix-blend-soft-light">柔光</div>
<div class="mix-blend-difference">差值</div>
<div class="mix-blend-exclusion">排除</div>
<div class="mix-blend-hue">色相</div>
<div class="mix-blend-saturation">饱和度</div>
<div class="mix-blend-color">颜色</div>
<div class="mix-blend-luminosity">明度</div>

滤镜 (Filters)

模糊滤镜

blur-none

blur-sm

blur (默认)

blur-md

blur-lg

blur-xl

blur-2xl

blur-3xl

<div class="blur-none">无模糊</div>
<div class="blur-sm">小模糊</div>
<div class="blur">默认模糊</div>
<div class="blur-md">中等模糊</div>
<div class="blur-lg">大模糊</div>
<div class="blur-xl">超大模糊</div>
<div class="blur-2xl">2倍模糊</div>
<div class="blur-3xl">3倍模糊</div>

其他滤镜

brightness-50

brightness-150

contrast-50

contrast-150

grayscale

invert

sepia

hue-rotate-90

<!-- 亮度 -->
<div class="brightness-0">0% 亮度</div>
<div class="brightness-50">50% 亮度</div>
<div class="brightness-75">75% 亮度</div>
<div class="brightness-90">90% 亮度</div>
<div class="brightness-95">95% 亮度</div>
<div class="brightness-100">100% 亮度</div>
<div class="brightness-105">105% 亮度</div>
<div class="brightness-110">110% 亮度</div>
<div class="brightness-125">125% 亮度</div>
<div class="brightness-150">150% 亮度</div>
<div class="brightness-200">200% 亮度</div>

<!-- 对比度 -->
<div class="contrast-0">0% 对比度</div>
<div class="contrast-50">50% 对比度</div>
<div class="contrast-75">75% 对比度</div>
<div class="contrast-100">100% 对比度</div>
<div class="contrast-125">125% 对比度</div>
<div class="contrast-150">150% 对比度</div>
<div class="contrast-200">200% 对比度</div>

<!-- 其他滤镜 -->
<div class="grayscale">灰度</div>
<div class="grayscale-0">无灰度</div>
<div class="invert">反色</div>
<div class="invert-0">无反色</div>
<div class="sepia">复古</div>
<div class="sepia-0">无复古</div>
<div class="saturate-0">0% 饱和度</div>
<div class="saturate-50">50% 饱和度</div>
<div class="saturate-100">100% 饱和度</div>
<div class="saturate-150">150% 饱和度</div>
<div class="saturate-200">200% 饱和度</div>

<!-- 色相旋转 -->
<div class="hue-rotate-0">0deg</div>
<div class="hue-rotate-15">15deg</div>
<div class="hue-rotate-30">30deg</div>
<div class="hue-rotate-60">60deg</div>
<div class="hue-rotate-90">90deg</div>
<div class="hue-rotate-180">180deg</div>

背景滤镜 (Backdrop Filters)

背景模糊

backdrop-blur-sm

backdrop-blur-none

backdrop-blur-md

<div class="backdrop-blur-none">无背景模糊</div>
<div class="backdrop-blur-sm">小背景模糊</div>
<div class="backdrop-blur">默认背景模糊</div>
<div class="backdrop-blur-md">中等背景模糊</div>
<div class="backdrop-blur-lg">大背景模糊</div>
<div class="backdrop-blur-xl">超大背景模糊</div>
<div class="backdrop-blur-2xl">2倍背景模糊</div>
<div class="backdrop-blur-3xl">3倍背景模糊</div>

其他背景滤镜

backdrop-grayscale

backdrop-invert

backdrop-sepia

backdrop-brightness-50

backdrop-contrast-50

backdrop-saturate-50

<div class="backdrop-grayscale">背景灰度</div>
<div class="backdrop-invert">背景反色</div>
<div class="backdrop-sepia">背景复古</div>

<!-- 背景亮度 -->
<div class="backdrop-brightness-0">0% 背景亮度</div>
<div class="backdrop-brightness-50">50% 背景亮度</div>
<div class="backdrop-brightness-75">75% 背景亮度</div>
<div class="backdrop-brightness-90">90% 背景亮度</div>
<div class="backdrop-brightness-95">95% 背景亮度</div>
<div class="backdrop-brightness-100">100% 背景亮度</div>
<div class="backdrop-brightness-105">105% 背景亮度</div>
<div class="backdrop-brightness-110">110% 背景亮度</div>
<div class="backdrop-brightness-125">125% 背景亮度</div>
<div class="backdrop-brightness-150">150% 背景亮度</div>

<!-- 背景对比度 -->
<div class="backdrop-contrast-0">0% 背景对比度</div>
<div class="backdrop-contrast-50">50% 背景对比度</div>
<div class="backdrop-contrast-75">75% 背景对比度</div>
<div class="backdrop-contrast-100">100% 背景对比度</div>
<div class="backdrop-contrast-125">125% 背景对比度</div>
<div class="backdrop-contrast-150">150% 背景对比度</div>

<!-- 背景饱和度 -->
<div class="backdrop-saturate-0">0% 背景饱和度</div>
<div class="backdrop-saturate-50">50% 背景饱和度</div>
<div class="backdrop-saturate-100">100% 背景饱和度</div>
<div class="backdrop-saturate-150">150% 背景饱和度</div>
<div class="backdrop-saturate-200">200% 背景饱和度</div>

变换 (Transforms)

变换基础

scale-75

scale-100

scale-125

rotate-45

-rotate-45

translate-x-4

-translate-x-4

<!-- 缩放 -->
<div class="scale-0">缩放 0%</div>
<div class="scale-50">缩放 50%</div>
<div class="scale-75">缩放 75%</div>
<div class="scale-90">缩放 90%</div>
<div class="scale-95">缩放 95%</div>
<div class="scale-100">缩放 100%</div>
<div class="scale-105">缩放 105%</div>
<div class="scale-110">缩放 110%</div>
<div class="scale-125">缩放 125%</div>
<div class="scale-150">缩放 150%</div>

<!-- 旋转 -->
<div class="rotate-0">旋转 0deg</div>
<div class="rotate-1">旋转 1deg</div>
<div class="rotate-2">旋转 2deg</div>
<div class="rotate-3">旋转 3deg</div>
<div class="rotate-6">旋转 6deg</div>
<div class="rotate-12">旋转 12deg</div>
<div class="rotate-45">旋转 45deg</div>
<div class="rotate-90">旋转 90deg</div>
<div class="rotate-180">旋转 180deg</div>

<!-- 平移 -->
<div class="translate-x-0">X轴平移 0</div>
<div class="translate-x-1">X轴平移 0.25rem</div>
<div class="translate-x-2">X轴平移 0.5rem</div>
<div class="translate-x-3">X轴平移 0.75rem</div>
<div class="translate-x-4">X轴平移 1rem</div>
<div class="translate-x-5">X轴平移 1.25rem</div>
<div class="translate-x-6">X轴平移 1.5rem</div>
<div class="translate-x-8">X轴平移 2rem</div>
<div class="translate-x-10">X轴平移 2.5rem</div>
<div class="translate-x-12">X轴平移 3rem</div>
<div class="translate-x-16">X轴平移 4rem</div>
<div class="translate-x-20">X轴平移 5rem</div>
<div class="translate-x-24">X轴平移 6rem</div>
<div class="translate-x-32">X轴平移 8rem</div>
<div class="translate-x-40">X轴平移 10rem</div>
<div class="translate-x-48">X轴平移 12rem</div>
<div class="translate-x-56">X轴平移 14rem</div>
<div class="translate-x-64">X轴平移 16rem</div>

<!-- Y轴平移 -->
<div class="translate-y-0">Y轴平移 0</div>
<div class="translate-y-1">Y轴平移 0.25rem</div>
<div class="translate-y-2">Y轴平移 0.5rem</div>
<div class="translate-y-3">Y轴平移 0.75rem</div>
<div class="translate-y-4">Y轴平移 1rem</div>
<div class="translate-y-5">Y轴平移 1.25rem</div>
<div class="translate-y-6">Y轴平移 1.5rem</div>
<div class="translate-y-8">Y轴平移 2rem</div>
<div class="translate-y-10">Y轴平移 2.5rem</div>
<div class="translate-y-12">Y轴平移 3rem</div>
<div class="translate-y-16">Y轴平移 4rem</div>
<div class="translate-y-20">Y轴平移 5rem</div>
<div class="translate-y-24">Y轴平移 6rem</div>
<div class="translate-y-32">Y轴平移 8rem</div>
<div class="translate-y-40">Y轴平移 10rem</div>
<div class="translate-y-48">Y轴平移 12rem</div>
<div class="translate-y-56">Y轴平移 14rem</div>
<div class="translate-y-64">Y轴平移 16rem</div>

变换原点

origin-center

origin-top

origin-bottom

origin-left

<div class="origin-center">变换原点：中心</div>
<div class="origin-top">变换原点：顶部</div>
<div class="origin-top-right">变换原点：右上</div>
<div class="origin-right">变换原点：右侧</div>
<div class="origin-bottom-right">变换原点：右下</div>
<div class="origin-bottom">变换原点：底部</div>
<div class="origin-bottom-left">变换原点：左下</div>
<div class="origin-left">变换原点：左侧</div>
<div class="origin-top-left">变换原点：左上</div>

悬停状态 (Hover)

基础悬停效果

悬停阴影

<!-- 悬停背景色 -->
<button class="bg-blue-500 hover:bg-blue-600">悬停变色</button>

<!-- 悬停缩放 -->
<button class="hover:scale-105">悬停缩放</button>

<!-- 悬停阴影 -->
<div class="hover:shadow-lg">悬停阴影</div>

<!-- 悬停透明度 -->
<button class="hover:opacity-75">悬停透明度</button>

<!-- 悬停旋转 -->
<button class="hover:rotate-12">悬停旋转</button>

<!-- 悬停平移 -->
<button class="hover:translate-y-1">悬停上移</button>

<!-- 悬停边框 -->
<button class="hover:border-2">悬停边框</button>

<!-- 悬停文字颜色 -->
<button class="hover:text-blue-500">悬停文字变色</button>

聚焦状态 (Focus)

聚焦复选框

<!-- 输入框聚焦 -->
<input class="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">

<!-- 按钮聚焦 -->
<button class="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">按钮</button>

<!-- 聚焦背景色 -->
<button class="focus:bg-blue-600">聚焦背景色</button>

<!-- 聚焦缩放 -->
<button class="focus:scale-105">聚焦缩放</button>

<!-- 聚焦阴影 -->
<button class="focus:shadow-lg">聚焦阴影</button>

<!-- 聚焦边框 -->
<button class="focus:border-2 focus:border-blue-500">聚焦边框</button>

<!-- 聚焦透明度 -->
<button class="focus:opacity-75">聚焦透明度</button>

<!-- 聚焦可见性 -->
<div class="focus:visible">聚焦可见</div>
<div class="focus:invisible">聚焦不可见</div>

激活与禁用状态

激活状态 (Active)

<!-- 激活背景色 -->
<button class="active:bg-blue-700">激活背景色</button>

<!-- 激活缩放 -->
<button class="active:scale-95">激活缩放</button>

<!-- 激活阴影 -->
<button class="active:shadow-inner">激活内阴影</button>

<!-- 激活透明度 -->
<button class="active:opacity-50">激活透明度</button>

<!-- 激活旋转 -->
<button class="active:rotate-12">激活旋转</button>

<!-- 激活边框 -->
<button class="active:border-2 active:border-blue-500">激活边框</button>

<!-- 激活文字颜色 -->
<button class="active:text-white">激活文字颜色</button>

<!-- 激活变换 -->
<button class="active:translate-y-1">激活平移</button>

禁用状态 (Disabled)

禁用单选框

<!-- 禁用按钮 -->
<button disabled class="disabled:bg-gray-500 disabled:cursor-not-allowed disabled:opacity-50">
  禁用按钮
</button>

<!-- 禁用输入框 -->
<input disabled class="disabled:opacity-75 disabled:cursor-not-allowed">

<!-- 禁用背景色 -->
<button disabled class="disabled:bg-gray-300">禁用背景色</button>

<!-- 禁用文字颜色 -->
<button disabled class="disabled:text-gray-400">禁用文字颜色</button>

<!-- 禁用边框 -->
<button disabled class="disabled:border-gray-300">禁用边框</button>

<!-- 禁用阴影 -->
<button disabled class="disabled:shadow-none">禁用阴影</button>

<!-- 禁用指针事件 -->
<button disabled class="disabled:pointer-events-none">禁用指针事件</button>

<!-- 禁用选择 -->
<div class="disabled:select-none">禁用选择</div>

组状态 (Group States)

组悬停 (Group Hover)

组标题

悬停整个组查看效果

显示的元素

组悬停文字变色

<div class="group">
  <!-- 组悬停背景色 -->
  <div class="group-hover:bg-blue-500">组悬停背景色</div>
  
  <!-- 组悬停文字颜色 -->
  <h3 class="group-hover:text-blue-400">组悬停文字颜色</h3>
  
  <!-- 组悬停显示隐藏 -->
  <div class="hidden group-hover:block">组悬停显示</div>
  
  <!-- 组悬停缩放 -->
  <div class="group-hover:scale-110">组悬停缩放</div>
  
  <!-- 组悬停透明度 -->
  <div class="opacity-0 group-hover:opacity-100">组悬停透明度</div>
  
  <!-- 组悬停阴影 -->
  <div class="group-hover:shadow-lg">组悬停阴影</div>
  
  <!-- 组悬停边框 -->
  <div class="group-hover:border-2 group-hover:border-blue-500">组悬停边框</div>
  
  <!-- 组悬停旋转 -->
  <div class="group-hover:rotate-12">组悬停旋转</div>
</div>

组聚焦 (Group Focus)

聚焦时文字变色

<div class="group">
  <!-- 组聚焦背景色 -->
  <div class="group-focus:bg-blue-500">组聚焦背景色</div>
  
  <!-- 组聚焦文字颜色 -->
  <h3 class="group-focus:text-blue-400">组聚焦文字颜色</h3>
  
  <!-- 组聚焦显示隐藏 -->
  <div class="hidden group-focus:block">组聚焦显示</div>
  
  <!-- 组聚焦阴影 -->
  <div class="group-focus:shadow-lg">组聚焦阴影</div>
  
  <!-- 组聚焦边框 -->
  <div class="group-focus:border-2 group-focus:border-blue-500">组聚焦边框</div>
</div>

<!-- Focus within -->
<div class="group">
  <div class="group-focus-within:bg-blue-500">Focus within 背景色</div>
  <h3 class="group-focus-within:text-blue-400">Focus within 文字颜色</h3>
</div>

响应式与特殊状态

响应式状态

响应式背景色

第一个元素

第二个元素

第三个元素

最后一个元素

<!-- 响应式状态 -->
<div class="sm:bg-blue-500 md:bg-green-500 lg:bg-yellow-500 xl:bg-red-500">
  响应式背景色
</div>

<!-- 第一个元素 -->
<div class="first:bg-blue-500 first:text-white">第一个元素</div>

<!-- 最后一个元素 -->
<div class="last:bg-green-500 last:text-white">最后一个元素</div>

<!-- 奇数偶数 -->
<div class="odd:bg-gray-100 even:bg-gray-200">奇数偶数背景</div>

<!-- 第n个元素 -->
<div class="nth-child(3):bg-blue-500">第三个元素</div>

<!-- 响应式悬停 -->
<button class="hover:bg-blue-500 lg:hover:bg-green-500">响应式悬停</button>

<!-- 响应式聚焦 -->
<input class="focus:ring-2 md:focus:ring-4">

表单状态

选中状态

<!-- 有效状态 -->
<input class="valid:border-green-500 valid:bg-green-50">

<!-- 无效状态 -->
<input class="invalid:border-red-500 invalid:bg-red-50">

<!-- 必填状态 -->
<input required class="required:border-yellow-500">

<!-- 只读状态 -->
<input readonly class="readonly:bg-gray-100">

<!-- 选中状态 -->
<input type="checkbox" checked class="checked:bg-blue-500">

<!-- 范围滑块样式 -->
<input type="range" class="accent-blue-500">

<!-- 占位符样式 -->
<input class="placeholder-gray-400 placeholder-opacity-50">

<!-- 文件输入 -->
<input type="file" class="file:bg-blue-500 file:text-white file:border-0">

<!-- 自动填充 -->
<input class="autofill:bg-yellow-100">

Flex 容器

基础 Flex 容器

1

2

3

使用 flex 创建弹性容器

<!-- 基础 Flex 容器 -->
<div class="flex">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- 内联 Flex -->
<div class="inline-flex">
  <div>内联 Flex</div>
</div>

<!-- 响应式 Flex -->
<div class="flex md:inline-flex">
  <div>响应式 Flex</div>
</div>

Flex 方向

row

reverse

row

column

reverse

column

<!-- 行方向 (默认) -->
<div class="flex flex-row">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 行方向反转 -->
<div class="flex flex-row-reverse">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 列方向 -->
<div class="flex flex-col">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 列方向反转 -->
<div class="flex flex-col-reverse">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 响应式方向 -->
<div class="flex flex-col md:flex-row">
  <div>移动端列，桌面端行</div>
</div>

主轴对齐 (Justify Content)

主轴对齐方式

start

center

end

between

around

evenly

<!-- 起始对齐 -->
<div class="flex justify-start">
  <div>项目</div>
</div>

<!-- 居中对齐 -->
<div class="flex justify-center">
  <div>项目</div>
</div>

<!-- 末尾对齐 -->
<div class="flex justify-end">
  <div>项目</div>
</div>

<!-- 两端对齐 -->
<div class="flex justify-between">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 周围对齐 -->
<div class="flex justify-around">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 均匀对齐 -->
<div class="flex justify-evenly">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 响应式对齐 -->
<div class="flex justify-start md:justify-center">
  <div>响应式对齐</div>
</div>

交叉轴对齐 (Align Items)

stretch

start

center

end

baseline

<!-- 拉伸对齐 (默认) -->
<div class="flex items-stretch">
  <div>项目</div>
</div>

<!-- 起始对齐 -->
<div class="flex items-start">
  <div>项目</div>
</div>

<!-- 居中对齐 -->
<div class="flex items-center">
  <div>项目</div>
</div>

<!-- 末尾对齐 -->
<div class="flex items-end">
  <div>项目</div>
</div>

<!-- 基线对齐 -->
<div class="flex items-baseline">
  <div class="text-2xl">大文字</div>
  <div>小文字</div>
</div>

<!-- 响应式对齐 -->
<div class="flex items-start md:items-center">
  <div>响应式对齐</div>
</div>

Flex 换行与多行对齐

Flex 换行

不换行

换行

反转换行

<!-- 不换行 (默认) -->
<div class="flex flex-nowrap">
  <div class="w-32">项目</div>
  <div class="w-32">项目</div>
</div>

<!-- 换行 -->
<div class="flex flex-wrap">
  <div class="w-32">项目</div>
  <div class="w-32">项目</div>
</div>

<!-- 反转换行 -->
<div class="flex flex-wrap-reverse">
  <div class="w-32">项目</div>
  <div class="w-32">项目</div>
</div>

<!-- 响应式换行 -->
<div class="flex flex-nowrap md:flex-wrap">
  <div class="w-32">响应式换行</div>
</div>

多行对齐 (Align Content)

start

center

between

<!-- 多行起始对齐 -->
<div class="flex flex-wrap content-start">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 多行居中对齐 -->
<div class="flex flex-wrap content-center">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 多行末尾对齐 -->
<div class="flex flex-wrap content-end">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 多行两端对齐 -->
<div class="flex flex-wrap content-between">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 多行周围对齐 -->
<div class="flex flex-wrap content-around">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 多行均匀对齐 -->
<div class="flex flex-wrap content-evenly">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

Flex 项目属性

Flex 伸缩

grow

固定

不收缩

可收缩

flex-1

auto

initial

none

<!-- 扩展项目 -->
<div class="flex">
  <div class="flex-grow">扩展填满空间</div>
  <div>固定宽度</div>
</div>

<!-- 禁止收缩 -->
<div class="flex">
  <div class="flex-shrink-0 w-32">不收缩</div>
  <div>可收缩</div>
</div>

<!-- Flex 简写 -->
<div class="flex">
  <div class="flex-1">flex: 1 1 0%</div>
  <div class="flex-1">flex: 1 1 0%</div>
</div>

<div class="flex">
  <div class="flex-auto">flex: 1 1 auto</div>
  <div class="flex-auto">flex: 1 1 auto</div>
</div>

<div class="flex">
  <div class="flex-initial">flex: 0 1 auto</div>
  <div class="flex-initial">flex: 0 1 auto</div>
</div>

<div class="flex">
  <div class="flex-none">flex: none</div>
  <div class="flex-none">flex: none</div>
</div>

项目排序与对齐

最后

第一

第二

start

center

end

stretch

auto

baseline

<!-- 项目排序 -->
<div class="flex">
  <div class="order-last">最后</div>
  <div class="order-first">第一</div>
  <div class="order-2">第二</div>
</div>

<!-- 具体排序 -->
<div class="flex">
  <div class="order-1">1</div>
  <div class="order-2">2</div>
  <div class="order-3">3</div>
  <div class="order-4">4</div>
  <div class="order-5">5</div>
  <div class="order-6">6</div>
  <div class="order-7">7</div>
  <div class="order-8">8</div>
  <div class="order-9">9</div>
  <div class="order-10">10</div>
  <div class="order-11">11</div>
  <div class="order-12">12</div>
</div>

<!-- 项目自对齐 -->
<div class="flex items-start">
  <div class="self-start">起始对齐</div>
  <div class="self-center">居中对齐</div>
  <div class="self-end">末尾对齐</div>
  <div class="self-stretch">拉伸对齐</div>
  <div class="self-auto">自动对齐</div>
  <div class="self-baseline">基线对齐</div>
</div>

<!-- 响应式排序 -->
<div class="flex">
  <div class="order-first md:order-last">响应式排序</div>
</div>

实用 Flexbox 示例

导航栏布局

Logo

<!-- 导航栏布局 -->
<div class="flex items-center justify-between p-4">
  <!-- Logo -->
  <div class="text-xl font-bold">Logo</div>
  
  <!-- 导航菜单 -->
  <nav class="flex space-x-4">
    <a href="#" class="hover:text-blue-400">首页</a>
    <a href="#" class="hover:text-blue-400">关于</a>
    <a href="#" class="hover:text-blue-400">联系</a>
  </nav>
  
  <!-- 操作按钮 -->
  <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
    登录
  </button>
</div>

<!-- 响应式导航 -->
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
  <div>Logo</div>
  <nav class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4">
    <a href="#">链接</a>
  </nav>
</div>

卡片网格布局

卡片 1

灵活宽度的卡片

卡片 2

灵活宽度的卡片

卡片 3

灵活宽度的卡片

<!-- 卡片网格布局 -->
<div class="flex flex-wrap gap-4">
  <div class="flex-1 min-w-[200px] bg-gray-100 p-4 rounded">
    <h3 class="font-semibold">卡片标题</h3>
    <p>卡片内容</p>
  </div>
  <div class="flex-1 min-w-[200px] bg-gray-100 p-4 rounded">
    <h3 class="font-semibold">卡片标题</h3>
    <p>卡片内容</p>
  </div>
  <div class="flex-1 min-w-[200px] bg-gray-100 p-4 rounded">
    <h3 class="font-semibold">卡片标题</h3>
    <p>卡片内容</p>
  </div>
</div>

<!-- 等宽卡片 -->
<div class="flex">
  <div class="flex-1 p-4">等宽卡片 1</div>
  <div class="flex-1 p-4">等宽卡片 2</div>
  <div class="flex-1 p-4">等宽卡片 3</div>
</div>

<!-- 固定+灵活宽度 -->
<div class="flex">
  <div class="w-64 p-4">固定宽度</div>
  <div class="flex-1 p-4">灵活宽度</div>
</div>

Grid 容器

基础 Grid 容器

1

2

3

4

5

6

使用 grid grid-cols-3 gap-4 创建3列网格

<!-- 基础 Grid 容器 -->
<div class="grid grid-cols-3 gap-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- 内联 Grid -->
<div class="inline-grid grid-cols-2 gap-2">
  <div>内联 Grid</div>
</div>

<!-- 响应式 Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>响应式 Grid</div>
</div>

网格列数

1 列

2 列

3 列

4

<!-- 固定列数 -->
<div class="grid grid-cols-1">1 列</div>
<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-5">5 列</div>
<div class="grid grid-cols-6">6 列</div>
<div class="grid grid-cols-7">7 列</div>
<div class="grid grid-cols-8">8 列</div>
<div class="grid grid-cols-9">9 列</div>
<div class="grid grid-cols-10">10 列</div>
<div class="grid grid-cols-11">11 列</div>
<div class="grid grid-cols-12">12 列</div>

<!-- 无列 -->
<div class="grid grid-cols-none">无列</div>

<!-- 子网格 -->
<div class="grid grid-cols-subgrid">子网格</div>

<!-- 响应式列数 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
  <div>响应式列数</div>
</div>

网格行数

第 1 行

第 2 行

第 1 行

第 2 行

第 3 行

1

2

3

4

<!-- 固定行数 -->
<div class="grid grid-rows-1">1 行</div>
<div class="grid grid-rows-2">2 行</div>
<div class="grid grid-rows-3">3 行</div>
<div class="grid grid-rows-4">4 行</div>
<div class="grid grid-rows-5">5 行</div>
<div class="grid grid-rows-6">6 行</div>

<!-- 无行 -->
<div class="grid grid-rows-none">无行</div>

<!-- 子网格 -->
<div class="grid grid-rows-subgrid">子网格</div>

<!-- 响应式行数 -->
<div class="grid grid-rows-1 md:grid-rows-2 lg:grid-rows-3">
  <div>响应式行数</div>
</div>

<!-- 行列组合 -->
<div class="grid grid-cols-3 grid-rows-2 gap-4">
  <div>项目</div>
  <div>项目</div>
  <div>项目</div>
  <div>项目</div>
  <div>项目</div>
  <div>项目</div>
</div>

自动网格

自动行高

自定义高度

自动列宽

内容宽度

自动列宽

等宽

<!-- 自动行高 -->
<div class="grid auto-rows-auto">自动行高</div>
<div class="grid auto-rows-min">最小行高</div>
<div class="grid auto-rows-max">最大行高</div>
<div class="grid auto-rows-fr">分数单位行高</div>

<!-- 自动列宽 -->
<div class="grid auto-cols-auto">自动列宽</div>
<div class="grid auto-cols-min">最小列宽</div>
<div class="grid auto-cols-max">最大列宽</div>
<div class="grid auto-cols-fr">分数单位列宽</div>

<!-- 网格流方向 -->
<div class="grid grid-flow-row">行方向流动</div>
<div class="grid grid-flow-col">列方向流动</div>
<div class="grid grid-flow-row-dense">密集行流动</div>
<div class="grid grid-flow-col-dense">密集列流动</div>

<!-- 自动填充 -->
<div class="grid grid-cols-1 auto-rows-min gap-4">
  <div>自动行</div>
</div>

网格间距

间距大小

gap-0

gap-2

gap-4

gap-8

<!-- 行和列间距 -->
<div class="grid gap-0">无间距</div>
<div class="grid gap-1">0.25rem 间距</div>
<div class="grid gap-2">0.5rem 间距</div>
<div class="grid gap-3">0.75rem 间距</div>
<div class="grid gap-4">1rem 间距</div>
<div class="grid gap-5">1.25rem 间距</div>
<div class="grid gap-6">1.5rem 间距</div>
<div class="grid gap-7">1.75rem 间距</div>
<div class="grid gap-8">2rem 间距</div>
<div class="grid gap-9">2.25rem 间距</div>
<div class="grid gap-10">2.5rem 间距</div>
<div class="grid gap-11">2.75rem 间距</div>
<div class="grid gap-12">3rem 间距</div>
<div class="grid gap-14">3.5rem 间距</div>
<div class="grid gap-16">4rem 间距</div>
<div class="grid gap-20">5rem 间距</div>
<div class="grid gap-24">6rem 间距</div>
<div class="grid gap-28">7rem 间距</div>
<div class="grid gap-32">8rem 间距</div>
<div class="grid gap-36">9rem 间距</div>
<div class="grid gap-40">10rem 间距</div>
<div class="grid gap-44">11rem 间距</div>
<div class="grid gap-48">12rem 间距</div>
<div class="grid gap-52">13rem 间距</div>
<div class="grid gap-56">14rem 间距</div>
<div class="grid gap-60">15rem 间距</div>
<div class="grid gap-64">16rem 间距</div>
<div class="grid gap-72">18rem 间距</div>
<div class="grid gap-80">20rem 间距</div>
<div class="grid gap-96">24rem 间距</div>

<!-- 响应式间距 -->
<div class="grid gap-2 md:gap-4 lg:gap-8">
  <div>响应式间距</div>
</div>

行列间距

gap-x-4

gap-y-2

gap-x-2

gap-y-8

<!-- 列间距 -->
<div class="grid gap-x-0">无列间距</div>
<div class="grid gap-x-1">0.25rem 列间距</div>
<div class="grid gap-x-2">0.5rem 列间距</div>
<div class="grid gap-x-3">0.75rem 列间距</div>
<div class="grid gap-x-4">1rem 列间距</div>
<div class="grid gap-x-5">1.25rem 列间距</div>
<div class="grid gap-x-6">1.5rem 列间距</div>
<div class="grid gap-x-8">2rem 列间距</div>
<div class="grid gap-x-10">2.5rem 列间距</div>
<div class="grid gap-x-12">3rem 列间距</div>

<!-- 行间距 -->
<div class="grid gap-y-0">无行间距</div>
<div class="grid gap-y-1">0.25rem 行间距</div>
<div class="grid gap-y-2">0.5rem 行间距</div>
<div class="grid gap-y-3">0.75rem 行间距</div>
<div class="grid gap-y-4">1rem 行间距</div>
<div class="grid gap-y-5">1.25rem 行间距</div>
<div class="grid gap-y-6">1.5rem 行间距</div>
<div class="grid gap-y-8">2rem 行间距</div>
<div class="grid gap-y-10">2.5rem 行间距</div>
<div class="grid gap-y-12">3rem 行间距</div>

<!-- 行列组合间距 -->
<div class="grid gap-x-4 gap-y-2">
  <div>4px 列间距，2px 行间距</div>
</div>

<!-- 响应式行列间距 -->
<div class="grid gap-x-2 md:gap-x-4 gap-y-4 md:gap-y-8">
  <div>响应式间距</div>
</div>

网格项目定位

列定位

col-span-2

正常

col-span-3

col-start-2

col-end-5

col-start-1 col-end-3

<!-- 列跨度 -->
<div class="col-span-1">跨越 1 列</div>
<div class="col-span-2">跨越 2 列</div>
<div class="col-span-3">跨越 3 列</div>
<div class="col-span-4">跨越 4 列</div>
<div class="col-span-5">跨越 5 列</div>
<div class="col-span-6">跨越 6 列</div>
<div class="col-span-7">跨越 7 列</div>
<div class="col-span-8">跨越 8 列</div>
<div class="col-span-9">跨越 9 列</div>
<div class="col-span-10">跨越 10 列</div>
<div class="col-span-11">跨越 11 列</div>
<div class="col-span-12">跨越 12 列</div>
<div class="col-span-full">跨越所有列</div>
<div class="col-span-auto">自动跨度</div>

<!-- 列起始位置 -->
<div class="col-start-1">从第 1 列开始</div>
<div class="col-start-2">从第 2 列开始</div>
<div class="col-start-3">从第 3 列开始</div>
<div class="col-start-4">从第 4 列开始</div>
<div class="col-start-5">从第 5 列开始</div>
<div class="col-start-6">从第 6 列开始</div>
<div class="col-start-7">从第 7 列开始</div>
<div class="col-start-8">从第 8 列开始</div>
<div class="col-start-9">从第 9 列开始</div>
<div class="col-start-10">从第 10 列开始</div>
<div class="col-start-11">从第 11 列开始</div>
<div class="col-start-12">从第 12 列开始</div>
<div class="col-start-13">从第 13 列开始</div>
<div class="col-start-auto">自动起始</div>

<!-- 列结束位置 -->
<div class="col-end-1">到第 1 列结束</div>
<div class="col-end-2">到第 2 列结束</div>
<div class="col-end-3">到第 3 列结束</div>
<div class="col-end-4">到第 4 列结束</div>
<div class="col-end-5">到第 5 列结束</div>
<div class="col-end-6">到第 6 列结束</div>
<div class="col-end-7">到第 7 列结束</div>
<div class="col-end-8">到第 8 列结束</div>
<div class="col-end-9">到第 9 列结束</div>
<div class="col-end-10">到第 10 列结束</div>
<div class="col-end-11">到第 11 列结束</div>
<div class="col-end-12">到第 12 列结束</div>
<div class="col-end-13">到第 13 列结束</div>
<div class="col-end-auto">自动结束</div>

<!-- 响应式列定位 -->
<div class="col-span-1 md:col-span-2 lg:col-span-3">
  <div>响应式列跨度</div>
</div>

行定位

row-span-2

正常

row-start-2

row-end-4

row-start-1 row-end-3

<!-- 行跨度 -->
<div class="row-span-1">跨越 1 行</div>
<div class="row-span-2">跨越 2 行</div>
<div class="row-span-3">跨越 3 行</div>
<div class="row-span-4">跨越 4 行</div>
<div class="row-span-5">跨越 5 行</div>
<div class="row-span-6">跨越 6 行</div>
<div class="row-span-full">跨越所有行</div>
<div class="row-span-auto">自动跨度</div>

<!-- 行起始位置 -->
<div class="row-start-1">从第 1 行开始</div>
<div class="row-start-2">从第 2 行开始</div>
<div class="row-start-3">从第 3 行开始</div>
<div class="row-start-4">从第 4 行开始</div>
<div class="row-start-5">从第 5 行开始</div>
<div class="row-start-6">从第 6 行开始</div>
<div class="row-start-7">从第 7 行开始</div>
<div class="row-start-auto">自动起始</div>

<!-- 行结束位置 -->
<div class="row-end-1">到第 1 行结束</div>
<div class="row-end-2">到第 2 行结束</div>
<div class="row-end-3">到第 3 行结束</div>
<div class="row-end-4">到第 4 行结束</div>
<div class="row-end-5">到第 5 行结束</div>
<div class="row-end-6">到第 6 行结束</div>
<div class="row-end-7">到第 7 行结束</div>
<div class="row-end-auto">自动结束</div>

<!-- 响应式行定位 -->
<div class="row-span-1 md:row-span-2 lg:row-span-3">
  <div>响应式行跨度</div>
</div>

<!-- 行列组合定位 -->
<div class="col-span-2 row-span-2">
  <div>跨越 2 列 2 行</div>
</div>

实用 Grid 示例

仪表板布局

侧边栏

头部

主内容

侧边

<!-- 仪表板布局 -->
<div class="grid grid-cols-4 grid-rows-3 gap-4 h-screen">
  <!-- 侧边栏 -->
  <div class="col-span-1 row-span-3 bg-gray-800 p-4">
    侧边栏
  </div>
  
  <!-- 头部 -->
  <header class="col-span-3 bg-white p-4">
    头部导航
  </header>
  
  <!-- 主内容 -->
  <main class="col-span-2 row-span-2 bg-gray-100 p-4">
    主内容区域
  </main>
  
  <!-- 侧边栏 -->
  <aside class="col-span-1 row-span-2 bg-white p-4">
    侧边栏内容
  </aside>
</div>

<!-- 响应式仪表板 -->
<div class="grid grid-cols-1 md:grid-cols-4 md:grid-rows-3 gap-4">
  <div class="md:col-span-1 md:row-span-3">移动端全宽，桌面端侧边栏</div>
  <div class="md:col-span-3">头部</div>
  <div class="md:col-span-2 md:row-span-2">主内容</div>
  <div class="md:col-span-1 md:row-span-2">侧边</div>
</div>

图片网格布局

大图

小图

<!-- 图片网格布局 -->
<div class="grid grid-cols-3 gap-4">
  <!-- 大图 -->
  <div class="col-span-2 row-span-2">
    <img src="large-image.jpg" alt="大图" class="w-full h-full object-cover rounded">
  </div>
  
  <!-- 小图 -->
  <div>
    <img src="small-image-1.jpg" alt="小图1" class="w-full h-32 object-cover rounded">
  </div>
  <div>
    <img src="small-image-2.jpg" alt="小图2" class="w-full h-32 object-cover rounded">
  </div>
  <div>
    <img src="small-image-3.jpg" alt="小图3" class="w-full h-32 object-cover rounded">
  </div>
  <div>
    <img src="small-image-4.jpg" alt="小图4" class="w-full h-32 object-cover rounded">
  </div>
</div>

<!-- 响应式图片网格 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <div class="sm:col-span-2 lg:col-span-3 xl:col-span-2">
    <img src="image.jpg" alt="图片" class="w-full h-48 object-cover rounded">
  </div>
  <div>
    <img src="image.jpg" alt="图片" class="w-full h-48 object-cover rounded">
  </div>
  <div>
    <img src="image.jpg" alt="图片" class="w-full h-48 object-cover rounded">
  </div>
</div>

<!-- Masonry 布局 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="row-span-2">
    <img src="tall-image.jpg" alt="长图" class="w-full h-64 object-cover rounded">
  </div>
  <div>
    <img src="image.jpg" alt="图片" class="w-full h-32 object-cover rounded">
  </div>
  <div class="row-span-3">
    <img src="very-tall-image.jpg" alt="很长图" class="w-full h-96 object-cover rounded">
  </div>
</div>

基础按钮

颜色按钮

<!-- 基础颜色按钮 -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  蓝色按钮
</button>

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

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

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

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

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

<button class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded">
  靛蓝色按钮
</button>

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

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

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

尺寸按钮

<!-- 尺寸按钮 -->
<button class="px-2 py-1 text-xs">超小按钮</button>
<button class="px-3 py-1 text-sm">小按钮</button>
<button class="px-4 py-2">中按钮</button>
<button class="px-6 py-3 text-lg">大按钮</button>
<button class="px-8 py-4 text-xl">超大按钮</button>

<!-- 圆形图标按钮 -->
<button class="w-8 h-8 rounded-full flex items-center justify-center">
  <i class="fas fa-plus text-xs"></i>
</button>

<button class="w-12 h-12 rounded-full flex items-center justify-center">
  <i class="fas fa-plus"></i>
</button>

<button class="w-16 h-16 rounded-full flex items-center justify-center">
  <i class="fas fa-plus text-xl"></i>
</button>

<!-- 全宽按钮 -->
<button class="w-full px-4 py-2">全宽按钮</button>

<!-- 最小宽度按钮 -->
<button class="min-w-32 px-4 py-2">最小宽度按钮</button>

<!-- 最大宽度按钮 -->
<button class="max-w-64 px-4 py-2">最大宽度按钮</button>

样式变体

轮廓按钮

<!-- 轮廓按钮 -->
<button class="border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white px-4 py-2 rounded">
  蓝色轮廓
</button>

<button class="border border-green-500 text-green-500 hover:bg-green-500 hover:text-white px-4 py-2 rounded">
  绿色轮廓
</button>

<button class="border border-red-500 text-red-500 hover:bg-red-500 hover:text-white px-4 py-2 rounded">
  红色轮廓
</button>

<button class="border border-yellow-500 text-yellow-500 hover:bg-yellow-500 hover:text-white px-4 py-2 rounded">
  黄色轮廓
</button>

<button class="border border-purple-500 text-purple-500 hover:bg-purple-500 hover:text-white px-4 py-2 rounded">
  紫色轮廓
</button>

<button class="border border-gray-500 text-gray-500 hover:bg-gray-500 hover:text-white px-4 py-2 rounded">
  灰色轮廓
</button>

<!-- 边框粗细 -->
<button class="border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white px-4 py-2 rounded">
  2px 边框
</button>

<button class="border-4 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white px-4 py-2 rounded">
  4px 边框
</button>

<!-- 虚线轮廓 -->
<button class="border border-dashed border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white px-4 py-2 rounded">
  虚线轮廓
</button>

幽灵按钮

<!-- 幽灵按钮 -->
<button class="bg-transparent hover:bg-blue-500 text-blue-500 hover:text-white px-4 py-2 rounded">
  蓝色幽灵
</button>

<button class="bg-transparent hover:bg-green-500 text-green-500 hover:text-white px-4 py-2 rounded">
  绿色幽灵
</button>

<button class="bg-transparent hover:bg-red-500 text-red-500 hover:text-white px-4 py-2 rounded">
  红色幽灵
</button>

<button class="bg-transparent hover:bg-purple-500 text-purple-500 hover:text-white px-4 py-2 rounded">
  紫色幽灵
</button>

<button class="bg-transparent hover:bg-gray-500 text-gray-500 hover:text-white px-4 py-2 rounded">
  灰色幽灵
</button>

<!-- 透明背景按钮 -->
<button class="bg-blue-500 bg-opacity-10 hover:bg-opacity-20 text-blue-500 px-4 py-2 rounded">
  透明蓝色
</button>

<button class="bg-green-500 bg-opacity-10 hover:bg-opacity-20 text-green-500 px-4 py-2 rounded">
  透明绿色
</button>

<button class="bg-red-500 bg-opacity-10 hover:bg-opacity-20 text-red-500 px-4 py-2 rounded">
  透明红色
</button>

<!-- 完全透明 -->
<button class="bg-transparent hover:bg-blue-500 hover:bg-opacity-10 text-blue-500 px-4 py-2 rounded">
  悬停透明
</button>

特殊效果

渐变按钮

<!-- 线性渐变按钮 -->
<button class="bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white px-4 py-2 rounded">
  蓝紫渐变
</button>

<button class="bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 text-white px-4 py-2 rounded">
  绿蓝渐变
</button>

<button class="bg-gradient-to-r from-yellow-400 to-red-500 hover:from-yellow-500 hover:to-red-600 text-white px-4 py-2 rounded">
  黄红渐变
</button>

<button class="bg-gradient-to-r from-pink-500 to-red-500 hover:from-pink-600 hover:to-red-600 text-white px-4 py-2 rounded">
  粉红渐变
</button>

<button class="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white px-4 py-2 rounded">
  紫粉渐变
</button>

<!-- 角向渐变 -->
<button class="bg-gradient-to-br from-blue-400 to-purple-600 text-white px-4 py-2 rounded-lg">
  右下角渐变
</button>

<button class="bg-gradient-to-tr from-green-400 to-teal-600 text-white px-4 py-2 rounded-lg">
  右上角渐变
</button>

<button class="bg-gradient-to-bl from-yellow-400 to-orange-600 text-white px-4 py-2 rounded-lg">
  左下角渐变
</button>

<button class="bg-gradient-to-tl from-red-400 to-pink-600 text-white px-4 py-2 rounded-lg">
  左上角渐变
</button>

<!-- 三色渐变 -->
<button class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white px-4 py-2 rounded">
  三色渐变
</button>

阴影与光泽

<!-- 阴影按钮 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded shadow hover:shadow-lg">
  悬停阴影
</button>

<button class="bg-green-500 text-white px-4 py-2 rounded shadow-lg hover:shadow-xl">
  大阴影
</button>

<button class="bg-red-500 text-white px-4 py-2 rounded shadow-xl hover:shadow-2xl">
  超大阴影
</button>

<button class="bg-blue-500 text-white px-4 py-2 rounded shadow-none">
  无阴影
</button>

<!-- 内阴影 -->
<button class="bg-gradient-to-b from-blue-400 to-blue-600 text-white px-4 py-2 rounded-lg shadow-inner">
  内阴影
</button>

<!-- 彩色阴影 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded shadow-lg shadow-blue-500/50">
  蓝色阴影
</button>

<button class="bg-red-500 text-white px-4 py-2 rounded shadow-lg shadow-red-500/50">
  红色阴影
</button>

<!-- 环状边框 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg ring-2 ring-blue-300">
  环状边框
</button>

<button class="bg-blue-500 text-white px-4 py-2 rounded-lg ring-4 ring-blue-300 ring-opacity-50">
  透明环状
</button>

<!-- 毛玻璃效果 -->
<button class="bg-white text-blue-500 px-4 py-2 rounded-lg backdrop-blur-sm bg-opacity-20 border border-white border-opacity-30">
  毛玻璃按钮
</button>

图标按钮

带图标按钮

<!-- 带图标文字按钮 -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded flex items-center gap-2">
  <i class="fas fa-download"></i>
  下载
</button>

<button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded flex items-center gap-2">
  <i class="fas fa-save"></i>
  保存
</button>

<button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded flex items-center gap-2">
  <i class="fas fa-trash"></i>
  删除
</button>

<button class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded flex items-center gap-2">
  <i class="fas fa-share"></i>
  分享
</button>

<!-- 轮廓图标按钮 -->
<button class="border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white px-4 py-2 rounded flex items-center gap-2">
  <i class="fas fa-edit"></i>
  编辑
</button>

<button class="border border-green-500 text-green-500 hover:bg-green-500 hover:text-white px-4 py-2 rounded flex items-center gap-2">
  <i class="fas fa-check"></i>
  确认
</button>

<button class="border border-red-500 text-red-500 hover:bg-red-500 hover:text-white px-4 py-2 rounded flex items-center gap-2">
  <i class="fas fa-times"></i>
  取消
</button>
/code>