三、Tailwind CSS——排版与文字样式

一、字体设置

1. 字体族（font-sans / serif / mono）

作用说明： 字体族指的是"用哪一类字体来显示文字"，例如无衬线字体、衬线字体或等宽字体。Tailwind 默认提供三个字体族工具类，分别对应 CSS 变量 --font-sans、--font-serif 和 --font-mono。写类名时就是 font-* 后面跟字体族名称。

类名	对应变量	字体类型	典型用途
`font-sans`	`--font-sans`	无衬线字体，笔画没有装饰	界面正文、按钮、表单，默认首选
`font-serif`	`--font-serif`	衬线字体，笔画有装饰角	文章正文、博客、正式内容
`font-mono`	`--font-mono`	等宽字体，每个字符宽度相同	代码、表格数字、日志

html 复制代码

<p class="font-sans">这是无衬线字体，适合大多数界面。</p>
<p class="font-serif">这是衬线字体，适合长篇阅读。</p>
<code class="font-mono text-sm">const count = 42;</code>

默认字体族并不是写死一个字体，而是一整组"备选列表"。当用户设备没有第一个字体时，浏览器会依次尝试后面的字体，最后退回到系统通用字体：

css 复制代码

/* Tailwind v4 默认的 sans 字体栈大致如下 */
font-family:
  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", "Noto Sans", Arial, sans-serif;

适用场景： 全站正文用 font-sans，文章或新闻类页面用 font-serif，代码块、价格数字、终端输出用 font-mono。

如果临时想使用某个不在主题里的字体，也可以用任意值写法。注意字体名中有空格时，空格要用下划线 _ 代替：

html 复制代码

<p class="font-[Open_Sans]">临时使用 Open Sans 字体。</p>

2. 自定义字体

作用说明： 真实项目通常需要品牌字体。Tailwind v4 采用 CSS 优先配置，在主 CSS 文件里用 @theme 定义 --font-* 变量，就会自动生成对应的 font-* 工具类。例如 --font-display 会生成 font-display。

如果字体文件放在本地，先通过 @font-face 声明字体，再在 @theme 里引用：

css 复制代码

/* src/index.css */
@import "tailwindcss";

/* 第一步：告诉浏览器从哪里加载本地字体文件 */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("/fonts/Oswald.woff2") format("woff2");
}

@theme {
  /* 第二步：把字体注册成工具类 font-display */
  --font-display: "Oswald", sans-serif;
}

定义后即可使用：

html 复制代码

<h1 class="font-display text-4xl">使用自定义展示字体</h1>
<p class="font-sans text-gray-600">正文仍然使用默认无衬线字体。</p>

如果使用 Google Fonts 这类在线字体，@import 必须放在 @import "tailwindcss" 之前。这是因为浏览器要求所有 @import 语句必须出现在其他规则之前：

css 复制代码

/* 在线字体的 @import 一定要放在最顶部 */
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import "tailwindcss";

@theme {
  --font-roboto: "Roboto", sans-serif;
}

html 复制代码

<body class="font-roboto">
  <h1>整个页面都使用 Roboto 字体</h1>
</body>

最佳实践： 自定义字体至少要写一个通用备选字体，例如 sans-serif 或 serif，避免字体加载失败时页面没有可用字体。标题字体和正文字体最好分开定义，例如 --font-display 给大标题，--font-body 给正文。

避坑指南： 中文项目如果直接套用某个英文字体，中文字符通常会回退到系统默认字体。想让中文也好看，建议把中文字体放在字体栈更靠前的位置，例如 --font-sans: "PingFang SC", "Microsoft YaHei", sans-serif;。

二、字号、字重与行高

1. 字号（text-*）

作用说明： text-* 除了表示文字颜色，也表示字号。text-xs 到 text-9xl 是 Tailwind 内置的字号等级，每档不仅设置字号，还会同时设置一个合适的默认行高，保证文字单独使用时也有不错的效果。

