在实际开发中，我们不仅要定义元素的宽高，有时还要为其宽高定义一个 “边界”，使得元素宽度或高度不超过某个值。
Tailwind CSS 最大最小尺寸语法
在 Tailwind CSS 中，我们可以使用 “max-*” 相关类名来定义元素的最大尺寸，也可以使用 “min-*” 相关类名来定义元素的最小尺寸。
语法：
max-{size}
min-{size}说明：
任意 Tailwind CSS 宽度类名和高度类名前面加上 “max-” 或 “min-” 前缀，就表示限制其最大尺寸，比如：
max-w-10：限制最大宽度为 40px。max-w-[200px]：限制最大宽度为 200px。max-h-10：限制最大高度为 40px。max-h-[200px]：限制最大高度为 200px。
Tailwind CSS 最大宽度与最小高度
在实际开发中，最常见的是 “最大宽度” 和 “最小高度”。接下来，我们来重点看一下这两个。
1. 最大宽度
为了方便横向排版设计，Tailwind CSS 专门提供了一套用于限制 “最大宽度” 的类名，常用的如下表所示。
| 类名 | 说明 |
|---|---|
| max-w-0 | 0px（完全没有宽度） |
| max-w-none | none（取消最大宽度限制） |
| max-w-xs | 最大宽度为 320px（20rem） |
| max-w-sm | 最大宽度为 384px（24rem） |
| max-w-md | 最大宽度为 448px（28rem） |
| max-w-lg | 最大宽度为 512px（32rem） |
| max-w-xl | 最大宽度为 576px（36rem） |
| max-w-2xl | 最大宽度为 672px（42rem） |
| max-w-3xl | 最大宽度为 768px（48rem） |
| max-w-4xl | 最大宽度为 896px（56rem） |
| max-w-5xl | 最大宽度为 1024px（64rem） |
| max-w-6xl | 最大宽度为 1152px（72rem） |
| max-w-7xl | 最大宽度为 1280px（80rem） |
| max-w-prose | 最佳阅读宽度（65ch） |
示例 1：定义最大宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="max-w-md h-32 bg-red-400 mx-auto"></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用了 “max-w-md” 来限制元素的最大宽度为 448px。小伙伴们可以在电脑上拉伸浏览器的宽度，这个红色方块到了 448px 之后，就不会再变宽了。
提示: 最大宽度类（max-w-xxx）经常会与 mx-auto 搭配一起使用，从而实现带宽度的块级元素的 “水平居中”。详细用法请查看：Tailwind CSS 外边距。
示例 2：最佳阅读宽度（max-w-prose）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="max-w-prose bg-green-100">
绿叶网其实有 10 多年的沉淀了，它的前身是创办于 2015 年的 “绿叶学习网”。绿叶网是一个专业极致、富具个性的网站。在这里，我们只提供能让你眼前一亮的教程、手册、工具、图书等。
</div>
</body>
</html>页面效果如下图所示。
分析：
max-w-prose 是 Tailwind CSS 提供的一个非常特殊的类名，它等价于 max-width: 65ch。其作用就是把这个容器的最大宽度限制在 “65 个字符” 左右，这正是人类阅读最舒适的宽度。
2. 最小宽度
虽然最小宽度不如最大宽度常用，但在制作按钮（Button）或标签（Tag）时，我们经常需要用到它。
比如，当按钮里面的文字只有一两个字（如 “确定”、“OK”）时，如果没有最小宽度限制，按钮会缩得非常窄，视觉上显得很 “寒酸”。此时，给它设置一个最小宽度，能让 UI 界面看起来更稳重、更统一。
其中，常用的最小宽度类名如下表所示。
| 类名 | 说明 |
|---|---|
| min-w-0 | 最小宽度为 0px |
| min-w-full | 最小宽度为 100%（相对于父元素） |
| min-w-min | 最小宽度等于内部内容的最小宽度 |
| min-w-max | 最小宽度等于内部内容的最大宽度（不换行） |
| min-w-[100px] | 使用任意值，限制最小宽度为 100px |
示例 3：定义最小宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<button class="bg-blue-400 text-white px-4 py-2 rounded cursor-pointer">
OK
</button>
<button class="min-w-[120px] bg-green-400 text-white px-4 py-2 rounded cursor-pointer">
OK
</button>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们对比了两个按钮：
- 第一个按钮：只设置了内边距 px-4。由于文字只有 “OK” 两个字母，按钮看起来非常窄，点击区域也很小。
- 第二个按钮：我们加入了 min-w-[120px]。这表示该按钮的宽度 “至少” 为 120px。即便文字再少，它也会保持这个宽度。
3. 最小高度
有时候网页内容会比较少，然后可能会导致元素高度塌陷，而无法撑满整个屏幕。在 Tailwind CSS 中，我们可以使用 “min-h-” 前缀来设置元素的最小高度。
其中，常用的最小高度取值如下表所示。
| 类名 | 说明 |
|---|---|
| min-h-full | 最小高度为 100%（相对于父元素） |
| min-h-screen | 最小高度为 100vh（占据整个浏览器窗口的高度） |
| min-h-dvh | 动态最小屏幕高度 |
示例 4：定义最小高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="min-h-screen bg-green-200">
<div class="h-20 bg-green-500"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们为父元素定义了 “min-h-screen”，此时表示父元素最小高度为 100vh（即浏览器窗口的 100% 高度）。然后为子元素定义了 “h-20”，此时表示子元素固定高度为 80px。
按正常来说，由于父元素没有内容，它的高度应该由子元素高度撑起来才对。但由于我们父元素设置了min-h-screen，因此父元素的最小高度被限制为屏幕的高度。
常见问题
1. h-screen 和 min-h-screen 之间有什么区别呢？
新手小伙伴很容易把这两个搞混，其实它们之间是有着本质上的区别的：
h-screen：表示高度 “永远等于” 屏幕高度。如果里面的内容非常多，超出了屏幕，就会溢出覆盖到下面去。min-h-screen：表示高度 “至少等于” 屏幕高度。如果内容过少，此时它会撑满屏幕；如果内容过多，此时它会自动往下伸展把内容包裹住。
2. 在手机端开发时，为什么使用了 min-h-screen，底部内容还是被浏览器的地址栏遮挡了呢？
min-h-screen 对应的是 CSS 的 100vh。但在 Safari 或微信等手机浏览器中，100vh 是包含了浏览器顶部地址栏和底部工具栏的高度的，这就导致页面底部有一部分会被遮挡。
为了解决这个问题，Tailwind CSS 提供了一个非常有用的类名 “min-h-dvh”，它会根据手机浏览器地址栏的收起和展开，自动计算真正的可视区域高度。因此在做手机端全屏页面时，强烈建议使用 min-h-dvh 来代替 min-h-screen。
