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>