Tailwind CSS V4 排版完全指南（字体、字号、行高、对齐、换行、文本特效）

排版是 UI 质感的核心，决定页面阅读体验、层级结构和视觉统一。Tailwind CSS V4 在文本排版模块迎来多项重磅升级：全新文本阴影、精细文字换行控制、OpenType 字体特性、基线对齐增强、适配 V4 左→右变体规则，同时兼容 V3 全部基础写法。

本文系统梳理 V4 全套排版体系：字号、字重、行高、字间距、对齐、颜色、换行截断、文本特效，附带业务层级规范、高频避坑点、完整可运行 Demo，零基础吃透企业级标准化排版。

一、V4 排版核心升级（对比 V3）

• 新增原生文本阴影：内置 text-shadow-sm / text-shadow / text-shadow-lg，无需自定义 CSS
• 精细化换行控制：新增多组 overflow-wrap 工具，解决长英文、长单词溢出问题
• OpenType 字体特性：font-features-* 精细控制字体高级字形（数字、连笔、大小写）
• 基线对齐增强：支持 items-baseline-last 最后一行基线对齐，适配复杂图文排版
• 变体顺序重构：文本响应式变体左→右生效，逻辑更贴合原生 CSS
• 无限字号支持：超大/超小字号无需配置，text-100等自定义档位直接使用

二、核心排版维度（企业级规范）

网页标准排版只靠 6 大维度，层级清晰、统一可控：

• 字号 text-*：控制文字大小，区分标题/正文/辅助文字
• 字重 font-*：控制粗细，强化层级重点
• 行高 leading-*：控制上下留白，决定阅读舒适度
• 字间距 tracking-*：控制左右字距，优化标题精致度
• 对齐 text-*：控制整体排版位置
• 换行/截断：解决溢出、折行、单行省略问题

三、基础排版工具全集

1. 字号 text-size（核心层级）

V4 保留全套预设字号，同时支持无限级数和任意值语法，适配所有设计需求。

text-xs    /* 超小辅助文字 */
text-sm    /* 小号正文、注释 */
text-base  /* 默认正文 16px */
text-lg    /* 大号正文 */
text-xl    /* 小标题 */
text-2xl   /* 中标题 */
text-3xl   /* 大标题 */
text-4xl+  /* 超大标题、Banner文案 *//* V4 增强：任意大字号直接用，无需扩展 */
text-60 text-80 text-100
/* 自定义精准尺寸 */
text-[18px] text-[2.5rem]

2. 字重 font-weight（层级强调）

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 极粗 */

3. 行高 leading（阅读舒适度关键）

正文行高建议 1.5~1.6，标题行高建议 1.2~1.3，避免文字拥挤。

leading-none    /* 1 无额外行高 */
leading-tight   /* 1.25 紧凑（标题专用） */
leading-snug    /* 1.375 */
leading-normal  /* 1.5 标准正文 */
leading-relaxed /* 1.625 宽松长文本 */
leading-loose   /* 2 极宽松 */

4. 字间距 tracking（精致度优化）

标题适当加宽字距，提升高级感；正文默认无需调整。

tracking-tighter  /* 更紧凑 */
tracking-tight    /* 紧凑 */
tracking-normal   /* 默认 */
tracking-wide     /* 宽松 */
tracking-wider    /* 更宽松 */
tracking-widest   /* 极宽松（大标题专用） */

5. 文本对齐 text-align

text-left    /* 左对齐（默认） */
text-center  /* 居中 */
text-right   /* 右对齐 */
text-justify /* 两端对齐（长文本杂志排版）

6. 文本颜色与透明度

text-slate-800    /* 常规深灰正文 */
text-slate-500    /* 辅助浅灰文字 */
text-primary      /* 主题色高亮 */
text-white/90     /* 带透明度文字 */

四、V4 专属全新排版特性（重点）

1. 原生文本阴影 text-shadow

V4.1+ 全新内置，无需自定义 CSS，适配海报、Banner、悬浮文字，解决文字叠底看不清问题。

