字体与排版

排版(Typography)决定文字的"气质"。Tailwind 把字号、字重、行高、字间距、对齐等属性都封装成简洁的工具类,且每个字号自带推荐的行高——你不用费心搭配,选个字号就行。

1. 字号:text-*

字号系列是最常用的。命名采用 T 恤尺码(xxs~9xl),非常直观:

<!-- 字号:text-<size> -->
<p class="text-xs">   <!-- 12px / 行高 16px(脚注、徽章) -->
<p class="text-sm">   <!-- 14px / 行高 20px(辅助说明、表单提示) -->
<p class="text-base"> <!-- 16px / 行高 24px(正文默认) -->
<p class="text-lg">   <!-- 18px / 行高 28px -->
<p class="text-xl">   <!-- 20px / 行高 28px(小标题) -->
<p class="text-2xl">  <!-- 24px / 行高 32px -->
<p class="text-3xl">  <!-- 30px / 行高 36px(h3) -->
<p class="text-4xl">  <!-- 36px / 行高 40px(h2) -->
<p class="text-5xl">  <!-- 48px / 行高 1(h1) -->
<p class="text-6xl">  <!-- 60px -->
<p class="text-7xl">  <!-- 72px -->
<p class="text-8xl">  <!-- 96px -->
<p class="text-9xl">  <!-- 128px -->

<!-- 每个字号都自带推荐行高,不用单独再设 leading-* -->

实战经验:

2. 字重:font-*

<!-- 字重:font-<weight> -->
<p class="font-thin">       <!-- 100 细 -->
<p class="font-extralight"> <!-- 200 -->
<p class="font-light">      <!-- 300 -->
<p class="font-normal">     <!-- 400 默认 -->
<p class="font-medium">     <!-- 500(常用强调) -->
<p class="font-semibold">   <!-- 600(小标题常用) -->
<p class="font-bold">       <!-- 700(标题常用) -->
<p class="font-extrabold">  <!-- 800 -->
<p class="font-black">      <!-- 900 -->

<!-- 实战中最常用:font-medium / font-semibold / font-bold -->

记住这三个就够 90% 场景:font-medium(轻度强调)、font-semibold(小标题)、font-bold(大标题)。font-thin/light 用得少,字体不一定支持。

3. 文字对齐:text-*

<!-- 文字对齐:text-<align> -->
<p class="text-left">    <!-- 左对齐(默认) -->
<p class="text-center">  <!-- 居中 -->
<p class="text-right">   <!-- 右对齐 -->
<p class="text-justify"> <!-- 两端对齐 -->

<!-- 配合响应式前缀:手机左对齐、桌面居中 -->
<p class="text-left md:text-center">内容</p>

4. 行高:leading-*

每个字号都有默认行高,大多数时候不用改。但长文阅读时,适当放松行高能大幅提升阅读体验:

<!-- 行高:leading-<value> -->
<p class="leading-none">    <!-- 1 -->
<p class="leading-tight">   <!-- 1.25 -->
<p class="leading-snug">    <!-- 1.375 -->
<p class="leading-normal">  <!-- 1.5(默认,适合正文) -->
<p class="leading-relaxed"> <!-- 1.625(长文阅读) -->
<p class="leading-loose">   <!-- 2 -->

<!-- 也可以数字:leading-6 => line-height: 24px(1.5rem) -->
<p class="leading-6">固定行高 24px</p>

5. 字间距:tracking-*

字间距对设计感的影响远超想象。大写小字 + 宽字间距是经典的"高级感"配方:

<!-- 字间距:tracking-<value> -->
<p class="tracking-tighter"> <!-- -0.05em -->
<p class="tracking-tight">    <!-- -0.025em -->
<p class="tracking-normal">   <!-- 0(默认) -->
<p class="tracking-wide">     <!-- 0.025em -->
<p class="tracking-wider">    <!-- 0.05em -->
<p class="tracking-widest">   <!-- 0.1em(大写小字常用) -->

<!-- 经典:大写小字配 tracking-widest -->
<span class="text-xs uppercase tracking-widest text-gray-500">
  CHAPTER 1
</span>

6. 文字装饰

<!-- 文字装饰 -->
<a class="underline">下划线</a>
<a class="line-through">删除线</a>
<a class="no-underline">取消下划线</a>

<!-- 大小写转换 -->
<span class="uppercase">hello → HELLO</span>
<span class="lowercase">HELLO → hello</span>
<span class="capitalize">hello world → Hello World</span>

<!-- 文字截断(超长省略) -->
<p class="truncate">超长文本会被截断并以省略号结尾...</p>

<!-- 多行截断:line-clamp-* -->
<p class="line-clamp-2">超过两行就截断...</p>

truncate 是高频类:让超长文字在一行内显示并以省略号结尾。line-clamp-* 是它的多行版本,用于卡片摘要"显示两行后省略"。

7. 字体族:font-*

Tailwind 提供三种基础字体族:

<!-- 字体族:font-<family> -->
<p class="font-sans">    <!-- 默认无衬线(system-ui) -->
<p class="font-serif">   <!-- 衬线字体 -->
<p class="font-mono">    <!-- 等宽字体(代码块常用) -->

<!-- 默认 font-sans 是系统字体栈:
     ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, ...

     想用自定义字体(如 Inter),在 config 里扩展:
     theme.extend.fontFamily.sans = ["Inter", "system-ui", "sans-serif"]
     然后 CSS 里 @import 或 link 引入字体文件 -->

要用自定义字体(比如 Google Fonts 的 Inter、思源黑体),需要在 tailwind.config.js 扩展 fontFamily。后面"自定义配置"篇详讲。

8. 排版的"铁律"

9. 常见组合

小结

记住核心几类:

下一篇讲响应式——怎么让页面适应不同屏幕。

← 上一篇 颜色与背景

下一篇 响应式设计 →

✈️💬