Tailwind CSS 尺寸控制

控制元素的尺寸（宽度和高度）是布局的基础。Tailwind 提供了一套丰富且一致的工具类来管理元素的尺寸，支持固定值、百分比以及基于视口的单位。

Width (宽度)

使用 w-{size} 工具类来设置元素的宽度。

基于比例尺的宽度

Tailwind 的默认主题包含一个从 0 到 96 的数字比例尺，以及一些特殊的值。这个比例尺与间距系统共享。

• w-0: width: 0px;
• w-px: width: 1px;
• w-4: width: 1rem; (16px)
• w-64: width: 16rem; (256px)

百分比宽度

Tailwind 还提供了一套基于百分比的宽度工具类，用于创建流式布局。

• w-1/2: width: 50%;
• w-1/3: width: 33.333333%;
• w-2/5: width: 40%;
• w-full: width: 100%;

基于视口的宽度

• w-screen: width: 100vw; (元素的宽度等于视口宽度)

特殊宽度

• w-auto: width: auto; (浏览器自动计算宽度)
• w-min: width: min-content; (宽度收缩到内容的最小宽度)
• w-max: width: max-content; (宽度扩展到内容的最大宽度)
• w-fit: width: fit-content;

<div class="w-96 ...">I'm 96 units wide.</div>
<div class="w-1/2 ...">I'm half of my parent's width.</div>

Height (高度)

使用 h-{size} 工具类来设置元素的高度。高度的工具类与宽度非常相似。

基于比例尺的高度

• h-4: height: 1rem;
• h-64: height: 16rem;

百分比高度

• h-full: height: 100%; (注意：父元素需要有明确的高度定义)

基于视口的高度

• h-screen: height: 100vh; (元素的高度等于视口高度)

特殊高度

• h-auto: height: auto;

<div class="h-screen bg-gray-100">
  <!-- 这个 div 会占满整个屏幕的高度 -->
</div>

Min/Max Sizing

有时你不想设置一个固定的尺寸，而是想限制元素的最小或最大尺寸。

Min-Width

使用 min-w-{size} 来设置元素的最小宽度。

• min-w-0: min-width: 0px;
• min-w-full: min-width: 100%;
• min-w-min: min-width: min-content;

Max-Width

使用 max-w-{size} 来设置元素的最大宽度。这在创建响应式的、有内容宽限制的容器时非常有用。

• max-w-xs: max-width: 20rem;
• max-w-7xl: max-width: 80rem;
• max-w-full: max-width: 100%;
• max-w-screen-lg: max-width: 1024px; (基于断点)

<div class="max-w-4xl mx-auto p-8">
  <!-- 这个容器最大宽度为 4xl，并且水平居中 -->
  ... content ...
</div>

Min/Max-Height

同样，min-h-{size} 和 max-h-{size} 用于控制最小和最大高度。

• min-h-screen: 确保元素至少和屏幕一样高，常用于创建“页脚置底”布局。
• max-h-96: 限制元素最大高度为 96 个单位，常与 overflow-y-auto 结合使用创建可滚动区域。

通过组合使用这些尺寸工具类，你可以精确地控制页面上每个元素的尺寸和响应式行为。