【Tailwind CSS】文本大小类 text- 和行距类 leading- 详解

Tailwind CSS 是一款实用工具优先的 CSS 框架，通过提供大量的类名，帮助开发者快速设计和控制页面的外观。本篇文章将深入解析 Tailwind CSS 中的 text- 和 leading- 类名，详细介绍这些类的大小种类和实际应用。无论是需要精确的字体大小控制，还是灵活的行距调节，Tailwind 都能满足多样的排版需求。

一、Tailwind CSS 文本大小类 text-

text- 系列类名用于控制文本的字体大小。Tailwind 提供了从超小到超大的多种字号，以应对不同的设计需求。在不同的 UI 场景中，合理选择字体大小有助于突出重点内容、引导用户关注信息。

1. text- 大小种类一览

以下是 text- 类中的标准大小选项：

类名	字体大小（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
text-6xl	3.75rem	60px
text-7xl	4.5rem	72px
text-8xl	6rem	96px
text-9xl	8rem	128px

2. 各大小文本类的实际应用

• text-xs 和 text-sm：适合细小文本，如标签、次要信息、注释等。
• text-base 和 text-lg：适合常规段落，提供良好的可读性。
• text-xl 和 text-2xl：适合小标题，能够清晰传达内容层次。
• text-3xl 到 text-5xl：适合大标题或重要的内容展示，突出内容的视觉中心。
• text-6xl 及以上：用于标语、大标题，适合在视觉上吸引用户注意力。

3. 使用示例

以下是一个不同大小文本的排版示例：

<div class="p-4">
  <h1 class="text-4xl font-bold">主标题 - 4xl</h1>
  <h2 class="text-2xl mt-2">副标题 - 2xl</h2>
  <p class="text-base mt-4">这是常规段落文本，使用 text-base。</p>
  <p class="text-sm text-gray-600 mt-2">这是较小的文本信息，适合用于次要内容。</p>
  <footer class="text-xs text-gray-400 mt-6">版权声明：内容版权归属作者</footer>
</div>

二、Tailwind CSS 行距类 leading-

leading- 类名用于控制文本的行距（行高），这在段落排版中尤其重要。不同的行距能有效地改善文本的可读性，帮助信息清晰展示。

1. leading- 行距大小种类一览

Tailwind 提供了两种行距设定方式：一种是相对行距（如 leading-tight 和 leading-loose），另一种是基于具体数值的行距（如 leading-3 和 leading-10）。这种灵活的行距设定方式有助于开发者根据设计需求进行细致调整。

a. 相对行距

类名	行距（rem）	典型应用
leading-none	1	极小行距，内容密集场景
leading-tight	1.25	紧凑行距，节省空间
leading-snug	1.375	略紧行距，较为密集
leading-normal	1.5	标准行距，常规应用
leading-relaxed	1.625	宽松行距，增强可读性
leading-loose	2	宽行距，适合展示型文本

b. 基于数值的行距

Tailwind 还提供了具体数值行距设置，通常用于更精确的排版需求：

类名	行距（rem）
leading-3	0.75
leading-4	1
leading-5	1.25
leading-6	1.5
leading-7	1.75
leading-8	2
leading-9	2.25
leading-10	2.5

这些数值行距类允许开发者对不同字号的文本进行更精确的控制，确保文本排版效果与整体设计保持一致。

2. 各类行距的实际应用

• leading-none 和 leading-tight：适合小空间内的多行文本，如标签或注释。
• leading-snug 和 leading-normal：适合段落文本，既节省空间又保持了可读性。
• leading-relaxed 和 leading-loose：适合用于标题和展示型文本，创造出更轻松的阅读体验。
• 数值行距：数值行距类如 leading-7 和 leading-10 提供了更灵活的行距控制，可根据设计风格对行距进行精细调节。

3. 使用示例

以下示例展示了不同的行距对段落排版的影响：

<div class="p-4">
  <p class="text-base leading-tight">
    紧凑行距段落 - 适合在较小的展示区域内使用，提供更多的信息内容。
  </p>
  <p class="text-base leading-normal mt-4">
    常规行距段落 - 使用常规行距，适合长篇阅读，不会让阅读变得压迫。
  </p>
  <p class="text-base leading-8 mt-4">
    宽行距段落 - 使用具体的数值行距类 leading-8，使内容更加宽松，适合展示型文本。
  </p>
</div>

三、text- 与 leading- 的组合应用

在实际设计中，text- 和 leading- 通常结合使用，帮助我们快速搭建文本层级和排版风格。合理的字号和行距搭配可以提升页面的视觉层次和阅读体验。

示例：组合应用

<div class="p-6">
  <h1 class="text-3xl leading-loose font-bold">大标题 - 宽松行距</h1>
  <p class="text-lg leading-normal mt-2">
    这是较大的段落文本，适合用于介绍类的内容。它使用 text-lg 字号和常规行距 leading-normal，保证了良好的可读性。
  </p>
  <p class="text-sm leading-tight mt-4 text-gray-600">
    这是较小的段落文本，适合用于细节信息或注释类内容。它使用 text-sm 字号和紧凑行距 leading-tight，使内容更加紧凑，节省空间。
  </p>
</div>

通过这种组合使用，我们可以灵活调整文本布局，以实现更直观、层次分明的用户界面。

四、注意事项

1. 字体大小和行距的匹配

为了优化可读性，应根据文本的大小合理选择行距。例如，小字号文本更适合使用紧凑行距，而大标题则更适合使用宽松行距。

2. 响应式设计支持

Tailwind CSS 支持响应式设计，可以使用如 sm:text-lg、md:leading-normal 这样的类名组合，为不同设备设置最佳的字号和行距。

3. 保持一致的排版风格

在页面中应尽量保持字体大小和行距的一致性，这样能够提供更加统一的视觉体验。除非是强调或突出特定内容，否则应避免使用过多的文本大小和行距变化。

五、总结

Tailwind CSS 中的 text- 和 leading- 类名为开发者提供了丰富的文本排版选项。通过从 text-xs 到 text-9xl 的多种字体大小和 leading-none 到 leading-loose 的多种相对行距选择，以及 leading-3 到 leading-10 的具体行距数值类，开发者能够精细控制不同类型的文本排版需求。合理搭配字号和行距，可以优化用户的阅读体验，提升页面的美观性和可读性。希望本文能帮助你在 Tailwind CSS 的排版中得心应手，创造出更加优雅和一致的用户界面。

推荐：

• JavaScript
• react
• vue

---