《2025 前端必学：Tailwind CSS 核心语法篇，从基础写法到高级技巧，一篇搞定所有样式编写逻辑》

1. 布局

1.1 基础布局属性

1.1.1 aspect-ratio（宽高比）

类名说明CSS 等效
aspect-video16:9 的宽高比（适合视频）aspect-ratio: 16 / 9;
aspect-square1:1 的宽高比（正方形）aspect-ratio: 1 / 1;
aspect-[4/3]任意比例（此例为 4:3）aspect-ratio: 4 / 3;

1.1.2 columns（分栏布局）

类名说明CSS 等效
columns-1 到 columns-12指定列数columns: 1; 到 columns: 12;
columns-xs、columns-sm 等指定列宽（尺寸）columns: 20rem; 等
gap-x-{size}控制列间距column-gap: {size};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <!-- 三列布局，列宽相等，间距为8 -->
    <div class="columns-3 gap-x-8">
      <img class="aspect-video" src="https://placehold.co/600x400" />
      <img class="aspect-square" src="https://placehold.co/400x400" />
      <img class="aspect-square" src="https://placehold.co/400x400" />
    </div>
  </body>
</html>

1.1.3 display（显示方式）

类名说明CSS 等效
inline内联元素display: inline;
inline-block内联块元素display: inline-block;
block块级元素display: block;
flex弹性布局容器display: flex;
inline-flex内联弹性布局容器display: inline-flex;
grid网格布局容器display: grid;
inline-grid内联网格布局容器display: inline-grid;
flow-root块级格式化上下文display: flow-root;
contents内容显示display: contents;
hidden不显示元素display: none;
table、table-cell 等表格相关显示模式display: table; 等
1
2
3
4
5
6
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex justify-between">
  <div class="bg-red-500">项目1</div>
  <div class="bg-blue-500">项目2</div>
  <div class="bg-green-500">项目3</div>
</div>

1.2 Flexbox 布局

1.2.1 flex-basis（初始大小）

