布局直觉

你将学会什么

用 flex 或 grid 控制页面的大方向
用 gap、p、m 控制区块留白
用 rounded、border、shadow 表达组件层级
按「结构 → 间距 → 视觉」的顺序读懂一串原子类

正文

Tailwind 最强的地方，不是“记住所有类名”，而是用同一套工具类快速表达布局。最常见的页面结构可以用这几个思路建立：

大方向用 flex 或 grid 控制
区块留白用 gap、p、m 控制
组件边界用 rounded、border、shadow 表达层级

一个最小页面骨架可以这样写：

<div class="flex justify-between items-center p-4 border-b">
  <h1 class="text-lg font-semibold">课程站</h1>
  <nav class="flex gap-4 text-sm">
    <a href="#">课程</a>
    <a href="#">项目</a>
  </nav>
</div>

这里 flex justify-between 负责左右布局，gap-4 负责导航项之间的间距，border-b 负责给标题栏一个边界。初学者最容易犯的错，是看到别人写一串原子类就直接抄，但分不清哪一部分负责布局、哪一部分负责视觉。只要按“结构 → 间距 → 视觉”这个顺序读，很多页面会变好懂很多。

动手练

知识检查

先自己回答，再看答案：

页面的大方向布局应该优先用哪一类工具类控制？
gap 和 m 分别负责什么？
阅读一串原子类时，推荐的顺序是什么？

参考答案

用 flex 或 grid 控制大方向，而不是靠每个元素单独加边距。
gap 控制容器内元素之间的间距，m 控制单个元素的外边距。
按“结构 → 间距 → 视觉”的顺序读，先看懂布局再关心颜色与阴影。

本节小结

布局三件套：flex/grid 管方向，gap/p/m 管留白，rounded/border/shadow 管层级
读类名的顺序是“结构 → 间距 → 视觉”
先搭骨架再补视觉，比一开始纠结颜色值快得多

布局直觉小测

1 / 3

页面的大方向布局应该用什么控制？

每个元素单独加边距flex 或 grid绝对定位大量使用 !important