Tailwind CSS V4 尺寸完全指南（宽、高、最大最小尺寸、动态尺寸）

尺寸是页面布局的基础，用来控制元素的宽度、高度，以及最大/最小宽高限制。Tailwind CSS V4 在尺寸系统上做了不少增强：支持无上限预设尺寸、更灵活的方括号任意值、原生支持逻辑尺寸，配合 @max-* 断点实现响应式尺寸，写法更自由。

本文讲解宽高、最大最小尺寸、视口尺寸、逻辑尺寸、任意值语法、业务模板与踩坑要点，文末附带完整可运行 Demo。

一、V4 尺寸系统主要升级

1. 无上限预设尺寸：不再局限于 V3 固定的预设档位，w-100、h-120 这类大尺寸可以直接使用，无需扩展主题。
2. 逻辑尺寸属性：支持 w-inline、w-block 这类逻辑方向尺寸，适配多语言、竖排文字场景。
3. 任意值语法更稳定：方括号 w-[420px]、h-[30vh] 原生支持，支持 px、rem、vh、vw、% 等单位。
4. 变体规则变更：V4 变体从左向右生效，和 V3 相反，写响应式尺寸时要注意顺序。
5. 原生支持视口单位：w-screen、h-screen 保留，同时支持动态视口单位 h-svh / h-dvh。

二、宽度（width）

1. 基础预设宽度

w-0        /* 宽度 0 */
w-1        /* 0.25rem */
w-full     /* width:100%，占满父容器宽度 */
w-screen   /* width:100vw，占满屏幕视口宽度 */
w-min      /* width: min-content，内容最小宽度 */
w-max      /* width: max-content，内容最大宽度 */
w-fit      /* width: fit-content，自适应内容宽度 */

数字规则：w-N，N 代表 0.25rem。V4 可以直接写 w-24、w-50、w-100，不需要额外配置。

2. 百分比简写

w-1/2    /* 50% */
w-1/3    /* 33.333% */
w-2/3    /* 66.666% */
w-1/4    /* 25% */
w-3/4    /* 75% */

支持 1/5 ~ 1/12 等分比例。

3. 任意自定义宽度（方括号语法）

适合预设值没有的尺寸，直接写单位：

w-[420px]
w-[30rem]
w-[50vw]
w-[calc(100%-2rem)]

三、高度（height）

1. 基础预设高度

h-0
h-1
h-full    /* height:100%，继承父容器高度（父必须有高度才生效） */
h-screen  /* height:100vh，视口高度 */
h-svh     /* 小视口高度，移动端规避浏览器地址栏（V4推荐移动端） */
h-dvh     /* 动态视口高度 */
h-min
h-max
h-fit

⚠️ 高频坑：h-full 只有父元素设置高度后才生效，父高度是内容自适应时，h-full 不会生效。

四、最大 & 最小尺寸（max / min）

用来限制元素尺寸上限和下限，做弹性卡片、响应式容器必备。

最大宽高

max-w-full
max-w-screen-lg
max-w-2xl
max-h-full
max-h-screen

最小宽高

min-w-0
min-w-full
min-h-0
min-h-screen
min-h-[400px]

业务常用：卡片设置 min-h-[180px]，保证内容少时卡片不会过小。

五、V4 逻辑尺寸（适配国际化排版）

逻辑尺寸不区分物理上下左右，基于阅读流向（inline/block），适合多语言网站。

w-inline-64    /* inline方向尺寸 */
w-block-64
min-w-inline-40
max-w-block-96

六、响应式尺寸写法（V4变体）

V4 变体从左往右生效，写法示例：

<div class="w-full md:w-1/2 lg:w-1/3">
  小屏100%，中屏50%，大屏33.33%
</div>

搭配 V4 的 @max-* 向下断点：

<div class="w-1/3 @max-lg:w-1/2 @max-md:w-full">
  大屏1/3，≤lg宽度1/2，≤md宽度100%
</div>

七、常用业务模板