类名说明CSS 等效
basis-0 到 basis-96使用间距比例flex-basis: 0rem; 到 flex-basis: 24rem;
basis-3xs 到 basis-7xl使用容器尺寸flex-basis: 14rem; 到 flex-basis: 80rem;
basis-1/2、basis-1/3 等使用分数flex-basis: 50%;、flex-basis: 33.333333%; 等
basis-[30vw]自定义值flex-basis: 30vw;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .box {
        background-color: #ff0000;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <!-- 中间的宽度是其他两倍 -->
    <div class="flex">
      <div class="box basis-1/3">项目1</div>
      <div class="box basis-2/3">项目2</div>
      <div class="box basis-1/3">项目3</div>
    </div>
  </body>
</html>

1.2.2 flex-direction（方向）

类名说明CSS 等效
flex-row水平方向，从左到右flex-direction: row;
flex-row-reverse水平方向，从右到左flex-direction: row-reverse;
flex-col垂直方向，从上到下flex-direction: column;
flex-col-reverse垂直方向，从下到上flex-direction: column-reverse;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .box {
        background-color: #ff0000;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <!-- 转换为反转列布局 -->
    <div class="flex flex-col-reverse">
      <div class="box">项目1</div>
      <div class="box">项目2</div>
      <div class="box">项目3</div>
    </div>
  </body>
</html>

1.2.3 flex-wrap（换行）

类名说明CSS 等效
flex-nowrap不换行，可能溢出flex-wrap: nowrap;
flex-wrap正常换行flex-wrap: wrap;
flex-wrap-reverse反向换行flex-wrap: wrap-reverse;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .box {
        background-color: #ff0000;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <!-- 默认是不换行的，如果想要换行，需要添加 flex-wrap -->
    <div class="flex flex-row flex-wrap">
      <div class="box basis-1/3">项目1</div>
      <div class="box basis-2/3">项目2</div>
      <div class="box basis-1/3">项目3</div>
    </div>
  </body>
</html>

1.2.4 flex-grow（扩展）

类名说明CSS 等效
grow允许扩展填充空间flex-grow: 1;
grow-0禁止扩展flex-grow: 0;
grow-[2]自定义扩展比例flex-grow: 2;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .box {
        background-color: #ff0000;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <div class="flex p-4">
      <div class="box grow-0 mr-2">不扩展 (grow-0)</div>
      <div class="box grow mr-2">自动扩展 (grow)</div>
      <div class="box grow-[2] mr-2">扩展系数为2 (grow-[2])</div>
    </div>
  </body>
</html>

1.2.5 flex-shrink（收缩）

类名说明CSS 等效
shrink允许收缩flex-shrink: 1;
shrink-0禁止收缩flex-shrink: 0;
shrink-[2]自定义收缩比例flex-shrink: 2;

1.2.6 flex（简写）

类名说明CSS 等效
flex-1可扩展、可收缩，初始大小 0flex: 1 1 0%;
flex-auto可扩展、可收缩，使用自身大小flex: 1 1 auto;
flex-initial不扩展、可收缩，使用自身大小flex: 0 1 auto;
flex-none不扩展、不收缩flex: none;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .box {
        background-color: #ff0000;
        padding: 10px;
        border: 1px solid #ccc;
        min-width: 0;
      }
    </style>
  </head>
  <body>
 <div class="container mx-auto p-6">
    <h1 class="text-2xl font-bold mb-6">Tailwind Flex 演示</h1>

    <!-- flex-1 演示：可扩展、可收缩，初始大小0 (flex: 1 1 0%) -->
    <div class="mb-8">
      <h2 class="text-xl font-semibold mb-2">flex-1: 可扩展、可收缩，初始大小0 (flex: 1 1 0%)</h2>
      <div class="flex border border-gray-300 p-2">
        <div class="flex-1 bg-blue-500 text-white p-4 m-1 text-center">flex-1</div>
        <div class="flex-1 bg-blue-500 text-white p-4 m-1 text-center">flex-1</div>
        <div class="flex-1 bg-blue-500 text-white p-4 m-1 text-center">flex-1</div>
      </div>
    </div>

    <!-- flex-auto 演示：可扩展、可收缩，使用自身大小 (flex: 1 1 auto) -->
    <div class="mb-8">
      <h2 class="text-xl font-semibold mb-2">flex-auto: 可扩展、可收缩，使用自身大小 (flex: 1 1 auto)</h2>
      <div class="flex border border-gray-300 p-2">
        <div class="flex-auto bg-green-500 text-white p-4 m-1 text-center">短内容</div>
        <div class="flex-auto bg-green-500 text-white p-4 m-1 text-center">较长的内容示例</div>
        <div class="flex-auto bg-green-500 text-white p-4 m-1 text-center">更长的内容示例文本</div>
      </div>
    </div>

    <!-- flex-initial 演示：不扩展、可收缩，使用自身大小 (flex: 0 1 auto) -->
    <div class="mb-8">
      <h2 class="text-xl font-semibold mb-2">flex-initial: 不扩展、可收缩，使用自身大小 (flex: 0 1 auto)</h2>
      <div class="flex border border-gray-300 p-2">
        <div class="flex-initial bg-yellow-500 text-white p-4 m-1 text-center">短内容</div>
        <div class="flex-initial bg-yellow-500 text-white p-4 m-1 text-center">较长的内容示例</div>
        <div class="flex-initial bg-yellow-500 text-white p-4 m-1 text-center">更长的内容示例文本</div>
      </div>
    </div>

    <!-- flex-none 演示：不扩展、不收缩，使用自身大小 (flex: 0 0 auto) -->
    <div class="mb-8">
      <h2 class="text-xl font-semibold mb-2">flex-none: 不扩展、不收缩，使用自身大小 (flex: 0 0 auto)</h2>
      <div class="flex border border-gray-300 p-2 overflow-x-auto">
        <div class="flex-none bg-red-500 text-white p-4 m-1 text-center w-64">固定宽度 flex-none</div>
        <div class="flex-none bg-red-500 text-white p-4 m-1 text-center w-64">固定宽度 flex-none</div>
        <div class="flex-none bg-red-500 text-white p-4 m-1 text-center w-64">固定宽度 flex-none</div>
        <div class="flex-none bg-red-500 text-white p-4 m-1 text-center w-64">固定宽度 flex-none</div>
      </div>
    </div>
  </div>
  </body>
</html>

1.2.7 order（顺序）

类名说明CSS 等效
order-1 到 order-12指定显示顺序order: 1; 到 order: 12;
order-first显示在最前order: -9999;
order-last显示在最后order: 9999;
order-none使用默认顺序order: 0;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .box {
        background-color: #ff0000;
        padding: 10px;
        border: 1px solid #ccc;
        min-width: 0;
      }
    </style>
  </head>
  <body>
    <div class="flex">
      <div class="box order-last">01</div>
      <div class="box">02</div>
      <div class="box order-first">03</div>
    </div>
  </body>
</html>

1.3 Grid 布局

1.3.1 grid-template-columns（列模板）

类名说明CSS 等效
grid-cols-1 到 grid-cols-12创建 n 个等宽列grid-template-columns: repeat(1, minmax(0, 1fr)); 等
grid-cols-subgrid使用父网格列模板grid-template-columns: subgrid;
grid-cols-[200px_1fr_100px]自定义列模板grid-template-columns: 200px 1fr 100px;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .grid-item {
        height: 8rem;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .grid-item span {
        color: white;
        font-size: 1.5rem;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
  <!-- 4列网格 -->
  <div class="grid grid-cols-4 gap-4">
    <div class="bg-red-500 grid-item"><span>01</span></div>
    <div class="bg-blue-500 grid-item"><span>02</span></div>
    <div class="bg-green-500 grid-item"><span>03</span></div>
    <div class="bg-yellow-500 grid-item"><span>04</span></div>
  </div>
  </body>
</html>

1.3.2 grid-column（列位置）

类名说明CSS 等效
col-span-1 到 col-span-12横跨 n 列grid-column: span 1 / span 1; 等
col-start-1 到 col-start-13从第 n 条线开始grid-column-start: 1; 等
col-end-1 到 col-end-13到第 n 条线结束grid-column-end: 1; 等
col-auto自动放置grid-column: auto;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .grid-item {
        height: 8rem;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .grid-item span {
        color: white;
        font-size: 1.5rem;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
  <!-- 第一行3列，第六行占剩余两列 -->
  <div class="grid grid-cols-3 gap-4">
    <div class="bg-red-500 grid-item col-span-3"><span>01</span></div>
    <div class="bg-blue-500 grid-item"><span>02</span></div>
    <div class="bg-green-500 grid-item"><span>03</span></div>
    <div class="bg-yellow-500 grid-item"><span>04</span></div>
    <div class="bg-purple-500 grid-item"><span>05</span></div>
    <div class="bg-orange-500 grid-item col-span-2"><span>06</span></div>
  </div>
  </body>
</html>

1.3.3 grid-template-rows（行模板）

类名说明CSS 等效
grid-rows-1 到 grid-rows-6创建 n 个等高行grid-template-rows: repeat(1, minmax(0, 1fr)); 等
grid-rows-subgrid使用父网格行模板（少用）grid-template-rows: subgrid;
grid-rows-[200px_1fr_100px]自定义行模板grid-template-rows: 200px 1fr 100px;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .grid-item {
        height: 8rem;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .grid-item span {
        color: white;
        font-size: 1.5rem;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
  <!-- 演示 grid-rows-1 到 grid-rows-6 创建等高行 -->

  <!-- grid-rows-1: 创建1行 -->
  <div class="mb-6">
    <h2 class="text-xl font-bold mb-2">grid-rows-1 (1行)</h2>
    <div class="grid grid-cols-3 grid-rows-1 gap-4 h-32">
      <div class="bg-red-500 grid-item"><span>01</span></div>
      <div class="bg-blue-500 grid-item"><span>02</span></div>
      <div class="bg-green-500 grid-item"><span>03</span></div>
    </div>
  </div>

  <!-- grid-rows-2: 创建2行 -->
  <div class="mb-6">
    <h2 class="text-xl font-bold mb-2">grid-rows-2 (2行)</h2>
    <div class="grid grid-cols-3 grid-rows-2 gap-4 h-64">
      <div class="bg-red-500 grid-item"><span>01</span></div>
      <div class="bg-blue-500 grid-item"><span>02</span></div>
      <div class="bg-green-500 grid-item"><span>03</span></div>
      <div class="bg-yellow-500 grid-item"><span>04</span></div>
      <div class="bg-purple-500 grid-item"><span>05</span></div>
      <div class="bg-orange-500 grid-item"><span>06</span></div>
    </div>
  </div>

  </div>
  </body>
</html>

1.3.4 grid-row（行位置）

类名说明CSS 等效
row-span-1 到 row-span-6横跨 n 行grid-row: span 1 / span 1; 等
row-start-1 到 row-start-7从第 n 条线开始grid-row-start: 1; 等
row-end-1 到 row-end-7到第 n 条线结束grid-row-end: 1; 等
row-auto自动放置grid-row: auto;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .grid-item {
        height: 8rem;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .grid-item span {
        color: white;
        font-size: 1.5rem;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
  <div class="mb-6">
    <!--这是一个四行三列的布局容器 -->
    <h2 class="text-xl font-bold mb-2">Row Span Examples</h2>
    <div class="grid grid-cols-3 grid-rows-4 gap-4 h-96">
      <!-- 此时的01占用了两行 -->
      <div class="bg-red-500 grid-item row-span-2"><span>01 (span 2)</span></div>
      <div class="bg-blue-500 grid-item"><span>02</span></div>
      <div class="bg-green-500 grid-item"><span>03</span></div>
      <div class="bg-yellow-500 grid-item"><span>04</span></div>
      <!-- 此时的05占用了三行 -->
      <div class="bg-purple-500 grid-item row-span-3"><span>05 (span 3)</span></div>
      <div class="bg-orange-500 grid-item"><span>06</span></div>
    </div>
  </div>
  </div>
  </body>
</html>

1.4 间距与对齐

1.4.1 gap（间距）

类名说明CSS 等效
gap-0 到 gap-96设置行列间距gap: 0rem; 到 gap: 24rem;
gap-x-0 到 gap-x-96设置列间距column-gap: 0rem; 到 column-gap: 24rem;
gap-y-0 到 gap-y-96设置行间距row-gap: 0rem; 到 row-gap: 24rem;
gap-px、gap-x-px、gap-y-px1 像素间距gap: 1px; 等
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #000;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <!-- 行列间距不同 -->
    <div class="grid grid-cols-2 gap-x-4 gap-y-4">
      <div class="box">01</div>
      <div class="box">02</div>
      <div class="box">03</div>
      <div class="box">04</div>
    </div>
  </body>
</html>

1.4.2 justify-content（主轴对齐）

类名说明CSS 等效
justify-start起始对齐justify-content: flex-start;
justify-center居中对齐justify-content: center;
justify-end末端对齐justify-content: flex-end;
justify-between两端对齐justify-content: space-between;
justify-around环绕对齐justify-content: space-around;
justify-evenly均匀对齐justify-content: space-evenly;
justify-stretch拉伸填充justify-content: stretch;
justify-normal默认对齐justify-content: normal;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #000;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <!-- 调整justify属性可以看到不同的对齐方式 -->
    <div class="flex justify-center items-center">
      <div class="box">01</div>
      <div class="box">02</div>
      <div class="box">03</div>
      <div class="box">04</div>
    </div>
  </body>
</html>

1.4.3 align-items（交叉轴对齐）

类名说明CSS 等效
items-stretch拉伸填充（默认）align-items: stretch;
items-start起始对齐align-items: flex-start;
items-center居中对齐align-items: center;
items-end末端对齐align-items: flex-end;
items-baseline基线对齐align-items: baseline;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #000;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <!-- 调整justify属性可以看到不同的对齐方式 -->
    <div class="container h-screen">
      <div class="flex justify-evenly items-end h-full">
        <div class="box">01</div>
        <div class="box">02</div>
        <div class="box">03</div>
        <div class="box">04</div>
      </div>
    </div>
  </body>
</html>

1.4.4 justify-items（网格项水平对齐）

类名说明CSS 等效
justify-items-start左侧对齐justify-items: start;
justify-items-center水平居中justify-items: center;
justify-items-end右侧对齐justify-items: end;
justify-items-stretch水平拉伸（默认）justify-items: stretch;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #000;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <!-- 调整justify属性可以看到不同的对齐方式 -->
    <div class="container h-screen">
      <h3>justify-items-start (左侧对齐)</h3>
      <div class="grid grid-cols-4 justify-items-start">
        <div class="box grid-item">项目 1</div>
        <div class="box grid-item">项目 2</div>
        <div class="box grid-item">项目 3</div>
        <div class="box grid-item">项目 4</div>
      </div>
    </div>
  </body>
</html>

1.4.5 align-content（多行对齐）

类名说明CSS 等效
content-start顶部对齐align-content: flex-start;
content-center垂直居中align-content: center;
content-end底部对齐align-content: flex-end;
content-between垂直两端对齐align-content: space-between;
content-around垂直环绕对齐align-content: space-around;
content-evenly垂直均匀对齐align-content: space-evenly;
content-stretch垂直拉伸（默认）align-content: stretch;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #000;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <!-- 调整justify属性可以看到不同的对齐方式 -->
    <div class="container h-screen">
      <!-- 顶部居中对齐 content-center -->
      <div class="mb-8">
        <h2 class="text-lg font-semibold mb-2">content-start (顶部对齐)</h2>
        <div class="flex flex-wrap content-center bg-gray-200 h-48 w-full">
          <div class="bg-blue-500 text-white p-4 m-2">项目 1</div>
          <div class="bg-blue-500 text-white p-4 m-2">项目 2</div>
          <div class="bg-blue-500 text-white p-4 m-2">项目 3</div>
          <div class="bg-blue-500 text-white p-4 m-2">项目 4</div>
          <div class="bg-blue-500 text-white p-4 m-2">项目 5</div>
        </div>
      </div>
    </div>
  </body>
</html>

1.4.6 justify-self/align-self（单项对齐）

类名说明CSS 等效
justify-self-auto继承父容器设置justify-self: auto;
justify-self-start左侧对齐justify-self: start;
justify-self-center水平居中justify-self: center;
justify-self-end右侧对齐justify-self: end;
justify-self-stretch水平拉伸（默认）justify-self: stretch;
self-auto继承父容器设置align-self: auto;
self-start顶部对齐align-self: flex-start;
self-center垂直居中align-self: center;
self-end底部对齐align-self: flex-end;
self-stretch垂直拉伸align-self: stretch;
self-baseline基线对齐align-self: baseline;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #000;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="container h-screen">
      <!-- 网格容器 -->
      <div class="grid grid-cols-3 gap-4 bg-gray-100 p-4 mb-8">
        <div class="bg-blue-200 p-4 justify-self-start">左侧对齐</div>
        <div class="bg-blue-300 p-4 justify-self-center">水平居中</div>
        <div class="bg-blue-400 p-4 justify-self-end">右侧对齐</div>
      </div>
    </div>
  </body>
</html>

1.5 定位与显示

本章主要介绍如何控制元素在页面上的精确定位、内容溢出、层级关系以及媒体元素的显示方式。这些工具是实现复杂布局和精细 UI 的基础。

1.5.1 position (定位)

position 用于将元素从正常的文档流中脱离出来，以便对其进行精确的位置控制。它是创建下拉菜单、模态框、悬浮按钮等组件的核心属性。

核心概念：定位上下文

当一个元素被设置为 absolute、fixed 或 sticky 时，它会相对于其最近的 已定位祖先元素（即 position 值不为 static 的父级或更上级元素）进行定位。如果没有已定位的祖先，absolute 会相对于 <body> 定位，而 fixed 会相对于浏览器视口定位。因此，最常见的实践是将父元素设置为 relative，子元素设置为 absolute。

类名CSS 等效说明
staticposition: static;默认值，元素遵循正常的文档流
relativeposition: relative;最常用。为绝对定位的子元素创建定位上下文
absoluteposition: absolute;元素完全脱离文档流，相对于最近的已定位祖先定位
fixedposition: fixed;元素相对于浏览器视口定位，滚动页面时位置不变
stickyposition: sticky;粘性定位，在滚动到特定位置前表现为 relative，之后表现为 fixed

代码范例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <!-- 父元素创建定位上下文 -->
    <div class="relative w-48 h-48 bg-gray-200">
      <p>父元素 (relative)</p>
      <!-- 子元素根据父元素进行绝对定位 -->
      <div class="absolute bottom-0 right-0 w-24 h-24 bg-blue-400">
        子元素 (absolute)
      </div>
    </div>
  </body>
</html>

1.5.2 媒体元素适配与定位

当处理 <img> 或 <video> 等媒体元素时，我们常常需要控制它们如何填充其容器，以避免图像拉伸或变形。object-fit 用于控制适配方式，而 object-position 则用于控制元素在容器中的对齐位置。

类名说明
object-contain保持宽高比，完整显示图像，可能会在容器中留下空白
object-cover最常用。保持宽高比，填满整个容器，可能会裁剪掉部分图像
object-fill拉伸图像以填满容器，不保持宽高比，可能导致图像变形
object-none保持图像原始尺寸，可能会被容器裁剪

代码范例：

例如很常见的卡片，图片部分被包裹在容器内，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden">
      <img src="https://picsum.photos/200/300" alt="Card image" class="w-full h-48 object-cover">
      <div class="p-6">
        <h2 class="text-xl font-semibold mb-2">Card Title</h2>
        <p class="text-gray-600">This is a simple card with an image and some text content.</p>
      </div>
    </div>
  </body>
</html>=

1.5.4 z-index (层叠顺序)

z-index 用于控制 已定位元素 的堆叠顺序。拥有更高 z-index 值的元素会显示在拥有较低值的元素之上。

核心注意点：

  • z-index 只对设置了 position 属性（static 除外）的元素生效。
  • 不同的 堆叠上下文（Stacking Context） 会影响 z-index 的表现，父元素的 z-index 会限制其所有子元素的层级。
类名CSS 等效说明
z-0z-index: 0;与默认层级一致
z-10, z-20…z-index: 10;正数值，数值越大，层级越高
-z-10z-index: -10;负数值，可用于将元素置于其他元素之后
z-autoz-index: auto;默认值
z-[100]z-index: 100;使用方括号来自定义任意 z-index 值

代码范例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="relative h-24">
      <!-- z-10 在下层 -->
      <div class="absolute inset-0 w-32 h-16 bg-red-300 z-10">z-10</div>
      <!-- z-20 在上层 -->
      <div class="absolute top-4 left-4 w-32 h-16 bg-blue-300 z-20">z-20</div>
    </div>
  </body>
</html>

1.6 间距

间距是构建布局的基石，它定义了元素与其内容之间（padding）以及元素与元素之间（margin）的距离。Tailwind 提供了一套精细且一致的间距工具，帮助我们快速构建和谐、平衡的界面。

1.6.1 Padding (内边距)

Padding 用于控制元素 内部 的留白，即元素边框与其内容之间的空间。它常用于增加按钮的点击区域、让文本不紧贴容器边缘，从而提升可读性和美观度。

Tailwind 的 padding 工具遵循一套逻辑命名法：

  • p-{size}: 设置 所有四个方向 的内边距。
  • px-{size}: 仅设置 水平方向（左、右）的内边距。
  • py-{size}: 仅设置 垂直方向（上、下）的内边距。
  • pt-{size}, pr-{size}, pb-{size}, pl-{size}: 分别设置 上、右、下、左 四个单边的内边距。
常用类名说明CSS 等效示例
p-4在所有方向设置 1rem (16px) 的内边距padding: 1rem;
px-6在水平方向设置 1.5rem (24px) 的内边距padding-left: 1.5rem; padding-right: 1.5rem;
py-2在垂直方向设置 0.5rem (8px) 的内边距padding-top: 0.5rem; padding-bottom: 0.5rem;
pt-8在顶部设置 2rem (32px) 的内边距padding-top: 2rem;
p-[10px]使用方括号自定义一个 10px 的内边距padding: 10px;

代码范例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Padding Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-slate-100 p-10">
    <!-- 示例按钮 -->
    <button class="bg-blue-500 text-white font-bold rounded">
      没有 Padding
    </button>

    <!-- 使用 py-2 和 px-4 创建了更舒适的点击区域 -->
    <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded mt-4">
      有 Padding (py-2 px-4)
    </button>
  </body>
</html>

1.6.2 Margin (外边距)

Margin 用于控制元素 外部 的间距，即元素边框与其他元素之间的距离。它是布局中控制元素位置和间距的主要手段。

Margin 的工具类与 Padding 命名规则完全相同，但增加了 负值 和 自动外边距 的特殊用法。

  • 命名规则: m-{size}, mx-{size}, my-{size}, mt-{size} 等。
  • 水平居中: mx-auto 是一个非常重要的工具，它可以让一个具有固定宽度的块级元素在其父容器中 水平居中。
  • 负外边距: 在类名前添加负号 - (例如 -mt-4) 可以创建负外边距，常用于创建元素间的重叠效果。
常用类名说明CSS 等效示例
m-4在所有方向设置 1rem (16px) 的外边距margin: 1rem;
mx-auto最常用。自动计算水平外边距，实现块级元素水平居中margin-left: auto; margin-right: auto;
my-8在垂直方向设置 2rem (32px) 的外边距margin-top: 2rem; margin-bottom: 2rem;
mb-6在底部设置 1.5rem (24px) 的外边距margin-bottom: 1.5rem;
-mt-4在顶部设置 -1rem (-16px) 的负外边距，使元素向上移动margin-top: -1rem;

代码范例 1：水平居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Margin Centering</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-slate-100 p-4">
    <div class="bg-gray-300 h-24">
      <!-- 这个盒子设置了宽度 w-64 和 mx-auto，因此它在灰色容器中水平居中 -->
      <div class="w-64 h-24 bg-sky-500 text-white flex items-center justify-center mx-auto">
        w-64 mx-auto
      </div>
    </div>
  </body>
</html>

代码范例 2：负外边距重叠效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Negative Margin</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="p-10">
    <div class="flex">
      <div class="w-16 h-16 rounded-full bg-blue-500 z-10"></div>
      <!-- 使用 -ml-4 将第二个圆向左移动，与第一个圆重叠 -->
      <div class="w-16 h-16 rounded-full bg-red-500 -ml-4"></div>
    </div>
  </body>
</html>

1.7 尺寸

尺寸工具用于精确控制元素的宽度（width）和高度（height）。这是所有布局的基础，从定义一个小按钮的尺寸到构建整个页面的宏观结构，都离不开尺寸的设定。Tailwind 提供了从固定值、百分比到基于视口的多种尺寸单位，能够灵活应对各种响应式设计需求。

1.7.1 宽度 (Width)

宽度（width）用于设定元素的水平尺寸。Tailwind 的宽度工具非常丰富，可以满足固定布局和流式布局的需求。

  • 固定宽度 (w-<number>): 基于预设的间距比例，适用于尺寸固定的组件，如图标、头像、特定大小的卡片等。
  • 百分比宽度 (w-<fraction>): 基于父容器的百分比，是构建响应式网格和流式布局的核心。w-full (100%) 是最常用的类之一。
  • 视口宽度 (w-screen): 使元素的宽度等于浏览器视口的宽度，常用于创建通栏横幅或全屏背景。
常用类名说明CSS 等效示例
w-64固定宽度，16rem (256px)width: 16rem;
w-1/2百分比宽度，占据父容器的 50%width: 50%;
w-full最常用。占据父容器的 100%width: 100%;
w-auto宽度由浏览器根据内容自动计算width: auto;
w-screen宽度等于视口宽度width: 100vw;
w-[300px]使用方括号自定义一个 300px 的宽度width: 300px;

代码范例：创建一个响应式的两列布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Width Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="p-4 bg-slate-50">
    <!-- 父容器使用 flex 布局 -->
    <div class="flex bg-white p-4 rounded-lg shadow space-x-4">
      <!-- 侧边栏占据 1/3 宽度 -->
      <div class="w-1/3 bg-sky-100 p-4 rounded">Sidebar (w-1/3)</div>
      <!-- 主内容区占据 2/3 宽度 -->
      <div class="w-2/3 bg-sky-200 p-4 rounded">Main Content (w-2/3)</div>
    </div>
  </body>
</html>

1.7.2 高度 (Height)

高度（height）用于设定元素的垂直尺寸。需要注意的是，百分比高度 (h-full 或 h-1/2 等) 依赖于其父元素具有明确的高度定义。如果父元素的高度是由内容撑开的（默认情况），那么子元素的百分比高度将不会生效。

  • h-screen: 一个极其有用的类，它将元素的高度设置为整个视口的高度，非常适合创建全屏的封面、英雄区或单页应用的主视图。
常用类名说明CSS 等效示例
h-48固定高度，12rem (192px)height: 12rem;
h-full占据父容器的 100% 高度（父元素需有定高）height: 100%;
h-auto高度由浏览器根据内容自动计算height: auto;
h-screen最常用。高度等于视口高度height: 100vh;
h-[80%]使用方括号自定义一个 80% 的高度height: 80%;

代码范例：创建一个占满整个屏幕的欢迎页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Height Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <!-- 使用 h-screen 使 div 占满全屏，并用 flex 实现内容垂直水平居中 -->
    <div class="h-screen bg-gradient-to-r from-cyan-500 to-blue-500 flex items-center justify-center">
      <h1 class="text-white text-4xl font-bold">Welcome!</h1>
    </div>
  </body>
</html>

1.7.3 最小/最大尺寸 (Min/Max Sizing)

最小和最大尺寸类为我们的布局提供了重要的 约束，使其在不同屏幕尺寸下表现得更加健壮和可预测。

  • max-w-{size} (最大宽度): 极其常用。用于限制容器的最大宽度，尤其是在大屏幕上，可以防止文本行过长导致难以阅读。常用于文章、博客或任何以内容为主的页面。
  • min-h-screen (最小高度): 极其常用。确保一个容器（如整个页面布局）的高度至少占满整个屏幕。这可以有效防止在内容较少时，页脚（footer）悬浮在页面中间的尴尬情况。
常用类名说明CSS 等效示例
max-w-md限制元素最大宽度为 28rem (448px)max-width: 28rem;
max-w-screen-lg限制元素最大宽度与大屏幕断点一致 (1024px)max-width: 1024px;
min-h-screen确保元素最小高度为整个视口高度min-height: 100vh;
max-h-96限制元素最大高度为 24rem (384px)，常用于可滚动的面板max-height: 24rem;

代码范例：一个居中且有最大宽度限制的文章容器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Max-Width Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-100">
    <!-- mx-auto 实现水平居中，max-w-3xl 限制内容最大宽度，保证阅读体验 -->
    <article class="mx-auto max-w-3xl bg-white p-8 my-8 rounded-lg shadow">
      <h1 class="text-3xl font-bold mb-4">Article Title</h1>
      <p class="text-gray-700 leading-relaxed">
        This container is centered using 'mx-auto' and its maximum width is constrained by 'max-w-3xl'. This prevents the text from becoming too wide on large screens, which significantly improves readability...
      </p>
    </article>
  </body>
</html>

1.8 文字排版

排版是用户界面设计的灵魂。良好的排版能显著提升信息的可读性、层次感和整体美感。Tailwind 提供了一整套原子化的排版工具，让我们可以像搭积木一样，精确地构建出任何想要的文本样式。

1.8.1 核心字体样式 (Family, Size & Weight)

这是定义文本外观最基础的三个属性：字体、大小和粗细。

  • font-family (字体系列): Tailwind 预设了三种通用字体栈：font-sans (无衬线体，UI首选), font-serif (衬线体), 和 font-mono (等宽字体，代码首选)。
  • font-size (字体大小): text-{size} 类提供了一套从 xs (特小) 到 9xl (巨大) 的完整尺寸体系。text-base 是默认的基础尺寸，通常对应 16px。
  • font-weight (字体粗细): font-{weight} 类覆盖了从 thin (100) 到 black (900) 的标准字重。最常用的是 font-normal (400) 和 font-bold (700)。
常用类名说明CSS 等效示例
font-sans无衬线字体，适用于绝大多数UI文本font-family: ui-sans-serif, system-ui...
text-base基础/默认字体大小 (16px)font-size: 1rem;
text-lg较大文本 (18px)font-size: 1.125rem;
text-2xl2倍大号文本，常用于标题 (24px)font-size: 1.5rem;
font-normal正常粗细 (400)font-weight: 400;
font-semibold半粗 (600)，常用于次级标题或强调font-weight: 600;
font-bold粗体 (700)，常用于主标题font-weight: 700;

代码范例：一个标准的文章标题和段落

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Typography Basics</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="p-8 font-sans">
    <!-- 标题使用大号、粗体文本 -->
    <h1 class="text-3xl font-bold text-slate-900">
      The Foundation of Great Design
    </h1>
    <!-- 段落使用基础大小、正常粗细和更易读的颜色 -->
    <p class="mt-4 text-base font-normal text-slate-700">
      Typography is more than just choosing beautiful fonts; it's a critical component of user interface design that ensures readability and accessibility.
    </p>
  </body>
</html>

1.8.2 文本颜色与对齐 (Color & Alignment)

  • text-color (文本颜色): 使用 text-{color}-{shade} 格式，例如 text-red-500。Tailwind 的调色板非常丰富。一个重要的技巧是使用斜杠 / 来指定透明度，如 text-blue-500/75 表示 75% 的不透明度。
  • text-align (文本对齐): 控制文本的水平对齐方式。text-center 是除了默认的 text-left 之外最常用的。
常用类名说明CSS 等效示例
text-slate-700设置文本为 slate 颜色的 700 色号color: rgb(51 65 85);
text-blue-500/75设置文本为 50% 透明度的蓝色color: rgb(59 130 246 / 0.75);
text-left左对齐 (默认)text-align: left;
text-center居中对齐text-align: center;
text-right右对齐text-align: right;

1.8.3 行高与间距 (Line Height & Spacing)

  • line-height (行高): leading-{size} 类用于控制文本行与行之间的垂直距离。leading-relaxed (宽松行高) 常用于大段文本，以提高可读性。
  • letter-spacing (字母间距): tracking-{size} 类用于调整字符之间的水平间距，可用于细微的美学调整。
常用类名说明CSS 等效示例
leading-normal正常行高 (1.5)line-height: 1.5;
leading-relaxed宽松行高 (1.625)line-height: 1.625;
tracking-tight紧凑的字母间距letter-spacing: -0.025em;
tracking-wide较宽的字母间距letter-spacing: 0.025em;

代码范例：一段行高更舒适的居中文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Line Height & Align</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="p-8">
    <blockquote class="text-center max-w-2xl mx-auto">
      <!-- 使用 leading-relaxed 增加段落的可读性 -->
      <p class="text-xl text-gray-800 leading-relaxed">
        "Good design is obvious. Great design is transparent. When it's done well, you don't even notice it; it just feels right."
      </p>
    </blockquote>
  </body>
</html>

1.8.4 文本装饰与变换 (Decoration & Transform)

  • text-decoration (文本装饰): 主要用于链接 (<a> 标签)。underline 添加下划线，no-underline 移除下划线。常与 hover: 状态结合使用，创造交互效果。
  • text-transform (文本变换): 改变文本的大小写。uppercase (全大写) 常用于按钮或标签，capitalize (首字母大写) 常用于标题。
常用类名说明CSS 等效示例
underline添加下划线text-decoration-line: underline;
no-underline移除下划线text-decoration-line: none;
hover:underline悬停时添加下划线:hover { ... }
uppercase文本全部转为大写text-transform: uppercase;
capitalize每个单词的首字母大写text-transform: capitalize;

代码范例：一个交互式链接和一个大写按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Decoration & Transform</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="p-8 space-y-6">
    <!-- 默认无下划线，悬停时出现 -->
    <a href="#" class="text-blue-600 no-underline hover:underline">
      Interactive Link
    </a>
    <!-- 使用 uppercase 强调按钮文本 -->
    <button class="bg-slate-800 text-white font-semibold py-2 px-4 rounded uppercase">
      Submit
    </button>
  </body>
</html>

1.8.5 文本溢出处理 (Overflow)

当文本内容超出其容器时，我们需要优雅地处理它。

  • truncate (单行截断): 这是一个极其常用的复合工具类。它将超出单行的文本截断，并显示省略号 (…)。它实际上是 overflow-hidden + text-ellipsis + whitespace-nowrap 的组合。
  • line-clamp-{n} (多行截断): 当你需要限制文本显示为特定行数（如2行或3行）并显示省略号时，使用这个类。
类名说明
truncate将文本限制在单行内，超出部分用省略号表示
line-clamp-2将文本限制在两行内，超出部分用省略号表示
line-clamp-3将文本限制在三行内，超出部分用省略号表示

代码范例：卡片中标题和描述的文本截断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Text Overflow</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-slate-100 p-8">
    <div class="max-w-xs bg-white p-4 rounded-lg shadow">
      <!-- 标题使用单行截断 -->
      <h3 class="font-bold truncate">
        This is a Very Long Card Title That Will Be Truncated
      </h3>
      <!-- 描述使用两行截断 -->
      <p class="mt-2 text-sm text-gray-600 line-clamp-2">
        This is a longer description for the card. If the content exceeds two lines of text, it will be elegantly clamped with an ellipsis at the end to maintain a consistent layout.
      </p>
    </div>
  </body>
</html>

2. 背景 (Backgrounds)

背景是构建组件视觉外观的底层画布。通过 Tailwind 的背景工具，我们可以轻松地为元素设置纯色、渐变色或背景图片，并精确控制它们的显示方式，从而有效地划分页面区域、吸引用户注意力，并增强设计的整体美感。

2.1 背景颜色

这是最基础也是最常用的背景工具。使用 bg-{color}-{shade} 语法可以快速应用 Tailwind 调色板中的任何颜色。为页面设置一个浅灰色背景（如 bg-slate-100），并为卡片等内容区域设置白色背景（bg-white），是构建清晰视觉层次的经典做法。

实用技巧：可以使用斜杠 / 来指定背景色的不透明度，例如 bg-black/50，这对于创建半透明的遮罩层（overlays）非常有用。

常用类名说明CSS 等效示例
bg-white白色背景background-color: rgb(255 255 255);
bg-slate-100浅灰色背景，常用于页面底色background-color: rgb(241 245 249);
bg-sky-500天蓝色背景，常用于按钮或强调元素background-color: rgb(14 165 233);
bg-black/5050% 不透明度的黑色背景，常用于模态框遮罩background-color: rgb(0 0 0 / 0.5);
bg-transparent透明背景background-color: transparent;

代码范例：使用背景色区分页面和卡片区域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Background Color</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <!-- 页面使用浅灰色背景 -->
  <body class="bg-slate-100 p-8">
    <!-- 卡片使用白色背景，通过阴影和背景色差与页面区分开 -->
    <div class="max-w-md mx-auto bg-white rounded-xl shadow-md p-8">
      <h2 class="text-2xl font-bold">White Card</h2>
      <p class="mt-2 text-slate-600">This card stands out against the light gray page background.</p>
    </div>
  </body>
</html>

2.2 背景渐变

渐变色是为界面增添活力和现代感的有效方式。在 Tailwind 中创建渐变非常简单，通常需要组合三个部分的工具类：

  1. 方向: bg-gradient-to-{direction} (例如 bg-gradient-to-r 表示从左到右)。
  2. 起始颜色: from-{color}。
  3. 结束颜色: to-{color}。
  4. (可选) 中间颜色: via-{color}。
类名作用
bg-gradient-to-r定义渐变方向为 从左到右
bg-gradient-to-br定义渐变方向为 到右下角
from-purple-600设置渐变的 起始颜色
via-pink-500(可选) 设置渐变的 中间过渡色
to-red-500设置渐变的 结束颜色

代码范例：一个色彩鲜艳的渐变背景卡片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gradient Card</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-slate-900 flex items-center justify-center h-screen">
    <div class="w-80 h-48 rounded-xl bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 shadow-lg p-6 flex flex-col justify-center">
      <h2 class="text-white text-2xl font-bold mb-2">Gradient Card</h2>
      <p class="text-white opacity-80">A vibrant card created with Tailwind gradients.</p>
    </div>
  </body>
</html>

2.3 背景图片

为元素添加背景图片时，通常需要一组工具类来共同控制其 尺寸、位置、重复方式和滚动行为，以达到最佳显示效果。

核心应用场景：全屏背景图
这是一个非常常见的需求，其实现模式通常是 bg-cover + bg-center + bg-no-repeat 的组合。bg-fixed 可选，用于创建视差滚动效果。

常用类名类别说明
bg-[url(...)]Image设置背景图片的路径
bg-coverSize常用。缩放图像以 完全覆盖 容器，可能会裁剪图像
bg-containSize缩放图像以在容器内 完整显示，可能会留白
bg-no-repeatRepeat常用。确保背景图像不重复
bg-centerPosition将背景图像置于容器中心
bg-fixedAttachment视差效果。背景相对于视口固定，不随页面滚动

代码范例：一个带有半透明遮罩的全屏背景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Full Screen Background</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <!-- 容器高度为全屏，并设置了背景图片 -->
    <div
      class="h-screen w-full bg-cover bg-center bg-no-repeat"
      style="background-image: url('https://picsum.photos/1200/800')"
    >
      <!-- 添加一个半透明黑色遮罩层，以确保文字清晰可读 -->
      <div class="bg-black/50 h-full w-full flex items-center justify-center">
        <h1 class="text-white text-5xl font-bold">Full Screen Background</h1>
      </div>
    </div>
  </body>
</html>

2.4 高级背景技巧

2.4.1 背景裁剪 (Background Clip)

bg-clip 属性可以创造出一些引人注目的视觉效果，其中最著名的就是 渐变文字。

核心概念：渐变文字
通过将背景 (background-image) 裁剪 (background-clip) 到文字的轮廓上，再将文字本身颜色设为透明 (text-transparent)，就可以让背景的渐变色“透”出来，形成渐变文字效果。

类名说明
bg-clip-text将背景裁剪为文字的形状
text-transparent将文字颜色设为透明，以显示其后的背景

代码范例：渐变文字效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gradient Text</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-900 flex items-center justify-center h-screen">
    <!-- 组合使用渐变、背景裁剪和透明文字 -->
    <h1 class="text-6xl font-extrabold bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 bg-clip-text text-transparent">
      Gradient Text
    </h1>
  </body>
</html>

3. 边框 (Borders)

边框（Borders）用于在元素周围创建可见的轮廓线，是组织和分隔内容、增强组件视觉层次感的重要工具。通过组合使用圆角、宽度、颜色和样式工具，可以轻松地为按钮、卡片、输入框等元素添加精美的边框效果。

3.1 边框圆角 (Border Radius)

圆角是现代 UI 设计中不可或缺的元素，它可以让界面看起来更柔和、更友好。rounded-{size} 工具用于快速为元素添加不同程度的圆角，其中 rounded-full 是创建圆形头像或徽章的利器。

常用类名说明CSS 等效示例
rounded-sm小圆角border-radius: 0.125rem;
rounded-lg大圆角border-radius: 0.5rem;
rounded-xl超大圆角border-radius: 0.75rem;
rounded-full最常用。完全圆角，用于创建圆形元素border-radius: 9999px;
rounded-t-lg仅在 顶部 应用大圆角border-top-left-radius: 0.5rem; ...
rounded-r-lg仅在 右侧 应用大圆角border-top-right-radius: 0.5rem; ...

代码范例：不同圆角效果的展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Border Radius</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-slate-100 p-8 flex items-center justify-center space-x-8">
    <!-- 大圆角 -->
    <div class="w-24 h-24 bg-sky-500 flex items-center justify-center text-white font-bold rounded-lg shadow-md">
      -lg
    </div>
    <!-- 完全圆角，用于头像 -->
    <img src="https://picsum.photos/100" alt="Avatar" class="w-24 h-24 rounded-full shadow-md object-cover" />
    <!-- 仅顶部圆角 -->
    <div class="w-24 h-24 bg-sky-500 flex items-center justify-center text-white font-bold rounded-t-xl shadow-md">
      -t-xl
    </div>
  </body>
</html>

3.2 边框宽度、颜色与样式 (Width, Color & Style)

边框的宽度、颜色和样式是定义其视觉表现的基础。这三者通常会结合使用。border 类用于设置一个默认的 1px 边框，border-{side} 可以只在特定边上添加边框，而 border-{style} 则可以改变边框的线条样式。

实用技巧: 在处理表单输入框时，通过 focus: 伪类来改变边框颜色 (focus:border-sky-500) 是提升用户体验的常见做法。

常用类名类别说明
borderWidth在所有边上设置 1px 宽度的边框
border-4Width在所有边上设置 4px 宽度的边框
border-b-2Width常用。仅在底部设置 2px 宽度的边框，常用于分隔线
border-slate-300Color设置边框颜色为 slate-300
border-sky-500Color设置边框颜色为 sky-500
border-solidStyle实线边框 (默认)
border-dashedStyle虚线边框
border-dottedStyle点状边框

代码范例：带交互效果的输入框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Border Width & Color</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-slate-100 p-8 flex items-center justify-center">
    <!-- 
      默认状态是灰色边框。
      当输入框获得焦点时 (focus:)，移除默认的 outline，
      并将边框颜色变为 sky-500，同时添加一个同色的 ring (外发光)。
    -->
    <input 
      type="text" 
      placeholder="Click me" 
      class="border border-slate-300 rounded-md px-3 py-2 transition-colors
             focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500" 
    />
  </body>
</html>

3.3 分隔线 (Divide)

divide 工具类可以方便地在 Flex 或 Grid 布局的 子元素之间 添加边框分隔线，而无需为每个子元素单独添加边框。这对于创建列表、菜单或分段控件非常高效。

核心用法:

  1. 在父元素上添加 divide-y (水平分割) 或 divide-x (垂直分割)。
  2. 在父元素上添加 divide-{color} 来设置分隔线的颜色。
常用类名说明
divide-y在 Flex (列) 或 Grid 布局的子元素之间添加 水平 分隔线
divide-x在 Flex (行) 布局的子元素之间添加 垂直 分隔线
divide-slate-200设置分隔线的颜色
divide-dashed设置分隔线的样式为虚线

代码范例：使用 divide 创建一个列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Divide Utility</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-slate-100 p-8 flex items-center justify-center">
    <div class="w-full max-w-md bg-white rounded-lg shadow overflow-hidden">
      <!-- 在 ul 元素上使用 divide-y 和 divide-slate-200 -->
      <ul class="divide-y divide-slate-200">
        <li class="px-6 py-4 hover:bg-slate-50">First Item</li>
        <li class="px-6 py-4 hover:bg-slate-50">Second Item</li>
        <li class="px-6 py-4 hover:bg-slate-50">Third Item</li>
      </ul>
    </div>
  </body>
</html>

3.4 轮廓与外环 (Outline & Ring)

轮廓（outline）和外环（ring）用于在元素边框 外部 绘制线条，它们 不占用布局空间，因此不会引起元素尺寸变化或推开相邻元素。这使得它们成为处理 焦点状态 的理想选择。

Ring vs. Outline:

  • ring (外环): 推荐使用。ring 工具类可以很好地处理圆角，并且支持 ring-offset（外环偏移），可以创建出更美观的焦点效果。
  • outline (轮廓): 传统方式，但对圆角的支持不佳，样式选项也较少。
常用类名类别说明
focus:ring-2Ring Width获得焦点时，显示一个 2px 宽的外环
focus:ring-blue-500Ring Color设置焦点外环的颜色
focus:ring-offset-2Ring Offset设置外环的偏移量，使其与元素本身产生间距
outline-noneOutline移除浏览器默认的轮廓样式

代码范例：使用 ring 创建现代化的焦点效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ring Utility</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-slate-100 p-8 flex items-center justify-center space-x-6">
    <!-- 
      通过组合 focus:ring 和 focus:ring-offset，
      可以在按钮获得焦点时创建出清晰且美观的视觉指示。
    -->
    <button class="px-6 py-2 bg-blue-600 text-white rounded-lg shadow
                   focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
      Click Me
    </button>
  </body>
</html>

4. 效果 (Effects)

在 Web 设计中，视觉效果对于创建引人注目、富有层次感的用户界面至关重要。Tailwind CSS 提供了丰富的效果相关工具类，使您能够轻松添加阴影、透明度、混合模式等，为简单的元素赋予深度和质感。

4.1 盒阴影 (Box Shadow)

盒阴影是为元素添加深度和层次感最有效的方式。通过模拟光源，阴影可以使元素看起来像是浮动在页面之上，从而在视觉上区分不同的 UI 组件，如卡片、模态框和下拉菜单。

常用类名说明适用场景
shadow-sm小型阴影用于细微的层次感，如活动状态的列表项
shadow默认阴影最通用的阴影，适用于大多数卡片、按钮
shadow-md中型阴影比默认更明显的阴影
shadow-lg大型阴影常用。用于需要突出显示的元素，如悬浮的面板
shadow-xl特大阴影常用。用于模态框、弹出窗口等最高层级的元素
shadow-none移除阴影用于在特定状态（如 hover）下移除阴影

实用技巧：可以通过添加颜色来改变阴影的色调，例如 shadow-lg shadow-cyan-500/50，这可以创建出更符合品牌风格的、更生动的阴影效果。

代码范例：不同层级的盒阴影对比

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Box Shadow</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-slate-100 p-8">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- 适用于标准卡片 -->
      <div class="bg-white p-6 rounded-lg shadow-md">
        <h3 class="font-bold">shadow-md</h3>
        <p>A standard card shadow.</p>
      </div>
      <!-- 适用于需要强调的面板 -->
      <div class="bg-white p-6 rounded-lg shadow-lg">
        <h3 class="font-bold">shadow-lg</h3>
        <p>A more prominent shadow.</p>
      </div>
      <!-- 适用于最高层级的模态框 -->
      <div class="bg-white p-6 rounded-lg shadow-2xl">
        <h3 class="font-bold">shadow-2xl</h3>
        <p>Used for modals and pop-ups.</p>
      </div>
    </div>
  </body>
</html>

4.2 透明度 (Opacity)

透明度 (opacity) 用于控制元素的可见程度。它不仅能创建半透明效果，更重要的是，它常用于交互状态的视觉反馈。

核心应用:

  • 悬停状态: hover:opacity-80 可以在用户鼠标悬停时轻微降低元素透明度，提供清晰的交互反馈。
  • 禁用状态: disabled:opacity-50 可以让禁用的按钮或输入框看起来“褪色”，明确表示其不可用。
常用类名CSS 等效说明
opacity-100opacity: 1;完全不透明 (默认)
opacity-75opacity: 0.75;75% 不透明度
opacity-50opacity: 0.5;50% 不透明度 (常用于禁用状态)
opacity-0opacity: 0;完全透明 (隐藏)

代码范例：按钮的交互透明度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Opacity States</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="p-8 flex items-center space-x-4">
    <!-- 悬停时透明度变为 80% -->
    <button class="px-4 py-2 bg-blue-600 text-white rounded-md transition hover:opacity-80">
      Hover Me
    </button>
    <!-- 禁用时透明度为 50% -->
    <button class="px-4 py-2 bg-blue-600 text-white rounded-md disabled:opacity-50" disabled>
      Disabled
    </button>
  </body>
</html>

4.3 混合模式 (Blend Mode)

混合模式 (mix-blend-mode) 是一种高级的创意工具，它定义了层叠的元素如何相互混合颜色。最常见的应用场景是图像着色，即在一个背景图片上叠加一个彩色层，通过混合模式创造出独特的滤镜效果。

常用类名说明效果描述
mix-blend-multiply正片叠底将上下层颜色相乘，结果总是更暗。非常适合为图片添加深色滤镜。
mix-blend-screen滤色效果与 multiply 相反，结果总是更亮。适合为图片添加浅色或高光效果。
mix-blend-overlay叠加结合了 multiply 和 screen，保留了底层图像的高光和阴影，效果更自然。

代码范例：使用混合模式为图片着色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blend Mode</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="p-8 bg-slate-100 flex justify-center">
    <!-- 相对定位的容器 -->
    <div class="relative w-96 h-64 rounded-lg overflow-hidden">
      <!-- 底层是图片 -->
      <img src="https://picsum.photos/400/300" alt="City" class="absolute inset-0 w-full h-full object-cover">
      <!-- 
        上层是一个绝对定位的彩色 div。
        mix-blend-multiply 会将这个 div 的蓝色与下方的图片颜色混合。
      -->
      <div class="absolute inset-0 bg-blue-600 mix-blend-multiply"></div>
    </div>
  </body>
</html>

5. 过滤器 (Filters)

过滤器（Filters）是直接在浏览器中对元素进行实时视觉处理的强大工具，常用于图像处理和创建富有沉浸感的 UI 效果。Tailwind 将过滤器分为两种：标准 filter，用于改变元素本身的外观；以及 backdrop-filter，用于改变元素 背后区域 的外观，是实现“玻璃态”效果的关键。

5.1 标准过滤器 (Filter)

标准过滤器会影响应用它的元素及其所有内容。你可以像叠加图层一样组合使用多个过滤器，例如同时让一个图片变模糊并转为灰度。

5.1.1 模糊与图像调整 (Blur & Image Adjustment)

这是最常用的一组过滤器，用于调整图像的清晰度、明暗和色彩。它们经常与交互状态（如 hover）结合，创造出动态的视觉反馈。

常用类名类别说明
blur-md模糊应用中等程度的模糊，常用于背景或非活动状态
brightness-110亮度轻微提升亮度，让图片更生动
contrast-125对比度增加对比度，让图像细节更清晰
grayscale灰度常用。将图片变为完全的黑白，常用于表示“禁用”或在悬停时恢复色彩
saturate-150饱和度提升色彩饱和度，让颜色更鲜艳
sepia棕褐色应用复古的棕褐色调，营造怀旧感

代码范例：交互式的图像滤镜效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Filter Effects</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-slate-100 p-8">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
      <!-- 默认模糊，悬停时清晰 -->
      <img src="https://picsum.photos/id/237/200/200" alt="Dog" class="rounded-lg blur-sm hover:blur-none transition duration-300 cursor-pointer">
      <!-- 默认灰度，悬停时恢复色彩 -->
      <img src="https://picsum.photos/id/1025/200/200" alt="Dog" class="rounded-lg grayscale hover:grayscale-0 transition duration-300 cursor-pointer">
      <!-- 默认低亮度，悬停时变亮 -->
      <img src="https://picsum.photos/id/10/200/200" alt="Forest" class="rounded-lg brightness-75 hover:brightness-100 transition duration-300 cursor-pointer">
      <!-- 默认复古色，悬停时恢复正常 -->
      <img src="https://picsum.photos/id/433/200/200" alt="Car" class="rounded-lg sepia hover:sepia-0 transition duration-300 cursor-pointer">
    </div>
  </body>
</html>

5.1.2 投影 (Drop Shadow)

drop-shadow 过滤器与 box-shadow 效果类似，但有一个关键区别：drop-shadow 会根据元素内容的实际轮廓（包括透明部分）来生成阴影。这使得它非常适合为不规则形状的 PNG 图片或 SVG 图标添加阴影。

类名说明
drop-shadow-md应用中等大小的投影
drop-shadow-lg应用大型投影
drop-shadow-xl应用特大型投影

代码范例：为 SVG 添加轮廓阴影

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Drop Shadow</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div
      class="grid grid-cols-3 items-end gap-8 bg-white p-8 max-sm:grid-cols-1"
    >
      <div class="flex flex-col items-center">
        <p class="mb-3 text-center font-mono text-xs font-medium text-gray-500">
          drop-shadow-xl
        </p>
        <svg
          class="size-28 text-gray-950/100 drop-shadow-xl"
          viewBox="0 0 84 84"
        >
          <path
            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
            class="fill-white"
          ></path>
        </svg>
      </div>
    </div>
  </body>
</html>

5.2 背景过滤器 (Backdrop Filter)

背景过滤器是创建现代 UI（如“玻璃态”）的核心技术。它 不会影响元素本身，而是对元素背后可见的区域应用效果。要使背景过滤器生效，元素本身必须是半透明的。

5.2.1 创建玻璃态效果 (Glassmorphism)

实现“玻璃态”效果的经典配方非常简单：

  1. 半透明背景: 使用 bg-{color}/{opacity}，例如 bg-white/30。
  2. 背景模糊: 使用 backdrop-blur-{size}，例如 backdrop-blur-lg。
常用类名说明
backdrop-blur-sm对背景应用轻微模糊
backdrop-blur-lg对背景应用较强的模糊
backdrop-saturate-150提升背景的饱和度，让颜色透过玻璃更鲜艳
backdrop-brightness-125提升背景的亮度

代码范例：一个典型的玻璃态卡片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Backdrop Filter (Glassmorphism)</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <!-- 容器，包含背景图片 -->
    <div class="relative h-screen w-full flex items-center justify-center bg-cover bg-center" style="background-image: url('https://picsum.photos/id/1018/1200/800')">
      
      <!-- 玻璃态卡片 -->
      <div class="w-full max-w-sm p-8
                  bg-white/20 backdrop-blur-lg 
                  rounded-2xl border border-white/30 shadow-xl">
        <h2 class="text-2xl font-bold text-white text-shadow-sm">Glassmorphism Card</h2>
        <p class="mt-2 text-white/80">
          This card uses a semi-transparent background and a backdrop-blur filter to create a frosted glass effect.
        </p>
      </div>

    </div>
  </body>
</html>

6. 表格 (Tables)

表格是展示结构化数据的核心组件。虽然在现代 Web 设计中，许多布局任务已由 Flexbox 和 Grid 接管，但对于真正的表格数据（如用户列表、财务报告、功能对比等），<table> 元素仍然是最佳选择。Tailwind 提供了专门的工具来控制表格的布局和样式，使其既美观又易读。

6.1 核心布局决策 (Layout Decisions)

在开始为表格添加样式之前，你需要做出两个关键的布局决策：边框是合并还是分离，以及列宽是自动计算还是固定。

6.1.1 边框模式: border-collapse vs. border-separate

这决定了单元格边框的行为方式。

类名说明适用场景
border-collapse合并边框 (推荐)相邻单元格的边框会合并为一条更细的单线。这是最常见、最简洁的现代表格样式。
border-separate分离边框每个单元格都拥有自己独立的边框，单元格之间会有间距。

6.1.2 列宽算法: table-auto vs. table-fixed

这决定了浏览器如何计算表格的列宽。

类名说明适用场景
table-auto自动列宽 (默认)浏览器会根据每列中最宽的内容来确定列宽。布局灵活但性能稍差。
table-fixed固定列宽 (推荐)表格和列的宽度由你设置的宽度决定（例如 w-1/2），内容超出部分会被截断或换行。性能更好，布局更可预测。

代码范例：一个采用 table-fixed 和 border-collapse 的基础表格结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Table Layout</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="p-8 bg-slate-100">
    <div class="w-full max-w-2xl mx-auto bg-white p-4 rounded-lg shadow">
      <!-- 
        table-fixed: 列宽由 th 上的 w-* 类决定，而不是内容。
        border-collapse: 单元格之间的边框合并为一条。
      -->
      <table class="table-fixed border-collapse w-full">
        <thead>
          <tr>
            <th class="w-1/2 border p-2 text-left">Title</th>
            <th class="w-1/4 border p-2 text-left">Author</th>
            <th class="w-1/4 border p-2 text-left">Views</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <!-- 使用 truncate 防止长文本破坏布局 -->
            <td class="border p-2 truncate">A Very Long and Detailed Introduction to Modern CSS Frameworks</td>
            <td class="border p-2">Adam Wathan</td>
            <td class="border p-2">1,200</td>
          </tr>
          <tr>
            <td class="border p-2">Building a Design System</td>
            <td class="border p-2">Sarah Drasner</td>
            <td class="border p-2">980</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

6.2 构建现代化的表格样式

现代数据表格通常遵循“少即是多”的原则，倾向于使用水平分隔线而不是网格线，以获得更干净、更易于阅读的外观。

实现配方:

  1. 移除所有边框，使用 divide-y 在行之间创建水平分隔线。
  2. 为表头 (thead) 设置一个浅色的背景 (bg-slate-50)。
  3. 确保表头文字左对齐 (text-left) 并有合适的字重 (font-medium) 和颜色 (text-slate-700)。
  4. 为所有单元格 (th, td) 添加足够的内边距 (padding)，例如 px-6 py-4。
  5. 为表格行 (tr) 添加一个悬停状态 (hover:bg-slate-50) 以提供视觉反馈。

代码范例：一个简洁的现代数据表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modern Table Styling</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style type="text/tailwindcss">
      @layer components {
        .table-header {
          @apply px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider;
        }
        .table-cell {
          @apply px-6 py-4 whitespace-nowrap;
        }
        .status-badge {
          @apply px-2 inline-flex text-xs leading-5 font-semibold rounded-full;
        }
        .status-active {
          @apply bg-green-100 text-green-800;
        }
        .status-inactive {
          @apply bg-red-100 text-red-800;
        }
      }
    </style>
  </head>
  <body class="p-8 bg-slate-100">
    <div
      class="w-full max-w-4xl mx-auto bg-white rounded-lg shadow overflow-hidden"
    >
      <table class="w-full">
        <thead class="bg-slate-50 border-b border-slate-200">
          <tr>
            <th class="table-header">Name</th>
            <th class="table-header">Title</th>
            <th class="table-header">Status</th>
            <th class="table-header">Role</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
          <tr class="hover:bg-slate-50">
            <td class="table-cell">Jane Cooper</td>
            <td class="table-cell">Regional Paradigm Technician</td>
            <td class="table-cell">
              <span class="status-badge status-active"> Active </span>
            </td>
            <td class="table-cell">Admin</td>
          </tr>
          <tr class="hover:bg-slate-50">
            <td class="table-cell">Cody Fisher</td>
            <td class="table-cell">Product Directives Officer</td>
            <td class="table-cell">
              <span class="status-badge status-inactive"> Inactive </span>
            </td>
            <td class="table-cell">Owner</td>
          </tr>
          <!-- More people... -->
        </tbody>
      </table>
    </div>
  </body>
</html>

7. 过渡与动画

过渡和动画是为用户界面注入生命力的关键。它们能引导用户的注意力，提供流畅的交互反馈，并极大地提升整体用户体验。Tailwind 提供了一套简洁而强大的工具，用于创建平滑的 CSS 过渡和预设的动画效果，这一章节无需纠结太多，我们会学习一些更成熟的动画库

7.1 过渡 (Transitions)

过渡用于在元素的 状态发生变化时（例如 hover 或 focus），平滑地改变其 CSS 属性，而不是瞬间完成。创建过渡效果通常需要组合使用以下四种属性。

7.1.1 核心过渡属性

  1. transition-{property} (过渡属性): 指定 哪些 CSS 属性会应用过渡效果。transition 类是通用选择，包含了最常见的属性。
  2. duration-{amount} (持续时间): 指定过渡效果 花费多长时间。duration-300 (300ms) 是一个非常通用的选择。
  3. ease-{curve} (时间函数): 控制过渡的 速度曲线。ease-in-out (缓入缓出) 提供了最自然的感觉。
  4. delay-{amount} (延迟): (可选) 指定在过渡 开始前等待 多长时间。
类别常用类名说明
属性transition对颜色、阴影、变换等常用属性启用过渡
属性transition-transform仅对 transform 属性 (如缩放、位移) 启用过渡
时长duration-200200 毫秒，适合快速的 UI 反馈
时长duration-500500 毫秒，适合更舒缓、更明显的动画效果
曲线ease-in-out缓入缓出，动画感觉更自然 (默认)
曲线ease-out缓出，适合元素进入视野的动画
延迟delay-150在 150 毫秒后开始过渡

代码范例：一个典型的悬停过渡效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transitions</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="p-8 bg-slate-100 flex items-center justify-center">
    <!-- 
      - transition: 启用过渡
      - duration-300: 持续时间 300ms
      - ease-in-out: 缓入缓出
      - hover:*: 定义悬停时的最终状态
    -->
    <button
      class="px-8 py-3 bg-sky-600 text-white font-semibold rounded-lg shadow-md
             transition duration-300 ease-in-out
             hover:bg-sky-700 hover:scale-110 hover:-translate-y-1"
    >
      Hover Me
    </button>
  </body>
</html>

7.1.2 序列动画 (Staggered Animations)

通过为连续的元素设置不同的 delay 值，可以创建出优雅的 序列动画 或 交错动画 效果。这在加载列表项或展示导航菜单时非常有用。

代码范例：悬停时依次出现的列表项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Staggered Transition</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="p-8 bg-slate-900 flex items-center justify-center">
    <!-- 将 group 类添加到父元素上 -->
    <div class="group">
      <h2 class="text-white text-center mb-4">Hover over me!</h2>
      <div class="space-y-2">
        <!-- 
          默认情况下，列表项是透明且向右偏移的。
          当父元素被悬停时 (group-hover)，它们会恢复正常。
          每个元素都有不同的 delay，从而创建了序列效果。
        -->
        <div class="opacity-0 transition duration-500 delay-100 group-hover:opacity-100 group-hover:translate-x-0 translate-x-4 h-8 w-48 bg-white rounded"></div>
        <div class="opacity-0 transition duration-500 delay-200 group-hover:opacity-100 group-hover:translate-x-0 translate-x-4 h-8 w-48 bg-white rounded"></div>
        <div class="opacity-0 transition duration-500 delay-300 group-hover:opacity-100 group-hover:translate-x-0 translate-x-4 h-8 w-48 bg-white rounded"></div>
      </div>
    </div>
  </body>
</html>

7.2 动画 (Animation)

与过渡不同，动画可以 自动播放、无限循环，并包含更复杂的 关键帧 (@keyframes)。Tailwind 提供了一些开箱即用的实用动画，非常适合用于加载指示器、通知和骨架屏。

常用类名说明适用场景
animate-spin旋转最经典的加载中 (loading) 指示器。
animate-ping脉冲/涟漪用于通知、新消息提示，吸引用户注意。
animate-pulse脉搏/呼吸缓慢地淡入淡出，是创建骨架屏 (skeleton screen) 的完美选择。
animate-bounce弹跳模拟上下弹跳，常用于“向下滚动”的箭头图标。

代码范例：Tailwind 内置动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> Animations </title>
    <script src="https://cdn.tailwindcss.com"> </script>
  </head>
  <body class="p-8">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center justify-items-center">
      <!-- Spin -->
      <svg class="animate-spin h-8 w-8 text-sky-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"> </circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"> </path>
      </svg>
      <!-- Ping -->
      <span class="relative flex h-6 w-6">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"> </span>
        <span class="relative inline-flex rounded-full h-6 w-6 bg-red-500"> </span>
      </span>
      <!-- Bounce -->
      <svg class="animate-bounce w-8 h-8 text-slate-900" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
        <path d="M19 14l-7 7m0 0l-7-7m7 7V3"> </path>
      </svg>
      <!-- Pulse -->
      <div class="w-full space-y-3">
        <div class="h-4 bg-slate-200 rounded animate-pulse"> </div>
        <div class="h-4 bg-slate-200 rounded animate-pulse w-5/6"> </div>
      </div>
    </div>
  </body>
</html>

8. 变换 (Transforms)

变换（Transform）是 CSS 中一组功能强大的属性，它允许你在不影响文档流（即不推开其他元素）的情况下，对元素进行移动、旋转、缩放和倾斜。这是创建动态、富有交互性的 UI 动画的基础。Tailwind 将复杂的变换语法封装成了简单直观的工具类。

8.1 核心二维变换 (Core 2D Transforms)

二维变换是在 X 轴（水平）和 Y 轴（垂直）上对元素进行操作，这是最常用的一类变换。它们通常与 transition 结合使用，以创建平滑的交互效果。

  • translate (移动): 用于将元素从其原始位置移动。
  • rotate (旋转): 用于使元素围绕其中心点旋转。
  • scale (缩放): 用于放大或缩小元素，是创建悬停反馈的绝佳方式。
  • skew (倾斜): 用于使元素沿 X 轴或 Y 轴产生形变。
类别常用类名说明
移动translate-x-4, -translate-y-1/2分别沿 X 轴和 Y 轴移动
旋转rotate-45, -rotate-90顺时针或逆时针旋转
缩放scale-105, scale-x-150均匀缩放或仅沿 X 轴缩放
倾斜skew-x-6, -skew-y-3沿 X 轴或 Y 轴倾斜

代码范例：组合使用二维变换创建交互效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2D Transforms</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-slate-100 p-8">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-12 justify-items-center items-center text-center text-white font-bold">
      <!-- 悬停时放大 -->
      <div class="w-28 h-28 bg-sky-500 rounded-lg flex items-center justify-center transition hover:scale-110">
        Scale
      </div>
      <!-- 悬停时旋转 -->
      <div class="w-28 h-28 bg-red-500 rounded-lg flex items-center justify-center transition hover:rotate-45">
        Rotate
      </div>
      <!-- 悬停时向上移动 -->
      <div class="w-28 h-28 bg-amber-500 rounded-lg flex items-center justify-center transition hover:-translate-y-4">
        Translate
      </div>
      <!-- 悬停时倾斜 -->
      <div class="w-28 h-28 bg-emerald-500 rounded-lg flex items-center justify-center transition hover:skew-x-12">
        Skew
      </div>
    </div>
  </body>
</html>

8.2 变换原点 (Transform Origin)

默认情况下，所有变换（如旋转、缩放）都是围绕元素的中心点进行的。通过 origin-{location} 工具可以改变这个变换的“轴心点”，从而创造出完全不同的动画效果。

常用类名说明
origin-center中心点 (默认)
origin-top-left左上角
origin-bottom-right右下角
origin-top顶部中心
origin-bottom底部中心

代码范例：改变旋转的中心点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transform Origin</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="p-16">
    <div class="grid grid-cols-3 gap-16 justify-items-center text-center text-white font-semibold">
      <div>
        <div class="w-24 h-24 bg-sky-500 transition duration-500 hover:rotate-45 origin-center"></div>
        <p class="mt-4">Origin Center</p>
      </div>
      <div>
        <!-- 像时钟指针一样从左上角旋转 -->
        <div class="w-24 h-24 bg-sky-500 transition duration-500 hover:rotate-45 origin-top-left"></div>
        <p class="mt-4">Origin Top Left</p>
      </div>
      <div>
        <!-- 像钟摆一样从底部中心旋转 -->
        <div class="w-24 h-24 bg-sky-500 transition duration-500 hover:rotate-45 origin-bottom"></div>
        <p class="mt-4">Origin Bottom</p>
      </div>
    </div>
  </body>
</html>

9. 互动性

互动性是连接用户与界面的桥梁。它不仅仅是关于点击和悬停，还包括光标的反馈、表单的可用性、滚动体验以及对用户输入的响应。Tailwind 提供了一整套工具来精细地控制这些交互行为，从而创造出直观、流畅且用户友好的体验。

9.1 光标与指针事件

这两个属性共同决定了用户如何与一个元素进行最基础的交互。

  • cursor: 改变鼠标悬停在元素上时的指针样式，为用户提供关于元素功能的即时视觉线索。
  • pointer-events: 控制元素是否能成为鼠标事件的目标。pointer-events-none 是一个强大的工具，可以让一个元素在视觉上存在，但允许点击“穿透”它，作用于其下方的元素。
类别常用类名说明
光标cursor-pointer手型。表示元素是可点击的，如按钮、链接。
光标cursor-not-allowed禁止。表示操作不可用，通常用于禁用的按钮。
光标cursor-grab抓取。表示元素是可拖动的。
事件pointer-events-none事件穿透。元素对鼠标事件“隐形”。
事件pointer-events-auto恢复正常的鼠标事件响应。

代码范例：指针事件在表单图标上的应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cursor & Pointer Events</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-slate-100">
    <div class="w-full max-w-xs">
        <label for="search" class="font-medium text-slate-700">Search</label>
        <div class="relative mt-1">
            <!-- 
                这个 SVG 图标位于输入框内部，
                pointer-events-none 确保即使用户点击到图标，
                焦点也能正确地落在输入框上。
            -->
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg class="h-5 w-5 text-slate-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                </svg>
            </div>
            <input type="text" id="search" class="w-full pl-10 pr-3 py-2 border border-slate-300 rounded-md">
        </div>
    </div>
</body>
</html>

9.2 外观与表单样式

默认情况下，浏览器会为表单元素（如 <select>, <input type="checkbox">）应用一套原生的、跨平台不一致的样式。为了实现自定义设计，我们首先需要移除这些原生样式。

  • appearance-none: 这是自定义表单元素的 第一步。它会移除浏览器强加的大部分默认样式，让你能像对待普通 div 一样去设置背景、边框、内边距等。
  • accent-{color}: 一个现代 CSS 属性，用于快速改变某些表单控件（如复选框、单选按钮）的 强调色，而无需完全重置它们的样式。
  • caret-{color}: 用于改变文本输入框中 光标 的颜色。

代码范例：自定义一个下拉选择框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Select</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-slate-100">
    <div class="w-full max-w-xs">
        <label for="framework" class="font-medium text-slate-700">Framework</label>
        <div class="relative mt-1">
            <!-- 
                1. appearance-none 移除了默认的下拉箭头和样式。
                2. 我们用自己的 div 和 SVG 制作了一个新的箭头。
            -->
            <select id="framework" class="w-full pl-3 pr-10 py-2 bg-white border border-slate-300 rounded-md appearance-none">
                <option>React</option>
                <option>Vue</option>
                <option>Svelte</option>
            </select>
            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                <svg class="h-5 w-5 text-slate-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
            </div>
        </div>
    </div>
</body>
</html>

9.3 滚动行为与捕捉 (Scroll Behavior & Snap)

这些工具用于增强长页面或轮播组件的滚动体验。

  • scroll-smooth: 应用于 <html> 元素时，可以使页面内的锚点链接（href="#section"）产生平滑的滚动动画，而不是瞬间跳转。
  • scroll-snap: 用于创建“吸附”效果的滚动容器，常见于轮播图 (Carousel)。它需要父元素（滚动容器）和子元素（滚动项）的配合。

滚动捕捉 (Scroll Snap) 的实现配方:

  1. 容器: snap-x (水平) 或 snap-y (垂直)，以及 snap-mandatory (强制吸附) 或 snap-proximity (接近时吸附)。
  2. 滚动项: snap-start, snap-center, 或 snap-end，定义了子元素与容器对齐的位置。
  3. 滚动边距/内边距: scroll-m-* 或 scroll-p-*，用于在吸附时添加偏移量，防止内容被固定的导航栏等元素遮挡。

代码范例：一个水平滚动的图片轮播

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Snap Carousel</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <!-- 1. 容器：设置 snap-x 和 snap-mandatory -->
    <div class="w-full max-w-lg mx-auto flex space-x-4 overflow-x-auto pb-4 snap-x snap-mandatory">
        <!-- 2. 滚动项：设置 snap-center 使其在容器中居中对齐 -->
        <div class="snap-center flex-shrink-0 w-4/5">
            <img src="https://picsum.photos/id/1015/500/300" class="rounded-lg">
        </div>
        <div class="snap-center flex-shrink-0 w-4/5">
            <img src="https://picsum.photos/id/1016/500/300" class="rounded-lg">
        </div>
        <div class="snap-center flex-shrink-0 w-4/5">
            <img src="https://picsum.photos/id/1018/500/300" class="rounded-lg">
        </div>
        <div class="snap-center flex-shrink-0 w-4/5">
            <img src="https://picsum.photos/id/1019/500/300" class="rounded-lg">
        </div>
    </div>
</body>
</html>

9.4 用户选择与大小调整 (User Select & Resize)

  • user-select: 控制用户是否能够选择元素中的文本。这对于防止用户意外选中按钮或导航等 UI 元素的文本非常有用。
  • resize: 控制用户是否可以调整一个元素的尺寸，最常见的应用是 <textarea>。
类别常用类名说明
选择select-none禁止选择。应用于 UI 控件，如按钮、图标。
选择select-text允许选择。应用于正文内容。
选择select-all单击全选。应用于代码块、许可证密钥等。
调整resize-none禁止调整大小。
调整resize-y仅允许垂直调整。
调整resize允许双向调整。

代码范例：代码块和不可调整大小的文本区

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Select & Resize</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 space-y-6">
    <div>
        <label for="code-block" class="font-medium">API Key (click to select all):</label>
        <!-- select-all 使得用户单击即可复制整个 key -->
        <pre id="code-block" class="mt-1 p-3 bg-slate-800 text-white rounded-md select-all">
            <code>user-abcdef1234567890</code>
        </pre>
    </div>
    <div>
        <label for="comment" class="font-medium">Comment (not resizable):</label>
        <!-- resize-none 禁止用户调整 textarea 的大小 -->
        <textarea id="comment" class="mt-1 w-full p-2 border border-slate-300 rounded-md resize-none"></textarea>
    </div>
</body>
</html>