tailwindcss-sizing

Tailwind CSS v4.3 尺寸工具完整参考：宽度（`w-*`、`w-screen`、`w-full`、`w-auto`、`w-min`/`w-max`/`w-fit`）、高度（`h-*`、`h-screen`、`h-full`，以及可适配浏览器界面的动态视口高度 `h-dvh`）、最小/最大尺寸约束（`min-w-*`/`max-w-*`/`min-h-*`/`max-h-*`）、逻辑尺寸（`inline-*`/`block-*` 及其最小/最大形式，v4.2 起支持），以及宽高比（`aspect-square`、`aspect-video`、自定义比例）。

还包括常见组合模式：全屏容器、限制内容宽度、图片/视频容器和侧边栏布局。

Tailwind CSS 尺寸工具

Tailwind CSS v4.3 尺寸工具综合指南，涵盖宽度、高度、约束和宽高比控制。

宽度工具

基本宽度类

• w-0 - w-96：从 0 到 384px 的固定宽度
• w-full - 100% 宽度
• w-screen - 视口宽度的 100%
• w-auto - 自动宽度
• w-min - min-content
• w-max - max-content
• w-fit - fit-content

响应式宽度

在不同断点应用不同宽度：

<div class="w-full md:w-1/2 lg:w-1/3">
  Responsive width
</div>

高度工具

基本高度类

• h-0 - h-96：从 0 到 384px 的固定高度
• h-full - 100% 高度
• h-screen - 视口高度的 100%（100vh）
• h-auto - 自动高度
• h-min - min-content
• h-max - max-content
• h-fit - fit-content
• h-dvh - 动态视口高度（v3.4 起支持）

动态视口高度（h-dvh）

h-dvh 工具使用动态视口高度，并会考虑浏览器界面元素：

<div class="h-dvh">
  Full dynamic viewport height
</div>

逻辑尺寸（v4.2 起支持）

适配书写模式的尺寸：inline-*（inline-size）和 block-*（block-size），以及 min-inline-*、max-inline-*、min-block-*、max-block-*。这些类支持间距比例、分数、full、screen、auto，以及（对 inline-* 而言）容器比例（inline-sm、inline-xl 等）。

<div class="block-64 inline-full max-block-screen max-inline-lg min-block-24 min-inline-0">
  Sized along the inline/block axes
</div>

最小/最大宽度

最小宽度

• min-w-0 - 最小宽度：0
• min-w-full - 最小宽度：100%
• min-w-min - 最小宽度：min-content
• min-w-max - 最小宽度：max-content
• min-w-fit - 最小宽度：fit-content

最大宽度

• max-w-none - 最大宽度：none
• max-w-full - 最大宽度：100%
• max-w-screen-sm - 基于断点
• max-w-screen-md
• max-w-screen-lg
• max-w-screen-xl
• max-w-screen-2xl

最小/最大高度

最小高度

• min-h-0 - 最小高度：0
• min-h-full - 最小高度：100%
• min-h-screen - 最小高度：100vh
• min-h-min - 最小高度：min-content
• min-h-max - 最小高度：max-content
• min-h-fit - 最小高度：fit-content

最大高度

• max-h-none - 最大高度：none
• max-h-full - 最大高度：100%
• max-h-screen - 最大高度：100vh
• max-h-min - 最大高度：min-content
• max-h-max - 最大高度：max-content
• max-h-fit - 最大高度：fit-content

宽高比

常见宽高比

• aspect-auto - auto
• aspect-square - 1 / 1
• aspect-video - 16 / 9

自定义宽高比

<div class="aspect-[3/2]">
  Image container
</div>

常见模式

全屏容器

<div class="w-screen h-dvh bg-white">
  Full screen content
</div>

限制宽度的容器

<div class="max-w-4xl mx-auto w-full px-4">
  Content with max width and padding
</div>

图片容器

<div class="w-full h-auto">
  <img src="image.jpg" alt="description" class="w-full h-auto object-cover" />
</div>

视频容器

<div class="w-full aspect-video bg-black">
  <video src="video.mp4" class="w-full h-full"></video>
</div>

侧边栏布局

<div class="flex min-h-screen">
  <aside class="w-64 h-screen overflow-auto">
    Sidebar
  </aside>
  <main class="flex-1">
    Content
  </main>
</div>

参考资料

• 宽度文档
• 高度文档
• 最小宽度文档
• 最大宽度文档
• 最小高度文档
• 最大高度文档
• 宽高比文档