Tailwind CSS 中的尺寸、定位和布局

发表于 更新于 分类于
Tailwind CSS 中的尺寸、定位和布局

前言

页面布局是前端日常开发里最高频的工作之一：定宽高、排列元素、控制间距，几乎每个组件都要用到。
Tailwind CSS 把这三类需求拆成原子工具类——w-* / h-* 控制尺寸，flex / grid 系列负责排列，p-* / m-* / gap-* 处理留白——命名规律统一，记一次就能覆盖大多数场景。

本文是对 尺寸与布局 的专项梳理，涵盖：

  • 尺寸：固定值、百分比、视口单位与 min/max 约束
  • 布局：Flexbox 与 Grid 的常用类名及典型组合
  • 间距：padding、margin 与 space 系工具类

文中附上关键类名的 CSS 对照表和可直接复制的代码片段，适合开发时随手查阅。

定位

在 Tailwind CSS 中，定位（Positioning）工具类直接对应原生 CSS 的 position、top/right/bottom/left/inset 以及 z-index 属性。

以下是核心用法速查：

Position 类型

Tailwind 类 CSS 属性 说明
static position: static 默认值，正常文档流
relative position: relative 相对自身原始位置偏移，创建新的定位上下文
absolute position: absolute 相对于最近的非 static 祖先定位
fixed position: fixed 相对于视口固定
sticky position: sticky 滚动到阈值前为 relative，之后为 fixed

偏移量

使用 top-{value}、right-{value}、bottom-{value}、left-{value} 或简写 inset-{value}：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 四边都为 0 -->
<div class="absolute inset-0"></div>

<!-- 仅设置 top 和 left -->
<div class="absolute top-4 left-4"></div>

<!-- 50% 居中常用技巧 -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>

<!-- 负值偏移 -->
<div class="absolute -top-2 -right-2"></div>

<!-- 任意值 -->
<div class="top-[117px]"></div>

常用刻度： 0, px, 0.5(2px), 1(4px), 2(8px), 4(16px), full(100%), 1/2(50%) 等，完整列表见 spacing scale。

Z-Index

1
2
3
4
<div class="z-0">...</div>   /* z-index: 0 */
<div class="z-10">...</div>  /* z-index: 10 */
<div class="z-50">...</div>  /* z-index: 50 */
<div class="z-[999]">...</div> /* 任意值 */

常见实战模式

全屏遮罩 / Overlay

1
2
3
<div class="fixed inset-0 z-50 bg-black/50">
  <!-- modal content -->
</div>

Sticky 导航栏

1
<nav class="sticky top-0 z-40 bg-white backdrop-blur">...</nav>

角标 / Badge

1
2
3
4
5
6
<div class="relative inline-block">
  <img src="avatar.jpg" class="rounded-full" />
  <span class="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs text-white">
    3
  </span>
</div>

图片上叠加文字

1
2
3
4
5
6
<div class="relative">
  <img src="hero.jpg" class="w-full" />
  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 p-6 text-white">
    <h2>Title</h2>
  </div>
</div>

注意事项

  1. absolute 必须配合父级 relative（或其他非 static 定位），否则会相对于更上层祖先甚至 body 定位。
  2. sticky 生效条件：父容器不能有 overflow: hidden/auto/scroll，且必须设置 top（或其他方向阈值）。
  3. 响应式 & 状态变体：所有定位类都支持前缀，如 md:absolute、hover:top-0、group-hover:z-50。
  4. RTL 适配：如果使用 rtl: 变体，left / right 会自动翻转；也可以用逻辑属性 start-{value} / end-{value}（Tailwind v3.3+）。

尺寸

宽度和高度使用 w-* 和 h-*，支持固定值和百分比。

1
2
3
4
5
6
7
8
9
<!-- 固定宽度 -->
<div class="w-64 h-32">固定尺寸</div>

<!-- 百分比 -->
<div class="w-full">全宽</div>
<div class="w-1/2">半宽</div>

<!-- 最小/最大宽高 -->
<div class="min-w-0 max-w-screen-lg">限制宽度</div>

w-screen 和 h-screen 对应视口宽高，w-fit 和 w-min、w-max 分别对应内容尺寸和最大内容尺寸。

Class Properties
w-0 width: 0px;
w-px width: 1px;
w-0.5 width: 0.125rem; /_ 2px _/
w-1 width: 0.25rem; /_ 4px _/
w-1.5 width: 0.375rem; /_ 6px _/
w-2 width: 0.5rem; /_ 8px _/
w-auto width: auto;
w-1/2 width: 50%;
w-1/3 width: 33.333333%;
w-1/4 width: 25%;
w-1/6 width: 16.666667%;
w-1/12 width: 8.333333%;
w-full width: 100%;
w-screen width: 100vw;
w-svw width: 100svw;
w-lvw width: 100lvw;
w-dvw width: 100dvw;
w-min width: min-content;
w-max width: max-content;
w-fit width: fit-content;