类名	字号	默认行高	常见用途
`text-xs`	0.75rem（12px）	calc(1 / 0.75)	辅助说明、标签、角标
`text-sm`	0.875rem（14px）	calc(1.25 / 0.875)	次要正文、表单项
`text-base`	1rem（16px）	calc(1.5 / 1)	默认正文
`text-lg`	1.125rem（18px）	calc(1.75 / 1.125)	小标题、强调段落
`text-xl`	1.25rem（20px）	calc(1.75 / 1.25)	卡片标题
`text-2xl`	1.5rem（24px）	calc(2 / 1.5)	页面小标题
`text-3xl`	1.875rem（30px）	calc(2.25 / 1.875)	段落标题
`text-4xl`	2.25rem（36px）	calc(2.5 / 2.25)	大标题
`text-5xl`	3rem（48px）	1	首页主标题
`text-6xl`	3.75rem（60px）	1	营销页大标题
`text-7xl`	4.5rem（72px）	1	超大标题
`text-8xl`	6rem（96px）	1	展示型数字
`text-9xl`	8rem（128px）	1	特殊视觉设计

html 复制代码

<p class="text-xs text-gray-500">辅助说明文字</p>
<p class="text-base text-gray-900">正文内容</p>
<h2 class="text-2xl font-semibold text-gray-900">页面小标题</h2>
<h1 class="text-4xl font-bold text-gray-900">首页大标题</h1>

可以在字号后面用斜杠同时指定行高，text-sm/6 表示"14px 字号 + 6 号间距的行高"：

html 复制代码

<p class="text-sm/6 text-gray-700">
  这是一段较小的文字，同时把行高设为 6，阅读更舒服。
</p>

如果内置等级不够用，可以用任意值写具体像素或其他长度单位：

html 复制代码

<p class="text-[14px]">精确控制为 14 像素。</p>
<p class="text-[clamp(1rem,5vw,2rem)]">随屏幕宽度变化的流体字号。</p>

也可以在主 CSS 文件里新增自定义字号，定义后自动生成同名工具类，还能顺带配置它的默认行高、字间距和字重：

css 复制代码

@import "tailwindcss";

@theme {
  --text-tiny: 0.625rem;
  --text-tiny--line-height: 1.5rem;
  --text-tiny--letter-spacing: 0.125rem;
  --text-tiny--font-weight: 500;
}

html 复制代码

<span class="text-tiny">这是自定义的超小字号。</span>

避坑指南： text-sm 会同时覆盖字号和行高，如果在它后面又写了一个行高类，后者会覆盖默认行高。想让同一段文字在手机上小、桌面上大，可以写成 text-sm md:text-base。

2. 字重（font-*）

作用说明： 字重指文字的粗细。Tailwind 用 font-* 设置字重，从 font-thin 的 100 一直到 font-black 的 900。

类名	字重数值	中文感受
`font-thin`	100	极细
`font-extralight`	200	超细
`font-light`	300	细体
`font-normal`	400	正常，也就是默认粗细
`font-medium`	500	中等
`font-semibold`	600	半粗
`font-bold`	700	粗体
`font-extrabold`	800	超粗
`font-black`	900	极粗，最重

html 复制代码

<p class="font-normal text-gray-600">普通正文。</p>
<p class="font-medium text-gray-900">稍强调的文字，如菜单项。</p>
<p class="font-semibold text-gray-900">卡片标题常用。</p>
<p class="font-bold text-gray-900">需要强强调的文字。</p>

如果使用的字体支持中间数值，也可以用任意值精确控制：

html 复制代码

<p class="font-[650]">使用 650 字重的文字。</p>

需要新增字重等级时，在 @theme 里定义 --font-weight-* 即可：

css 复制代码

@theme {
  --font-weight-extrablack: 1000;
}

html 复制代码

<h1 class="font-extrablack">超粗标题</h1>

