Tailwind CSS 宽高语法
在 Tailwind CSS 中，我们可以使用 “w-*” 相关的类名来定义元素的宽度，也可以使用 “h-*” 相关的类名来定义元素的高度。
语法：
w-{值}
h-{值}说明：
这里的 “值” 可以是 3 种情况：数字、分数或关键字。
1. 数字
当这个值是一个 “数字” 时，此时 1 个单位等于 4px，比如：
w-1：宽度为 4px。w-4：宽度为 16px。h-2：高度为 8px。h-8：高度为 32px。
之所以 Tailwind CSS 要这样设计，主要是为了使得我们在一个科学的比例（4 的倍数）内进行设计。这样即使小伙伴们不是专业的设计师，做出来的页面也会显得非常匀称和专业。
2. 分数
当这个值是一个 “分数” 时，可以用于表示百分比，比如：
w-1/2：宽度占父元素的 50%。w-1/3：宽度占父元素的 33.33%。h-3/4：高度占父元素的 75%。
3. 关键字
除了数值和分数之外，这个值还可以是一些特殊的关键字，常用的如下表所示。
| 类名 | 说明 |
|---|---|
| w-full 或 h-full | 等价于 width: 100%; 或 height: 100%; |
| w-auto 或 h-auto | 等价于 width: auto; 或 height: auto; |
| w-screen 或 h-screen | 等价于 width: 100vw; 或 height: 100vh; |
| w-fit 或 h-fit | 等价于 width: fit-content; 或 height: fit-content; |
| h-dvh | 等价于 height: 100dvh; |
其中，100vw 相当于整个浏览器窗口的宽度，而 100vh 相当于整个浏览器窗口的高度。如果小伙伴们不熟悉 vw 和 vh，可以查看：CSS vh 和 vw。
Tailwind CSS 宽高示例
接下来，我们通过几个简单的例子来讲解一下如何使用 Tailwind CSS 来定义元素的宽度和高度。
示例 1：定义宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind 宽高示例</title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="w-48 h-48 bg-red-400">
<div class="w-full h-1/2 bg-green-400"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，对于父元素来说，类名 “w-48 h-48 bg-red-400” 表示：
w-48：宽度为 48 × 4px = 192px。h-48：高度为 48 × 4px = 192px。bg-red-400：颜色为中等红色。
然后对于子元素来说，类名 “w-full h-1/2 bg-green-400” 表示：
w-full：宽度为父元素宽度的 100%。h-1/2：高度为父元素高度的 50%。bg-green-400：颜色为中等绿色。
示例 2：w-screen 和 h-screen
<!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="w-screen h-screen bg-green-200"></div>
</body>
</html>页面效果如下图所示。
分析：
很多现代网站（比如 Apple 官网）中，第一屏通常是一张撑满整个屏幕的大图或视频。这时候，w-screen 和 h-screen 就派上大用场了。
Tailwind CSS 宽高 “任意值”
虽然 Tailwind CSS 提供了非常多不同类型的宽高类名，但在实际开发中，可能会需要使用一些特殊的值，比如 22px、30px 等。
在 Tailwind CSS 中，我们可以使用中括号 “[]” 的方式来定义任意数值的宽高。
语法：
w-[数值]
h-[数值]说明：
w-[22px] 表示 width 为 22px，h-[30px] 表示 height 为 30px。
提示: 对于任意值的详细使用，我们在后面 “Tailwind CSS 任意值” 一节中会详细介绍。
示例 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>
<div class="inline-block bg-green-300 w-[150px] h-[50px]">
绿叶网
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用了 “w-[150px]” 来定义宽度为 150px，然后使用 “h-[50px]” 来定义高度为 50px。
Tailwind CSS 宽高简写（size）
在实际开发中，经常需要画一个正方形（即宽度和高度相等），比如一个正方形头像。如果我们总是写成 “w-24 h-24” 这样，则会显得比较啰嗦。
在 Tailwind CSS 中，我们可以使用 “size-*” 相关类名来同时定义元素的宽度和高度。
语法：
size-[数值]说明：
size 与 w 和 h 的用法类似，比如：
size-8：等价于 w-8 h-8（即宽高均为 32px）。size-full：等价于 w-full h-full。size-[50px]：等价于 w-[50px] h-[50px]。
示例 4：使用 size
<!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="inline-block bg-green-300 size-20">
</div>
</body>
</html>页面效果如下图所示。
常见问题
1. 为什么我给元素定义了 w-200 类名，宽度却没有生效呢？
这是因为在 Tailwind CSS 的默认比例表中，数值并不是连续的。常用的有 0-12、14、16、20、24... 等。如果你发现某个数字（比如 w-200）没有效果，很大概率是因为它不在默认表里，此时我们应该改为使用 w-[800px] 这种任意值的写法。
2. 为什么我给元素定义了 h-full ，却没有任何效果呢？
实际上，这是一个经典的 “CSS 坑”。如果父元素没有设置确定的高度，子元素使用 h-full 是无效的。因此如果你发现 h-full 无效，首先要检查其父元素（或祖先元素）是否正确设置了高度。