布局

Tailwind 提供了完整的 Flexbox 和 Grid 工具类，足以覆盖绝大多数布局场景。

Flex 布局

Tailwind CSS 提供了非常完善的 Flexbox 工具类。

以下是按功能分类的常用参数示例及代码演示：

基础与方向

类名 CSS 属性 说明
flex display: flex 启用 Flex 布局
inline-flex display: inline-flex 行内 Flex 布局
flex-row flex-direction: row 水平排列（默认）
flex-col flex-direction: column 垂直排列
flex-row-reverse flex-direction: row-reverse 水平反向排列
flex-col-reverse flex-direction: column-reverse 垂直反向排列 
1
2
3
4
<!-- 垂直居中布局 -->
<div class="flex flex-col items-center justify-center h-screen">
  <p>内容垂直水平居中</p>
</div>

换行 (Wrap)

类名 CSS 属性 说明
flex-wrap flex-wrap: wrap 允许换行
flex-nowrap flex-wrap: nowrap 不换行（默认）
flex-wrap-reverse flex-wrap: wrap-reverse 反向换行

交叉轴对齐 (Align Items / Content)

单行对齐 (align-items)：

  • items-start / items-end / items-center / items-baseline / items-stretch(默认)

多行对齐 (align-content)：

  • content-start / content-end / content-center / content-between / content-around / content-evenly

主轴对齐 (Justify Content)

类名 CSS 属性 说明
justify-start justify-content: flex-start 起始对齐
justify-end justify-content: flex-end 末尾对齐
justify-center justify-content: center 居中对齐
justify-between justify-content: space-between 两端对齐，中间等距
justify-around justify-content: space-around 每个项目两侧等距
justify-evenly justify-content: space-evenly 所有间距完全相等

子项属性

类名 CSS 属性 说明
flex-1 flex: 1 1 0% 等分剩余空间
flex-auto flex: 1 1 auto 基于内容大小伸缩
flex-initial flex: 0 1 auto 不放大，可缩小（默认）
flex-none flex: none 固定尺寸，不伸缩
grow / grow-0 flex-grow: 1/0 控制是否放大
shrink / shrink-0 flex-shrink: 1/0 控制是否缩小
order-{n} order: n 改变显示顺序 (1~12, first, last, none)
self-start/end/center/stretch/baseline/auto align-self 单独控制某子项的交叉轴对齐

剩余空间按 1:2 分配

1
2
3
4
5
6
<!-- 固定宽度 + 剩余空间按 1:2 分配 -->
<div class="flex">
  <div class="flex-none w-48">固定侧栏</div>
  <div class="flex-1">1份</div>
  <div class="flex-[2]">2份</div>
</div>

Gap 间距

类名 说明
gap-{size} 行列统一间距，如 gap-4(1rem)
gap-x-{size} 仅列间距
gap-y-{size} 仅行间距

💡 提示：在 Flex 布局中优先使用 gap 代替子元素的 margin，可以避免首尾多余间距问题。

响应式前缀

所有上述类都支持响应式断点前缀：

1
2
3
4
5
6
<!-- 移动端竖排，桌面端横排 -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="flex-1">Item 1</div>
  <div class="flex-1">Item 2</div>
  <div class="flex-1">Item 3</div>
</div>

断点参考：sm(640px)、md(768px)、lg(1024px)、xl(1280px)、2xl(1536px)

最常见组合

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 完美居中 -->
<div class="flex items-center justify-center">...</div>

<!-- 底部固定按钮 -->
<div class="flex justify-end mt-auto">...</div>

<!-- 等高卡片列表 -->
<div class="flex flex-wrap gap-6">
  <div class="flex-1 min-w-[300px]">Card</div>
  <div class="flex-1 min-w-[300px]">Card</div>
  <div class="flex-1 min-w-[300px]">Card</div>
</div>

如需查看完整官方文档或交互式调试，可访问 Tailwind CSS Flexbox 文档。

Grid 布局

使用 grid 开启网格布局，grid-cols-* 定义列数：

1
2
3
4
5
6
<!-- 三列等宽 -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-gray-100 p-4">A</div>
  <div class="bg-gray-100 p-4">B</div>
  <div class="bg-gray-100 p-4">C</div>
</div>

也可以用 grid-cols-[200px_1fr] 这种方括号写法自定义列宽，适合侧边栏 + 内容区的经典布局。

