Tailwind CSS 定义字体大小
在 Tailwind CSS 中，我们可以使用 “text-*” 相关类名来定义文本的大小（相当于传统 CSS 中的 font-size）。
语法：
text-{尺寸}说明：
Tailwind 默认提供了一套从极小到极大的文本尺寸档位，通常以类似 “衣服尺码” 的缩写（sm、md、lg、xl 等）来命名。
其中，字体大小相关的类名如下表所示。
| 类名 | 对应像素值 | 说明 |
|---|---|---|
| text-xs | 12px | 极小号 |
| text-sm | 14px | 小号 |
| text-base（默认） | 16px | 正常 |
| text-lg | 18px | 大号 |
| text-xl | 20px | 超大号 |
| text-2xl | 24px | 标题字号 1 |
| text-3xl | 30px | 标题字号 2 |
| text-4xl | 36px | 标题字号 3 |
| text-5xl | 48px | 海报字号 1 |
| text-6xl | 60px | 海报字号 2 |
| text-7xl | 72px | 巨型字号 |
| text-8xl | 96px | 超巨型字号 |
| text-9xl | 128px | 终极字号 |
示例 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 class="p-10">
<p class="text-xs text-gray-500 mb-4">text-xs (12px)</p>
<p class="text-base text-gray-800 mb-4">text-base (16px)</p>
<p class="text-2xl text-green-600 mb-4">text-2xl (24px)</p>
<p class="text-4xl text-blue-500">text-4xl (36px)</p>
</body>
</html>页面效果如下图所示。
分析：
细心的小伙伴可能会好奇：“为什么使用 Tailwind CSS 定义的文字，看起来总是比自己手写 CSS 的排版要舒服、通透呢？
其实因为 Tailwind CSS 会自动绑定行高（line-height）。比如使用 “text-xl” 这个类名时，Tailwind CSS 除了将 font-size 定义为 20px 之外，同时还会将 line-height 定义为适合该字号的 28px。
其中，字号越大，Tailwind CSS 给你搭配的行距就越宽敞，从而保证多行文字不会挤在一起。
Tailwind CSS 字体大小 “任意值”
在实际开发中，我们可能会遇到使用 Tailwind CSS 自带字体大小类名不够用的情况。比如 UI 稿要求使用 22px 的 font-size。
在 Tailwind CSS 中，我们可以使用中括号 “[]” 的方式来定义任意数值的字体大小。
语法：
text-[值]说明：
比如 text-[22px]，表示将 font-size 定义为 22px。
提示: 关于任意值的语法，我们在后面 “Tailwind CSS 任意值” 一节中会详细介绍。
示例 2：字体大小 “任意值”
<!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">
<p class="text-[22px] text-red-400">
绿叶网 - 为好教程，全力以赴
</p>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用了 text-[22px] 来定义字体大小为 22px。Tailwind CSS 最终会将其编译成：
font-size: 22px;Tailwind CSS 字号与行高 “组合”
在实际开发中，UI 设计师给出的方案往往比较特殊，比如要求：字号 22px，行高 32px。这样我们就得写两个类名才行：text-[22px] leading-[32px]。随着样式的增多，HTML 上的类名会变得非常冗长。
为了进一步简化代码，Tailwind CSS 为字号和行高提供了一种组合写法。
语法：
text-{字号}/{行高}说明：
我们只需要在字号类名后面跟上一个斜杠 “/”，然后后面写上行高的值即可。
示例 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">
<div class="w-48 bg-green-300 text-[20px]/[30px]">
绿叶网专注于教程的易懂性，让完全 0 基础的小白也能更快上手。
</div>
</body>
</html>页面效果如下图所示。
分析：
text-[20px]/[30px] 表示 font-size 为 20px，line-height 为 30px。
常见问题
1. 为什么 Tailwind CSS 推荐使用 text-sm 这样的类名，而不是全部使用 text-[14px] 写死？
虽然任意值很自由，但 text-sm 这种预设类名使用的是相对单位 rem，它能够更好地适应不同设备，而且还自带合理的行高。
如果我们写死 text-[14px] ，此时不仅失去了相对单位的弹性优势，Tailwind CSS 也不会自动为你设置合适行高，我们可能还需要额外去补写行高相关的代码。
