Tailwind CSS 布局

布局是任何网页设计的骨架。Tailwind 提供了一整套强大的工具类来控制元素的布局，从显示方式到定位，再到层级关系。本章将介绍最核心的布局工具。

Display

display 属性决定了元素的呈现方式。Tailwind 为所有标准的 display 值提供了工具类。

block: 元素会占据一整行，宽度默认为父元素的 100%。
inline-block: 元素像文本一样排列，但可以设置宽度、高度和边距。
inline: 元素像文本一样排列，但不能设置宽高。
flex: 启用 Flexbox 布局模型（详见“Flex & Grid”章节）。
grid: 启用 Grid 布局模型（详见“Flex & Grid”章节）。
hidden: 将元素完全隐藏，等同于 display: none;。

html

<div class="flex ...">...</div>

Position

position 属性用于控制元素的定位方式。

static: 默认值，元素遵循正常的文档流。
relative: 元素相对于其正常位置进行定位，常作为 absolute 定位元素的容器。
absolute: 元素相对于其最近的、非 static 定位的祖先元素进行定位。
fixed: 元素相对于浏览器视口进行定位，即使页面滚动，它也会停留在同一位置。
sticky: 粘性定位，是 relative 和 fixed 的混合体。元素在跨越特定阈值前为相对定位，之后为固定定位。

html

<div class="relative h-32 ...">
  <div class="absolute bottom-0 left-0 ...">...</div>
</div>

Top / Right / Bottom / Left

当元素的 position 不是 static 时，你可以使用这些工具类来控制其位置。

top-0, left-0, right-0, bottom-0: 将元素边缘对齐到其定位父元素的边缘。
inset-0: top-0 left-0 right-0 bottom-0 的简写。
inset-x-0: left-0 right-0 的简写。
inset-y-0: top-0 bottom-0 的简写。

Tailwind 为主题中的所有间距单位都提供了这些工具类（如 top-4），并且支持任意值（如 top-[23px]）。

Z-Index

z-index 属性控制元素在 Z 轴上的堆叠顺序。拥有更高 z-index 值的元素会显示在拥有较低值的元素之上。

z-0, z-10, z-20, z-30, z-40, z-50
z-auto

html

<div class="relative">
  <div class="absolute z-10 ...">...</div>
  <div class="absolute z-20 ...">I'm on top</div>
</div>

Overflow

overflow 属性用于控制当元素内容超出其容器大小时发生的情况。

overflow-auto: 如果需要，浏览器会添加滚动条。
overflow-hidden: 超出部分的内容会被裁剪掉，不可见。
overflow-visible: 默认值，内容会溢出容器显示。
overflow-scroll: 无论内容是否溢出，始终显示滚动条。
overflow-x-scroll, overflow-y-auto: 单独控制水平或垂直方向的溢出。

html

<!-- 一个可以垂直滚动的列表 -->
<div class="h-64 overflow-y-auto">
  <!-- ... 很多内容 ... -->
</div>

掌握这些核心布局工具，是使用 Tailwind 构建任何复杂网页结构的基础。