text-shadow-sm    /* 轻微阴影 */
text-shadow       /* 标准阴影 */
text-shadow-lg    /* 加粗立体阴影 */

2. 精细化换行 & 溢出容错

彻底解决长单词、英文地址、链接横向溢出问题，V4 优化排版稳定性。

break-normal    /* 默认换行规则 */
break-words     /* 长单词强制截断换行（常用） */
break-all       /* 任意字符强制换行 */
keep-all        /* 禁止断词，整体保留 */
overflow-wrap-anywhere /* 极致兼容长文本溢出

3. OpenType 高级字体特性

专业排版必备，优化数字、大小写、连笔字形显示效果。

font-features-default
font-features-normal
font-features-tabular-nums /* 等宽数字，榜单/时间排版 */
font-features-ligatures    /* 字体连笔 */

4. 安全对齐与基线增强

items-safe-center    /* V4安全居中，小屏不截断 */
self-baseline-last   /* 对齐最后一行文字基线 */

五、文本截断与单行/多行省略

业务高频：列表、卡片、简介文字溢出省略，V4 完全兼容且性能优化。

1. 单行省略

truncate /* 单行自动省略，必备组合 */
overflow-hidden whitespace-nowrap text-ellipsis

2. 多行省略（V4 稳定兼容）

line-clamp-2  /* 显示2行后省略 */
line-clamp-3  /* 显示3行后省略 */
line-clamp-4

六、文本样式修饰

italic          /* 斜体 */
not-italic      /* 取消斜体 */
underline       /* 下划线 */
no-underline    /* 取消下划线 */
line-through    /* 删除线 */
uppercase       /* 全部大写 */
lowercase       /* 全部小写 */
capitalize      /* 首字母大写 */

七、V4 响应式排版规范

V4 变体从左到右生效，书写更符合直觉，搭配 V4 独有 @max-* 断点实现细腻降级。

<h2 class="text-3xl @max-lg:text-2xl @max-md:text-xl font-semibold leading-tight">
  响应式标题：大屏3xl、中屏2xl、小屏xl
</h2>

八、企业级排版模板（直接复用）

1. 页面标题标准

<h1 class="text-3xl md:text-4xl font-bold leading-tight tracking-tight">主标题</h1>

2. 正文标准

<p class="text-base text-slate-700 leading-relaxed">常规正文内容，舒适阅读行高</p>

3. 辅助注释文字

<span class="text-sm text-slate-500">辅助说明文字</span>

4. 卡片多行省略简介

<p class="line-clamp-2 text-slate-600 leading-normal">
  超长简介内容自动两行省略，适配所有卡片布局，不溢出不崩坏
</p>

5. 高级阴影标题（V4专属）

<h2 class="text-4xl font-bold text-white text-shadow-lg">带立体阴影的标题文案</h2>

九、高频避坑清单（V4重点）

• ❌ 标题使用默认 leading-normal：行高过大导致标题松散，优先用 leading-tight
• ❌ 长文本不设置 break-words：英文长单词、链接横向溢出页面
• ❌ V3 旧项目堆叠变体顺序错乱：V4 左→右生效，需统一修正响应式层级
• ✅ 正文统一 leading-relaxed，提升长文阅读体验
• ✅ 海报/浮层文字优先加 text-shadow，防止底色干扰看不清
• ✅ 数字展示、榜单金额使用 font-features-tabular-nums 实现数字对齐

十、完整可运行 V4 排版 Demo

包含 V4 全部新特性：文本阴影、换行优化、响应式降级、多行省略、字体特性，直接保存打开即可预览。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind V4 排版完整 Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <style type="text/tailwindcss">
    @theme {
      --color-typo-bg: #0f172a;
    }
  </style>
