第 1 节 概述
网页上 90% 的内容是文字。文字排印（typography）直接决定了页面的阅读体验。
好的排印应该让读者感受不到排印的存在——它自然引导视线流动，信息层次清晰，读起来不费力。
Tailwind 提供了从字体、字号到行高、装饰的完整工具链。
第 2 节 字体
2.1 三种默认字体
Tailwind 预设了三类字体栈：
1
2
3
| <p class="font-sans">无衬线字体，干净现代，适合正文和标题</p>
<p class="font-serif">衬线字体，古典优雅，适合引文和长篇阅读</p>
<p class="font-mono">等宽字体，适合代码和技术内容</p>
|
| 类名 | 风格 | 适用场景 |
|---|
font-sans | 无衬线 | 正文、标题、按钮（默认） |
font-serif | 衬线 | 引用块、文章正文 |
font-mono | 等宽 | 代码、技术数据 |
2.2 自定义字体（v4）
通过 @theme 引入自定义字体：
1
2
3
4
5
| @import "tailwindcss";
@theme {
--font-display: "Noto Sans SC", sans-serif;
--font-body: "Noto Serif SC", serif;
}
|
定义后就能用 font-display 和 font-body 了。
第 3 节 字号
3.1 字号体系
Tailwind 从 text-xs 到 text-9xl 共 18 级字号：
1
2
3
4
5
6
| <h1 class="text-4xl font-bold">主标题（2.25rem / 36px）</h1>
<h2 class="text-2xl font-semibold">二级标题（1.5rem / 24px）</h2>
<h3 class="text-xl font-medium">三级标题（1.25rem / 20px）</h3>
<p class="text-base">正文（1rem / 16px，默认值）</p>
<p class="text-sm">辅助文字（0.875rem / 14px）</p>
<p class="text-xs">标注文字（0.75rem / 12px）</p>
|
常用字号速查：
| 类名 | rem | px | 用途 |
|---|
text-xs | 0.75rem | 12px | 标签、标注 |
text-sm | 0.875rem | 14px | 辅助信息 |
text-base | 1rem | 16px | 正文（默认） |
text-lg | 1.125rem | 18px | 大号正文 |
text-xl | 1.25rem | 20px | 小标题 |
text-2xl | 1.5rem | 24px | 二级标题 |
text-3xl | 1.875rem | 30px | 一级标题 |
text-4xl | 2.25rem | 36px | 页面大标题 |
text-5xl | 3rem | 48px | Hero 标题 |
技巧
一个页面用 3~4 种字号就够了。比如：标题 text-3xl、小节标题 text-xl、正文 text-base、辅助 text-sm。层级太多反而让人眼花。
第 4 节 字重
字重控制文字的粗细，从 font-thin（100）到 font-black（900）：
1
2
3
4
5
6
| <p class="font-light">细体 — 300</p>
<p class="font-normal">常规 — 400，默认</p>
<p class="font-medium">中等 — 500</p>
<p class="font-semibold">半粗 — 600</p>
<p class="font-bold">粗体 — 700</p>
<p class="font-extrabold">特粗 — 800</p>
|
技巧
标题用 font-bold 或 font-semibold，正文用 font-normal 即可。太多不同的字重反而破坏一致性。
第 5 节 对齐
1
2
3
4
| <p class="text-left">左对齐</p>
<p class="text-center">居中</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐，适合大段文字</p>
|
第 6 节 行高
行高控制文本行之间的距离，影响阅读节奏：
1
2
3
4
| <p class="leading-tight">紧凑排版，适合标题（line-height: 1.25）</p>
<p class="leading-normal">正常行高，默认值（line-height: 1.5）</p>
<p class="leading-relaxed">宽松行高，适合正文阅读（line-height: 1.625）</p>
<p class="leading-loose">非常宽松（line-height: 2）</p>
|
正文建议用 leading-relaxed 或 leading-normal，行距太密读者容易串行。
第 7 节 文字装饰
7.1 下划线和删除线
1
2
3
| <p class="underline">下划线</p>
<p class="line-through">删除线</p>
<p class="no-underline">无下划线，常用于去除链接默认下划线</p>
|
7.2 装饰线颜色和宽度
1
2
3
4
5
6
| <a href="#" class="underline decoration-blue-500 decoration-2">
蓝色粗下划线链接
</a>
<a href="#" class="underline decoration-gray-300 decoration-wavy">
波浪下划线
</a>
|
7.3 文字省略
超过容器宽度的文字用省略号截断：
1
2
3
| <p class="truncate">
这是一段很长的文字，超过容器宽度后会被截断并显示省略号...
</p>
|
多行省略可以用 line-clamp：
1
2
3
4
| <p class="line-clamp-2">
这段文字最多显示两行。超过两行的部分会被截断，并用省略号表示。
第三行及以后的内容都看不见了。
</p>
|
line-clamp-1 到 line-clamp-6，分别表示限制 1 到 6 行。常用于文章列表的摘要显示。
第 8 节 列表样式
1
2
3
4
5
6
7
8
9
10
11
12
13
| <ul class="list-disc list-inside">
<li>无序列表，圆点标记</li>
<li>list-inside 让标记在内容框内</li>
</ul>
<ol class="list-decimal list-inside">
<li>有序列表，数字标记</li>
<li>适合步骤说明</li>
</ol>
<ul class="list-none">
<li>清除默认列表样式，自己用 flex 或 grid 重新排版</li>
</ul>
|
list-inside 和 list-outside 控制标记符号在内容框的内部还是外部。
第 9 节 实战：优化产品页的文字排印
把上一章的产品页拿来，优化文字层级：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| <!DOCTYPE html>
<html lang="zh-CN">
<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>
<nav class="bg-white border-b border-gray-100">
<div class="max-w-5xl mx-auto flex items-center justify-between px-6 py-4">
<span class="text-xl font-bold text-gray-900">星光科技</span>
<div class="flex gap-6 text-gray-600">
<a href="#" class="hover:text-gray-900">产品</a>
<a href="#" class="hover:text-gray-900">特性</a>
<a href="#" class="hover:text-gray-900">联系我们</a>
</div>
</div>
</nav>
<main class="max-w-5xl mx-auto px-6 py-16">
<!-- Hero 区域 -->
<div class="text-center">
<h1 class="text-5xl font-extrabold text-gray-900 tracking-tight">
智能台灯 <span class="text-blue-600">Lumina</span>
</h1>
<p class="mt-6 text-xl text-gray-500 leading-relaxed max-w-2xl mx-auto">
光线随你而变。一盏懂你的台灯，用 AI 算法模拟自然光的变化，让每一刻都有最适合的光线。
</p>
<button class="mt-8 px-8 py-4 bg-blue-600 text-white text-lg font-semibold rounded-xl hover:bg-blue-700">
立即购买
</button>
</div>
<!-- 特性列表 -->
<div class="mt-24">
<h2 class="text-3xl font-bold text-gray-900 text-center">
为什么选择 Lumina
</h2>
<div class="mt-12 grid grid-cols-3 gap-8">
<div class="text-center">
<h3 class="text-xl font-semibold text-gray-900">AI 调光</h3>
<p class="mt-3 text-gray-500 leading-relaxed">
内置传感器实时感知环境光线，自动调整亮度和色温。
</p>
</div>
<div class="text-center">
<h3 class="text-xl font-semibold text-gray-900">护眼模式</h3>
<p class="mt-3 text-gray-500 leading-relaxed">
无频闪、低蓝光，通过德国莱茵 TÜV 护眼认证。
</p>
</div>
<div class="text-center">
<h3 class="text-xl font-semibold text-gray-900">语音控制</h3>
<p class="mt-3 text-gray-500 leading-relaxed">
支持 Siri、小爱同学、Google Assistant 语音指令。
</p>
</div>
</div>
</div>
</main>
</body>
</html>
|
看这里文字层级的编排：
text-5xl font-extrabold tracking-tight —— 醒目的 Hero 标题，tracking-tight 让字母间距紧凑text-xl text-gray-500 leading-relaxed —— 副标题，宽松行高便于阅读text-3xl font-bold —— 段落标题，比 Hero 小但依然突出text-xl font-semibold —— 卡片标题text-gray-500 leading-relaxed —— 卡片正文，灰色降低视觉权重
本章小结
- 字体用
font-sans/serif/mono 三种预设，也可通过 @theme 自定义 - 字号从
text-xs 到 text-9xl 共 18 级，页面用 3~4 种就够 - 字重
font-bold 做标题，font-normal 做正文 - 行高
leading-relaxed 适合大段文字 truncate 和 line-clamp 控制文字溢出
文字有了层次感，但页面的结构还是平的。下一篇，我们用 Flex 和 Grid 给页面搭骨架。
Aphros 收录于 网页开发 和 Tailwind CSS