避坑指南： 类名能写出来，不代表字体一定支持这个粗细。如果加载的字体文件只有 400 和 700 两档，浏览器会尽力模拟其他粗细，实际效果可能不理想。自定义字体时，最好把会用到字重的字体文件都加载进来。

3. 行高（leading-*）

作用说明： 行高指一行文字的上下高度，它会直接影响阅读的松紧程度。Tailwind v4 推荐使用 leading-none、leading-<数字> 和任意值来控制行高。

写法	效果	说明
`leading-none`	`line-height: 1`	行高等于字号，非常紧凑
`leading-5`	`calc(var(--spacing) * 5)`	按间距比例计算，数字越大行越高
`leading-6`	`calc(var(--spacing) * 6)`	正文常用
`leading-[1.5]`	`line-height: 1.5`	任意比例值
`leading-(--my-line-height)`	读取 CSS 变量	项目里统一管理行高
`text-sm/6`	字号和行高一起设置	最常用的组合写法

html 复制代码

<p class="leading-none">行高很紧凑，适合数字或图标。</p>
<p class="leading-6 text-gray-700">行高为 6，正文阅读比较舒适。</p>
<p class="leading-[1.75]">用任意值设置为 1.75 倍行高。</p>

最推荐的做法是使用 text-<字号>/<行高> 组合写法，一次写清字号和行高：

html 复制代码

<p class="text-base/7 text-gray-800">
  字号为 base，行高为 7，适合作为阅读型正文。
</p>

避坑指南： 旧版 Tailwind 教程里常见的 leading-tight、leading-snug、leading-relaxed 属于 v3 的命名习惯。在 v4 中更推荐使用 leading-<数字> 或 leading-[<值>]。如果看到旧项目里还有这些类，它们在兼容写法下可能仍然生效，但新代码建议统一到 v4 写法。

三、字间距与文本对齐

1. 字间距（tracking-*）

作用说明： 字间距控制字符之间的水平距离，CSS 里叫 letter-spacing。Tailwind 用 tracking-* 设置，正值让字变宽，负值让字变紧凑。

类名	字间距	常见用途
`tracking-tighter`	-0.05em	大标题收紧，视觉更整体
`tracking-tight`	-0.025em	小标题、紧凑标题
`tracking-normal`	0em	默认值
`tracking-wide`	0.025em	稍放松的文字
`tracking-wider`	0.05em	按钮、导航文字
`tracking-widest`	0.1em	全大写标签、徽章

html 复制代码

<h1 class="text-4xl font-bold tracking-tight text-gray-900">
  收紧字间距的大标题
</h1>

<button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium tracking-wider text-white">
  登录
</button>

<span class="text-xs font-semibold uppercase tracking-widest text-gray-500">
  New Arrival
</span>

内置等级不够时，可以用任意值写精确的 em 值：

html 复制代码

<p class="tracking-[.25em]">字间距扩大到 0.25em。</p>

使用指南： 全大写的英文标签配合 tracking-widest 会更有设计感；中文标题通常不需要很大的字间距，tracking-tight 或默认值即可。负字间距对中英文大标题都有效，但正文不要设负值，否则阅读会变累。

2. 文本对齐（text-*）

作用说明： 文本对齐控制文字在容器里的水平位置。注意这里和字号共用 text-* 前缀，但类名不同，不会冲突。

类名	对齐方式	说明
`text-left`	左对齐	最常用，适合从左到右阅读
`text-center`	居中	标题、按钮、卡片内容
`text-right`	右对齐	数字、价格、结束位置
`text-justify`	两端对齐	让左右边缘都整齐，适合段落
`text-start`	起始位置对齐	根据文字方向自动选择左或右
`text-end`	结束位置对齐	根据文字方向自动选择左或右

html 复制代码

<h2 class="text-center text-2xl font-semibold">居中的标题</h2>

<div class="flex justify-between">
  <span class="text-left text-sm text-gray-500">共 3 件商品</span>
  <span class="text-right text-sm font-medium text-gray-900">合计 ¥ 128.00</span>