</head>
<body class="p-6 bg-slate-100 space-y-8">
  <h1 class="text-3xl font-bold text-center mb-10">Tailwind CSS V4 排版系统演示</h1>

  <!-- 1. 标准标题层级 -->
  <div class="bg-white p-6 rounded-lg shadow">
    <h2 class="text-2xl font-semibold leading-tight mb-2">标准标题样式</h2>
    <p class="text-base text-slate-600 leading-relaxed">正文内容采用宽松行高，阅读体验更佳，是企业级页面的标准排版规范。</p>
  </div>

  <!-- 2. V4 文本阴影新特性 -->
  <div class="bg-typo-bg p-8 rounded-lg text-center">
    <h3 class="text-4xl font-bold text-white text-shadow-lg">V4 新增 text-shadow-lg 立体阴影标题</h3>
  </div>

  <!-- 3. 多行文本省略 -->
  <div class="bg-white p-6 rounded-lg shadow max-w-md">
    <h4 class="font-medium mb-2">多行省略演示</h4>
    <p class="line-clamp-2 text-slate-600">
      这是一段超长的演示文本，用于测试 V4 稳定的多行省略效果，无论屏幕宽度如何变化，都会固定只显示两行内容，超出部分自动省略，非常适合卡片简介、列表摘要场景使用。
    </p>
  </div>

  <!-- 4. 长单词换行优化 -->
  <div class="bg-white p-6 rounded-lg shadow max-w-xs">
    <p class="break-words text-slate-700">
      超长英文测试：SupercalifragilisticexpialidociousInternationalOrganization，自动完美换行不溢出
    </p>
  </div>

  <!-- 5. V4 响应式排版 -->
  <div class="bg-white p-6 rounded-lg shadow">
    <h3 class="text-3xl @max-lg:text-2xl @max-md:text-xl font-bold">
      响应式标题（缩放窗口查看变化）
    </h3>
  </div>

  <!-- 6. 等宽数字排版 -->
  <div class="bg-white p-6 rounded-lg shadow font-features-tabular-nums text-2xl">
    榜单数字对齐：10086 / 999 / 12345
  </div>

</body>
</html>

总结

Tailwind CSS V4 排版系统在原有规范基础上，补齐了文本阴影、精细换行、高级字体特性三大短板，结合全新 @max-* 响应式断点、左→右变体逻辑，实现了「简单易用、层级清晰、质感高级、适配完善」的企业级排版体系。

排版核心口诀：标题紧行高加粗，正文宽松保阅读，辅助文字降灰度，溢出截断用clamp，高级质感靠阴影，长文本必开break。

Tailwind CSS V4 排版速查表

配套上文教程，开发快速查阅；V4支持无限字号，可直接写text-60这类大尺寸，无需额外配置

一、字号 text-*

二、字重 font-*

三、行高 leading-*

四、字间距 tracking-*

五、文本对齐 text-align

六、文字样式修饰

七、文本截断与换行

八、V4 新增专属工具

九、响应式写法（V4变体：从左向右生效）

<!-- 大屏3xl，≤lg 2xl，≤md xl -->
<h2 class="text-3xl @max-lg:text-2xl @max-md:text-xl font-semibold leading-tight"></h2>

十、业务常用模板

<!-- 页面主标题 -->
<h1 class="text-3xl md:text-4xl font-bold leading-tight tracking-tight">主标题</h1><!-- 正文段落 -->
<p class="text-base text-slate-700 leading-relaxed">正文内容</p>
<!-- 辅助小字 -->
<span class="text-sm text-slate-500">辅助说明文字</span>
<!-- 卡片多行简介 -->
<p class="line-clamp-2 text-slate-600 leading-normal">卡片简介文本</p>
<!-- 带阴影标题（浮层Banner） -->
<h2 class="text-4xl font-bold text-white text-shadow-lg">标题文案</h2>

十一、速记要点

1. 标题：font-semibold / font-bold + leading-tight，不要用宽松行高
2. 正文：text-base + leading-relaxed，阅读更舒适
3. 长英文/链接溢出：加 break-words
4. 浮层白底上的白色文字，搭配 text-shadow 提升可读性
5. 金额、排名数字使用 font-features-tabular-nums 对齐