掌握 Tailwind CSS 中宽度（Width）和高度（Height）的核心类名，包括固定值、百分比、视口单位及自动值。
理解 min-w、max-w、min-h、max-h 的作用，学会利用约束性尺寸打造自适应布局。
熟悉 Tailwind 预设的最大宽度断点（如 max-w-sm, max-w-lg），快速构建符合设计规范的容器。
能够灵活运用 w-fit、w-min、w-max 等现代 CSS 特性，解决内容驱动的尺寸难题。
通过实战示例，学会组合使用尺寸类名，实现从全屏背景到微缩图标的各种场景。
Width
宽度是布局中最基础的属性之一。Tailwind CSS 提供了从绝对像素到相对单位的完整映射。
基于默认的间距标尺（1 = 0.25rem = 4px）：
w-0: 宽度为 0。
w-px: 宽度为 1px（常用于细边框或分割线）。
w-4: 宽度为 1rem (16px)。
w-64: 宽度为 16rem (256px)，常用于侧边栏。
w-full: width: 100%。元素填满父容器宽度。
w-1/2, w-1/3, w-1/4: 分别占据父容器的 50%, 33.33%, 25%。支持直到 w-11/12 的分数。
w-auto: width: auto。恢复元素的默认宽度行为（常用于覆盖之前的固定宽度）。
w-screen: width: 100vw。元素宽度等于视口宽度。注意：若父元素有 padding，可能导致横向滚动条出现。
这些类名利用 CSS 的 fit-content, min-content, max-content 特性：
w-fit: width: fit-content。元素宽度仅包裹其内容，类似 inline-block 的效果但保持块级特性。
w-min: width: min-content。元素收缩到其内容的最小可能宽度（例如，长单词不换行时的最短宽度）。
w-max: width: max-content。元素扩展到其内容的最大可能宽度（例如，所有文本不换行时的总宽度）。
多样化的宽度应用场景
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Tailwind Auto Cols 对比演示</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="space-y-6 p-6 bg-gray-50">
<!-- 场景 1: 百分比与固定宽度 -->
<div class="bg-white p-4 rounded shadow">
<h3 class="font-bold mb-2">百分比布局</h3>
<div class="w-full bg-gray-200 h-8 mb-2 flex items-center justify-center text-xs">w-full (100%)</div>
<div class="w-1/2 bg-blue-100 h-8 mb-2 flex items-center justify-center text-xs">w-1/2 (50%)</div>
<div class="w-1/4 bg-green-100 h-8 flex items-center justify-center text-xs">w-1/4 (25%)</div>
</div>
<!-- 场景 2: 视口宽度 (谨慎使用) -->
<div class="bg-yellow-50 p-4 rounded border border-yellow-200">
<h3 class="font-bold mb-2">视口宽度</h3>
<p class="text-sm text-gray-600 mb-2">以下红色条宽度始终等于浏览器窗口宽度：</p>
<div class="w-screen bg-red-200 h-10 flex items-center px-4 text-xs whitespace-nowrap overflow-hidden">
w-screen (100vw) - 注意可能引起横向滚动
</div>
</div>
<!-- 场景 3: 内容驱动宽度 (Fit/Min/Max) -->
<div class="bg-white p-4 rounded shadow">
<h3 class="font-bold mb-2">内容驱动宽度</h3>
<div class="space-y-2">
<!-- w-fit: 包裹内容 -->
<div class="w-fit bg-purple-100 p-2 text-sm">
我是 w-fit，宽度刚好包裹文字。
</div>
<!-- w-max: 强制不换行，宽度最大化 -->
<div class="w-max bg-orange-100 p-2 text-sm">
我是 w-max，即使很长我也不换行，宽度由最长行决定。
</div>
<!-- w-min: 收缩到最小 (演示效果需特定内容，此处仅为示例) -->
<div class="w-min bg-teal-100 p-2 text-sm">
我是 w-min
</div>
</div>
</div>
</div>
</body>
</html>Height
高度控制通常比宽度更复杂，因为许多元素默认高度由内容决定（auto）。
固定与基础: h-0, h-px, h-4 (16px), h-96 (24rem/384px)。
相对与视口:
h-full: height: 100%。注意：父元素必须有明确的高度，否则无效。
h-screen: height: 100vh。元素高度等于视口高度，常用于全屏落地页（Hero Section）。
h-1/2, h-1/3: 占据父元素高度的分数。
自动: h-auto。默认行为，高度随内容撑开。
全屏布局与固定高度容器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Tailwind Auto Cols 对比演示</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- 场景 1: 全屏 Hero 区域 -->
<section
class="w-full h-screen bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white">
<div class="text-center">
<h1 class="text-5xl font-bold mb-4">欢迎来到未来</h1>
<p class="text-xl">这是一个 h-screen 的全屏示例</p>
</div>
</section>
<!-- 场景 2: 固定高度的卡片内容区 (带滚动) -->
<div class="max-w-md mx-auto mt-8 bg-white rounded shadow overflow-hidden">
<div class="bg-gray-100 p-4 font-bold">消息列表 (固定高度)</div>
<!-- h-64 固定高度，配合 overflow-y-auto 实现内部滚动 -->
<div class="h-64 overflow-y-auto p-4 space-y-3">
<!-- 生成一些假数据 -->
<div class="p-2 bg-gray-50 rounded">消息 1: 系统启动成功...</div>
<div class="p-2 bg-gray-50 rounded">消息 2: 用户登录...</div>
<div class="p-2 bg-gray-50 rounded">消息 3: 数据同步中...</div>
<div class="p-2 bg-gray-50 rounded">消息 4: 完成备份...</div>
<div class="p-2 bg-gray-50 rounded">消息 5: 检测到更新...</div>
<div class="p-2 bg-gray-50 rounded">消息 6: 清理缓存...</div>
<div class="p-2 bg-gray-50 rounded">消息 7: 优化完成...</div>
<div class="p-2 bg-gray-50 rounded">消息 8: 准备休眠...</div>
</div>
<div class="p-4 bg-gray-50 text-xs text-gray-500 text-center">
底部固定区域
</div>
</div>
</body>
</html>在现代响应式设计中，限制元素的最大 / 最小尺寸往往比设置固定尺寸更重要。这能确保布局在小屏幕上不破裂，在大屏幕上不松散。
Tailwind 提供了一系列语义化的最大宽度类名，对应常见的容器断点：
max-w-xs: 320px (手机小屏)
max-w-sm: 384px (手机大屏)
max-w-md: 448px (平板小屏)
max-w-lg: 512px (平板大屏)
max-w-xl: 576px
max-w-2xl ... max-w-7xl: 逐步增大的桌面端容器。
max-w-full: 100%。防止图片等媒体溢出容器。
max-w-none: 移除最大宽度限制。
min-w-0: 非常重要！在 Flex 或 Grid 子元素中，默认最小宽度可能是 auto（导致内容溢出），设置为 min-w-0 允许子元素收缩到 0，从而正确截断文本或适应容器。
min-h-0: 同理，允许 Flex 子元素在垂直方向收缩。
min-h-screen: min-height: 100vh。常用于确保页面内容少时也能填满整个屏幕（Footer 贴底布局）。
响应式容器与防溢出技巧
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Tailwind Auto Cols 对比演示</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="p-8 bg-gray-50 space-y-8">
<!-- 场景 1: 语义化最大宽度容器 (博客文章标准写法) -->
<article class="mx-auto bg-white p-8 rounded shadow max-w-prose lg:max-w-4xl">
<h2 class="text-3xl font-bold mb-4">文章标题</h2>
<p class="mb-4">
这段文字被限制在 <code>max-w-prose</code> 内，保证阅读体验最佳。
在大屏幕上，它不会拉得太长；在小屏幕上，它会自动收缩。
</p>
<p>
这是第二段内容。注意看右侧的留白，随着窗口变窄，留白会自动减小。
</p>
</article>
<!-- 场景 2: 防止图片溢出 -->
<div class="max-w-sm mx-auto bg-white p-4 rounded shadow">
<h3 class="font-bold mb-2">图片容器 (max-w-sm)</h3>
<!-- max-w-full 确保图片不超过父容器宽度 -->
<img src="https://zhanweifu.com/600x400/cccccc/ffffff" alt="大图片" class="w-full max-w-full h-auto rounded">
<p class="text-xs text-gray-500 mt-2">原图 600px，但在容器中自动缩放。</p>
</div>
<!-- 场景 3: Flex 子元素收缩陷阱 (min-w-0) -->
<div class="flex bg-white rounded shadow overflow-hidden">
<!-- 左侧固定 -->
<div class="w-48 bg-blue-50 p-4 shrink-0">
<p class="font-bold">侧边栏</p>
</div>
<!-- 右侧自适应，包含长文本 -->
<!-- 关键点：添加 min-w-0 以便内部文本可以换行截断，否则可能撑破容器 -->
<div class="flex-1 p-4 min-w-0">
<h3 class="font-bold">内容区</h3>
<!-- 长文本测试 -->
<p class="text-gray-600 truncate">
这是一段非常非常长的文本，如果没有 min-w-0，在某些 Flex 配置下它可能会溢出容器而不是换行或被截断。
</p>
<div class="mt-2 p-2 bg-gray-100 text-xs">
当前容器已正确收缩。
</div>
</div>
</div>
<!-- 场景 4: Footer 贴底 (min-h-screen) -->
<div class="min-h-screen flex flex-col bg-gray-100 mt-8 rounded">
<header class="p-4 bg-white shadow mb-4">Header</header>
<main class="flex-1 p-4">
<p>内容很少，但因为有 min-h-screen，Footer 依然会被推到最底部。</p>
</main>
<footer class="p-4 bg-white text-center text-gray-500">Footer (Sticky)</footer>
</div>
</div>
</body>
</html>