</div>

使用指南： 需要支持从右向左的语言（如阿拉伯语、希伯来语）时，优先使用 text-start 和 text-end。它们会跟随页面文字方向自动调整，比写死 text-left、text-right 更通用。

四、文本装饰与大小写

1. 下划线、删除线等装饰

作用说明： 文本装饰用来在文字上添加下划线、删除线、上划线，或者去掉这些线。基本类名是 underline、overline、line-through 和 no-underline。

类名	效果
`underline`	下划线
`overline`	上划线
`line-through`	删除线
`no-underline`	去掉下划线，常用于链接

html 复制代码

<a href="#" class="text-blue-600 underline hover:no-underline">带下划线的链接</a>
<p class="overline text-gray-500">上方有一条线</p>
<p class="line-through text-gray-400">原价 ¥ 199</p>
<a href="#" class="no-underline">不带下划线的链接</a>

除了控制"有没有线"，还能控制线的颜色、粗细和样式：

类别	示例类名	作用
颜色	`decoration-red-500`	线的颜色
粗细	`decoration-1`、`decoration-2`	线的宽度
样式	`decoration-solid`、`decoration-dashed`、`decoration-dotted`、`decoration-double`、`decoration-wavy`	实线、虚线、点线、双线、波浪线
偏移	`underline-offset-4`、`underline-offset-8`	下划线与文字的间距

html 复制代码

<a href="#" class="underline decoration-2 decoration-dotted decoration-sky-500 underline-offset-4">
  带点状下划线的链接
</a>

适用场景： 链接、错误文字用红色波浪线、删除线表示降价前价格、上划线用于特殊标记。默认浏览器会给链接加下划线，Tailwind 的 no-underline 常用来把它去掉。

2. 大小写转换

作用说明： 大小写转换只改变英文文字的显示形式，不会改动 HTML 里的原始内容。也就是说，源码里写小写，页面上也可以显示为大写。

类名	效果	示例
`uppercase`	全部转成大写	`hello` → `HELLO`
`lowercase`	全部转成小写	`HELLO` → `hello`
`capitalize`	每个单词首字母大写	`hello world` → `Hello World`
`normal-case`	保持原始大小写	`Hello` → `Hello`

html 复制代码

<span class="uppercase tracking-wide text-xs font-semibold text-gray-500">
  featured
</span>

上面的源码是 featured，页面上会显示为 FEATURED。这样既能保持代码里内容语义正确，又能灵活控制外观。

避坑指南： capitalize 只对英文等空格分隔的单词生效，它不会影响已经是大写的字母，也不会智能处理专有名词。中文文字不受这些类影响，因为汉字没有大小写概念。

五、换行与截断

1. 换行处理

作用说明： 换行处理涵盖好几个相关但不同的问题：文字要不要换行、长英文单词能不能从中间断开、连续空格和换行符要不要保留，以及多行时如何让行宽更均匀。Tailwind 用四组工具类分别控制，这里一起归纳。

第一组：控制单词如何断开（word-break）

类名	作用
`break-normal`	只在正常断词点换行，默认行为
`break-all`	必要时可从单词内部任意位置断开
`break-keep`	阻止中文、日文、韩文在标点处随意断行

html 复制代码

<!-- 很长的 URL 或英文单词，用 break-all 避免溢出 -->
<p class="max-w-xs break-all">
  https://example.com/very/long/path/that/does/not/break/naturally
</p>

<!-- 中文段落用 break-keep 保持标点规则 -->
<p class="break-keep">这是一段需要保持中文断行规则的中文内容。</p>

第二组：控制长单词溢出时是否换行（overflow-wrap）

类名	作用
`wrap-normal`	只在空格、连字符等自然位置换行
`wrap-break-word`	需要时允许在单词中间断开
`wrap-anywhere`	与 `wrap-break-word` 类似，但更激进，适合弹性布局

html 复制代码

<p class="max-w-[200px] wrap-break-word">
  Supercalifragilisticexpialidocious 这类超长单词也能正常换行。