1
2
<div class="grid grid-cols-3 gap-x-4 gap-y-3">
</div>

间距

Tailwind 用 p-* 和 m-* 设置内边距和外边距，数值对应 0.25rem 的倍数。

Padding（内边距）

p-* 设置四个方向的内边距，也可以按方向单独设置：

前缀 作用方向
p 四个方向
px 左右
py 上下
pt 上
pr 右
pb 下
pl 左

常用数值速查：

Class Properties
p-0 padding: 0px;
p-px padding: 1px;
p-0.5 padding: 0.125rem; /_ 2px _/
p-1 padding: 0.25rem; /_ 4px _/
p-1.5 padding: 0.375rem; /_ 6px _/
p-2 padding: 0.5rem; /_ 8px _/
p-2.5 padding: 0.625rem; /_ 10px _/
p-3 padding: 0.75rem; /_ 12px _/
p-3.5 padding: 0.875rem; /_ 14px _/
p-4 padding: 1rem; /_ 16px _/
p-5 padding: 1.25rem; /_ 20px _/
p-6 padding: 1.5rem; /_ 24px _/
p-8 padding: 2rem; /_ 32px _/
p-10 padding: 2.5rem; /_ 40px _/
p-12 padding: 3rem; /_ 48px _/
p-16 padding: 4rem; /_ 64px _/
p-20 padding: 5rem; /_ 80px _/
p-24 padding: 6rem; /_ 96px _/

以上数值同样适用于 px、py、pt、pr、pb、pl 前缀。

1
2
3
4
5
6
7
8
<!-- 四周统一内边距 -->
<div class="p-4">padding: 1rem</div>

<!-- 水平和垂直分别设置 -->
<div class="px-6 py-4">左右 1.5rem，上下 1rem</div>

<!-- 单独设置某一方向 -->
<div class="pt-8 pb-4 pl-6 pr-6">上 2rem，下 1rem，左右 1.5rem</div>

Margin（外边距）

m-* 设置四个方向的外边距，方向前缀与 padding 一致：

前缀 作用方向
m 四个方向
mx 左右
my 上下
mt 上
mr 右
mb 下
ml 左

常用数值速查：

Class Properties
m-0 margin: 0px;
m-px margin: 1px;
m-0.5 margin: 0.125rem; /_ 2px _/
m-1 margin: 0.25rem; /_ 4px _/
m-1.5 margin: 0.375rem; /_ 6px _/
m-2 margin: 0.5rem; /_ 8px _/
m-2.5 margin: 0.625rem; /_ 10px _/
m-3 margin: 0.75rem; /_ 12px _/
m-3.5 margin: 0.875rem; /_ 14px _/
m-4 margin: 1rem; /_ 16px _/
m-5 margin: 1.25rem; /_ 20px _/
m-6 margin: 1.5rem; /_ 24px _/
m-8 margin: 2rem; /_ 32px _/
m-10 margin: 2.5rem; /_ 40px _/
m-12 margin: 3rem; /_ 48px _/
m-16 margin: 4rem; /_ 64px _/
m-20 margin: 5rem; /_ 80px _/
m-24 margin: 6rem; /_ 96px _/
m-auto margin: auto;

Margin 支持负值，用 - 前缀表示：

Class Properties
-m-1 margin: -0.25rem; /_ -4px _/
-m-2 margin: -0.5rem; /_ -8px _/
-m-4 margin: -1rem; /_ -16px _/
-m-8 margin: -2rem; /_ -32px _/ 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 四周统一外边距 -->
<div class="m-4">margin: 1rem</div>

<!-- 水平居中（块级元素） -->
<div class="mx-auto w-96">左右 auto 实现水平居中</div>

<!-- 上下间隔 -->
<div class="my-8">上下各 2rem 外边距</div>

<!-- 负边距（常用于抵消父元素 padding） -->
<div class="p-4">
  <div class="-mx-4 bg-gray-100 p-4">负边距撑满父容器</div>
</div>

<!-- 单方向设置 -->
<h2 class="mt-8 mb-4">标题上方留白多，下方留白少</h2>

space 间距

space-x-* 和 space-y-* 可以在不使用 gap 的情况下给子元素统一加间距（原理是给除第一个子元素外的元素添加 margin）：

1
2
3
4
5
6
7
8
9
10
11
<div class="flex space-x-4">
  <button>按钮 1</button>
  <button>按钮 2</button>
  <button>按钮 3</button>
</div>

<div class="space-y-4">
  <p>段落 1</p>
  <p>段落 2</p>
  <p>段落 3</p>
</div>

space-x-reverse 和 space-y-reverse 用于反转排列时修正间距方向。