<!-- 全屏页面容器 -->
<div class="min-h-screen w-full"></div><!-- 卡片，限制最大宽度，最小高度 -->
<div class="w-full max-w-md min-h-[180px]"></div>
<!-- 两栏布局，右侧自适应 -->
<div class="flex">
  <div class="w-64 flex-none">侧边栏固定宽度</div>
  <div class="flex-1">主内容自适应</div>
</div>
<!-- 正方形盒子 -->
<div class="w-40 h-40"></div>

八、避坑清单

• ❌ h-full 父元素没有设置高度，高度不生效。
• ❌ 百分比宽高是相对于父元素，不是屏幕。全屏高度优先使用 h-screen / h-svh。
• ✅ 移动端页面高度优先使用 h-svh，解决移动端地址栏遮挡问题。
• ✅ 不确定尺寸，优先 max-w 限制上限，不要写死固定宽度，提升响应式兼容性。
• ✅ 多语言项目，优先使用逻辑尺寸属性。
• ✅ V4 超大尺寸直接写 w-80，不需要去配置 theme 扩展。

九、完整可运行Demo（V4 CDN）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind V4 尺寸 Demo</title>
  <script src="[https://cdn.tailwindcss.com](https://cdn.tailwindcss.com)"></script>
  <style type="text/tailwindcss">
    @theme {
      --color-size-demo: #2563eb;
    }
  </style>
</head>
<body class="p-6 bg-slate-100">
  <h1 class="text-3xl font-bold text-center mb-10">V4 尺寸系统演示</h1>

  <!-- 1. w-full 满宽 -->
  <div class="w-full p-4 mb-6 bg-blue-500 text-white rounded-lg">
    w-full 占满父容器宽度
  </div>

  <!-- 2. 百分比宽度 1/2 -->
  <div class="w-1/2 p-4 mb-6 bg-emerald-500 text-white rounded-lg">
    w-1/2 父容器的50%宽度
  </div>

  <!-- 3. 固定尺寸 + 最大宽度限制 -->
  <div class="w-80 max-w-full p-4 mb-6 bg-orange-500 text-white rounded-lg">
    w-80，max-w-full 防止小屏溢出
  </div>

  <!-- 4. 任意值方括号语法 -->
  <div class="w-[320px] min-h-[120px] p-4 mb-6 bg-rose-500 text-white rounded-lg">
    w-[320px] min-h-[120px] 自定义任意尺寸
  </div>

  <!-- 5. 响应式尺寸 @max 断点 -->
  <div class="w-1/3 @max-lg:w-1/2 @max-md:w-full p-4 bg-slate-700 text-white rounded-lg">
    大屏1/3，中等屏幕1/2，小屏幕100%（V4 @max 断点）
  </div>
</body>
</html>

总结

Tailwind CSS V4 的尺寸系统更加自由，不再被预设值限制。开发记住：固定尺寸用 w-N/h-N，百分比用 w-1/2，自定义尺寸用方括号语法，限制范围用 max-w / min-h，移动端全屏高度优先 h-svh。响应式布局可以搭配 @max-* 断点，实现从大屏到小屏平滑降级。

Tailwind CSS V4 尺寸速查表

配套本篇文章，快速查阅，基准：w-4 = 1rem，V4支持任意数字，无需配置扩展

宽度 w-*

高度 h-*

最大尺寸 max-*

最小尺寸 min-*

V4逻辑尺寸

常用模板

<!-- 全屏页面 -->
<div class="min-h-screen w-full"></div><!-- 卡片带最大宽度限制 -->
<div class="w-full max-w-md min-h-[180px]"></div>
<!-- 响应式尺寸 V4 @max -->
<div class="w-1/3 @max-lg:w-1/2 @max-md:w-full"></div>

速记要点

1. 固定尺寸：w-xx h-xx，V4支持大数字如w-100
2. 比例宽度：w-1/2
3. 自定义值：方括号语法 w-[xxx]
4. 做约束：max-w、min-h 防止布局崩坏
5. 移动端全屏高度优先 h-svh