</p>

第三组：控制整段文字是否换行及换行质量（text-wrap）

类名	作用
`text-wrap`	允许正常换行
`text-nowrap`	禁止换行，超出部分溢出
`text-balance`	让每行文字长度尽量均衡，适合标题
`text-pretty`	改善换行，避免最后一行只剩孤零零一个词

html 复制代码

<h1 class="text-balance text-3xl font-bold">
  使用 text-balance 让标题的每一行长度更均匀
</h1>

<p class="text-pretty text-gray-700">
  这是一段比较长的正文，text-pretty 会尽量避免段末出现单个孤立的单词。
</p>

第四组：控制空格和换行符是否保留（white-space）

类名	作用
`whitespace-normal`	合并连续空格和换行，正常换行
`whitespace-nowrap`	合并空格和换行，但不换行
`whitespace-pre`	完整保留空格和换行，但不自动换行
`whitespace-pre-line`	保留换行，合并空格，正常换行
`whitespace-pre-wrap`	完整保留空格和换行，同时自动换行
`whitespace-break-spaces`	保留空格和换行，并允许空格处换行

html 复制代码

<pre class="whitespace-pre-wrap">
  这段内容里的
    空格和换行
  都会被原样保留。
</pre>

避坑指南： 旧版教程常见的 break-words 在 v4 中已经改为 wrap-break-word。如果继续使用旧类名，可能不会生效。长英文单词溢出时，优先用 wrap-break-word；如果内容放在 flex 容器里仍然溢出不换行，可以换成 wrap-anywhere，它处理弹性布局时更可靠。

2. 单行省略（truncate）

作用说明： truncate 是一个组合工具类，专门做"单行超出显示省略号"。它相当于同时设置了隐藏溢出、禁止换行和省略号，写一个类就能完成常见的文字截断。

html 复制代码

<p class="max-w-xs truncate text-gray-700">
  这是一段非常非常长的标题文字，超出容器宽度后会被截断并显示省略号。
</p>

如果只需要控制"超出后显示省略号还是直接裁掉"，可以使用更细的 text-ellipsis 和 text-clip：

类名	作用
`text-ellipsis`	超出部分显示省略号 `...`
`text-clip`	超出部分直接裁掉，不显示省略号

html 复制代码

<!-- 表格单元格里常见的单行省略 -->
<td class="max-w-[200px] truncate">超长文件名.docx</td>

适用场景： 商品标题、文件名称、导航菜单项、通知消息、表格单元格。只要内容必须在同一行显示且不能换行，就可以用 truncate。

避坑指南： truncate 本身不限制宽度，必须配合容器或 max-w-*、w-* 一起使用。如果没有宽度约束，文字不会溢出，也就看不到省略号。

3. 多行截断（line-clamp-*）

作用说明： line-clamp-* 用来让文字在指定行数后截断，并显示省略号。数字表示最多显示几行，例如 line-clamp-2 是两行，line-clamp-3 是三行。它非常适合做卡片简介。

html 复制代码

<article class="max-w-sm rounded-xl bg-white p-5 shadow-sm">
  <h2 class="text-lg font-semibold text-gray-900">文章标题</h2>
  <p class="mt-2 line-clamp-2 text-sm leading-6 text-gray-600">
    这是文章摘要，超过两行就会被截断并显示省略号。用于列表页和卡片里保持高度一致，避免不同长度的摘要把卡片撑得高低不齐。
  </p>
</article>

可以通过任意值指定其他行数，也可以在不同屏幕尺寸使用不同行数：

html 复制代码

<p class="line-clamp-2 md:line-clamp-3">
  手机端最多显示两行，桌面端最多显示三行。
</p>

如果要取消之前设置的多行截断，使用 line-clamp-none：

html 复制代码

<p class="line-clamp-3 lg:line-clamp-none">
  在大屏幕上取消截断，显示完整内容。
</p>

