22. 尺寸控制：width与height

本节目标：掌握 Tailwind 中所有尺寸相关工具类，能灵活控制元素的宽度、高度、最小/最大尺寸，理解不同尺寸单位的适用场景。

width：宽度

Tailwind 的宽度工具类非常丰富，从固定值到百分比到视口单位都有。

固定间距值

跟 padding/margin 共用间距比例：

<div class="w-4">16px</div>
<div class="w-8">32px</div>
<div class="w-16">64px</div>
<div class="w-32">128px</div>
<div class="w-64">256px</div>

百分比分数

<div class="w-1/2">50%</div>
<div class="w-1/3">33.33%</div>
<div class="w-2/3">66.67%</div>
<div class="w-1/4">25%</div>
<div class="w-3/4">75%</div>
<div class="w-full">100%</div>

分数从 1/2 到 1/12 都有，覆盖了常见的分栏需求。

视口单位

<div class="w-screen">100vw，视口宽度</div>
<div class="w-1/2">父元素宽度的 50%</div>

Note

w-screen 是 100vw，但注意滚动条。如果页面有垂直滚动条，w-screen 可能导致水平溢出。v4 中可以用 w-dvw（动态视口宽度）避免这个问题。

内容自适应

<div class="w-auto">由内容决定（默认）</div>
<div class="w-fit">收缩到内容宽度</div>
<div class="w-max">取内容的最大固有宽度</div>
<div class="w-min">取内容的最小固有宽度</div>

w-fit 特别实用——让元素像 inline-block 一样收缩到内容宽度，但保持块级特性。

最大宽度

max-w-* 限制元素的最大宽度，常用于内容区域：

<div class="max-w-sm">小（384px）</div>
<div class="max-w-md">中（448px）</div>
<div class="max-w-lg">大（512px）</div>
<div class="max-w-xl">超大（576px）</div>
<div class="max-w-2xl">2xl（672px）</div>
<div class="max-w-4xl">4xl（896px）</div>
<div class="max-w-6xl">6xl（1152px）</div>
<div class="max-w-7xl">7xl（1280px）</div>
<div class="max-w-full">100%</div>
<div class="max-w-none">无限制</div>

Tip

文章正文区域用 max-w-2xl 或 max-w-3xl 是最佳实践。太宽的文字行会降低可读性，一般每行 60-75 个字符最舒服。

height：高度

高度工具类的命名跟宽度类似：

<div class="h-4">16px</div>
<div class="h-8">32px</div>
<div class="h-16">64px</div>
<div class="h-full">100% 父元素高度</div>
<div class="h-screen">100vh</div>
<div class="h-auto">内容自适应</div>
<div class="h-fit">收缩到内容高度</div>

视口高度

<div class="h-screen">占满整个视口</div>
<div class="h-dvh">动态视口高度（v4 新增）</div>
<div class="h-svh">小视口高度</div>
<div class="h-lvh">大视口高度</div>

Note

h-dvh（dynamic viewport height）解决了移动端浏览器地址栏伸缩导致的 100vh 溢出问题。如果你的全屏布局在移动端被截断，试试 h-dvh。

百分比高度的坑

h-full 只有在父元素有明确高度时才有效。如果父元素的高度也是由内容撑起的，h-full 不会生效：

<!-- 不生效：父元素没有固定高度 -->
<div>
  <div class="h-full">我想占满父元素</div>
</div>

<!-- 生效：父元素有固定高度 -->
<div class="h-64">
  <div class="h-full">我占满了 256px</div>
</div>

min-* 和 max-* 尺寸

min-width / min-height

<div class="min-w-0">最小宽度 0（允许收缩）</div>
<div class="min-w-48">最小宽度 12rem</div>
<div class="min-h-0">最小高度 0</div>
<div class="min-h-screen">最小高度占满视口</div>

min-w-0 在 flex 布局中特别重要。flex 项目的默认 min-width 是 auto，意味着它不会收缩到内容以下。加了 min-w-0 才能让它正常收缩：

<div class="flex">
  <div class="min-w-0 flex-1">
    <!-- 长文本现在可以正常截断 -->
    <p class="truncate">很长很长很长的文字...</p>
  </div>
</div>

max-width / max-height

<div class="max-w-xs">最大宽度 320px</div>
<div class="max-w-prose">适合阅读的宽度（约 65ch）</div>
<div class="max-h-64">最大高度 256px</div>
<div class="max-h-screen">最大高度视口</div>

max-w-prose 是排版利器，它基于字符数（约 65ch）限制宽度，最适合文章正文。

逻辑属性（v4 新特性）

v4 引入了逻辑属性工具类，更好地支持 RTL（从右到左）语言：

物理属性	逻辑属性
`w-*`	`inline-*`
`h-*`	`block-*`
`ml-` / `mr-`	`ms-` / `me-`
`pl-` / `pr-`	`ps-` / `pe-`

<!-- 逻辑属性：inline 方向（水平 LTR） -->
<div class="inline-8">inline 尺寸 32px</div>
<div class="block-16">block 尺寸 64px</div>

Note

逻辑属性主要面向多语言项目。如果你的项目只有中文/英文，用物理属性（w-*、h-*）就够了。

等宽高：size-*

v4 新增的 size-* 同时设置宽度和高度：

<div class="size-8">8×8 的正方形</div>
<div class="size-12">12×12 的正方形</div>
<div class="size-16">16×16 的正方形</div>

等价于同时写 w-8 h-8，但更简洁。

实际应用：全屏布局

<div class="flex flex-col h-screen">
  <header class="h-16 bg-gray-800 text-white">顶部导航</header>
  <main class="flex-1 overflow-auto">主内容区</main>
  <footer class="h-12 bg-gray-100">底部信息</footer>
</div>

h-screen → 整体占满视口
h-16 / h-12 → 固定高度的头部和底部
flex-1 → 主区域自动填满剩余空间
overflow-auto → 内容超出时滚动

实际应用：响应式图片容器

<div class="w-full max-w-md mx-auto">
  <img 
    src="photo.jpg" 
    alt="描述"
    class="w-full h-auto rounded-lg"
  />
</div>

w-full → 占满父容器
max-w-md → 但不超过 448px
h-auto → 高度自动，保持图片比例

本节小结

w-* / h-* → 宽度和高度
w-1/2、w-full → 百分比和分数
w-screen / h-screen → 视口单位
min-w-* / max-w-* → 最小/最大宽度
min-h-* / max-h-* → 最小/最大高度
w-fit / h-fit → 收缩到内容
size-* → 同时设置宽高（v4 新增）
inline-* / block-* → 逻辑属性