避坑指南： 多行截断依赖浏览器的 -webkit-line-clamp 能力，现代浏览器都支持。它与 truncate 不同，不需要额外设置宽度也能生效，但文字所在的容器最好有明确宽度，否则行数可能和预期不同。

六、列表、缩进与垂直对齐

1. 列表样式

作用说明： 列表样式控制 <ul>、<ol> 等列表前面的项目符号。list-disc 是无序列表的圆点，list-decimal 是有序列表的数字，list-none 则去掉所有符号。

类名	作用
`list-disc`	实心圆点
`list-decimal`	阿拉伯数字
`list-none`	去掉项目符号

html 复制代码

<ul class="list-disc pl-5 text-gray-700">
  <li>第一项</li>
  <li>第二项</li>
</ul>

<ol class="list-decimal pl-5 text-gray-700">
  <li>第一步</li>
  <li>第二步</li>
</ol>

项目符号的位置可以用 list-inside 和 list-outside 控制：

类名	作用
`list-inside`	项目符号放在内容框内部，多行文字会与符号对齐
`list-outside`	项目符号放在内容框外部，是默认行为

html 复制代码

<ul class="list-inside list-disc">
  <li>使用 list-inside 时，符号位于内容框内部。</li>
</ul>

也可以使用任意值指定其他符号类型：

html 复制代码

<ol class="list-[upper-roman]">
  <li>使用罗马数字作为序号</li>
</ol>

适用场景： 文章列表、步骤说明、导航菜单。导航和标签页通常使用 list-none 去掉符号，再配合 flex 布局横向排列。

html 复制代码

<!-- 常见导航：去掉符号，横向排列 -->
<ul class="flex list-none gap-4 text-sm text-gray-700">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于</a></li>
</ul>

2. 缩进

作用说明： 缩进控制段落第一行前面的空白。Tailwind 用 indent-* 设置，数字表示按间距比例缩进，也可以使用 indent-px 或任意值。

写法	效果
`indent-2`	按 2 倍间距缩进
`indent-8`	按 8 倍间距缩进，常用于段落首行
`indent-px`	缩进 1px
`-indent-4`	反向缩进，首行向左侧突出
`indent-[2em]`	任意缩进值

html 复制代码

<p class="indent-8 text-gray-700">
  这是段落的开头，indent-8 会在第一行前面留出两个汉字的距离，模拟传统文章首行缩进。
</p>

适用场景： 长篇文章的段落首行、需要视觉层级的内容。大多数现代网页界面不依赖缩进来区分段落，而是用段间距 space-y-* 或 mt-*，所以缩进主要用于传统阅读排版。

3. 垂直对齐

作用说明： 垂直对齐控制行内元素或表格单元格在垂直方向上的位置。最常用的是让图标和文字在一条线上对齐，使用 align-middle。

类名	作用
`align-baseline`	基线对齐，默认值
`align-top`	与整行顶部对齐
`align-middle`	与父元素中部对齐
`align-bottom`	与整行底部对齐
`align-text-top`	与父元素字体的顶部对齐
`align-text-bottom`	与父元素字体的底部对齐
`align-sub`	下标
`align-super`	上标

html 复制代码

<!-- 图标和文字垂直居中对齐 -->
<button class="flex items-center gap-2 text-sm text-gray-700">
  <svg
    class="size-4 align-middle fill-current"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle cx="12" cy="12" r="8" />
  </svg>
  我的账户
</button>

上标和下标也很实用：

html 复制代码

<p>
  x<sup class="align-super text-xs">2</sup>
  和
  H<sub class="align-sub text-xs">2</sub>O
</p>

适用场景： 图标与文字对齐、数学公式、化学式、价格角标、表格单元格内容垂直居中。

避坑指南： vertical-align 只对行内元素（inline）和表格单元格（table-cell）生效，对普通块级元素没有效果。想让块级容器里的多个元素垂直居中，应该使用 Flexbox 的 items-center，而不是 align-middle。