Tailwind CSS - 排版

在 Tailwind CSS 中精通排版

排版是网页设计的支柱。Tailwind CSS 提供了一套全面的工具类，可以控制文本的各个方面，从字体家族和大小到行高和字间距。这些工具类让你可以直接在 HTML 中构建美观、易读且一致的排版系统。

全面的排版工具类

以下是 Tailwind 工具类涵盖的最常见排版主题的参考。如需完整列表，请始终参考 Tailwind CSS 官方文档。

主题	描述
Font Family	使用 font-sans、font-serif 或 font-mono 为元素设置字体。
Font Size	使用响应式比例尺控制文本大小，例如 text-base、text-lg、text-4xl。
Font Smoothing	使用 antialiased 或 subpixel-antialiased 应用字体平滑以获得更好的渲染效果。
Font Style	控制文本是 italic（斜体）还是 not-italic（非斜体）。
Font Weight	控制文本的粗细，从 font-thin 到 font-black。
Font Variant Numeric	控制数字的高级排版特性，如 lining-nums 或 tabular-nums。
Letter Spacing	使用 tracking-* 工具类调整字符间距（字距调整）。
Line Clamp	将文本截断为特定行数。需要 @tailwindcss/line-clamp 插件。
Line Height	使用 leading-* 工具类控制文本行之间的垂直空间（行高）。
List Style	使用 list-disc、list-decimal、list-inside 等控制列表标记的外观。
Text Align	设置文本的水平对齐方式：text-left（左对齐）、text-center（居中）、text-right（右对齐）、text-justify（两端对齐）。
Text Color	使用 Tailwind 丰富的调色板设置文本颜色，例如 text-slate-700。
Text Decoration	添加 underline（下划线）、line-through（删除线）或 no-underline（无下划线）等装饰。
Text Decoration Color	设置文本装饰的颜色，例如 decoration-sky-500。
Text Decoration Style	设置装饰的样式，如 decoration-solid（实线）、decoration-wavy（波浪线）等。
Text Decoration Thickness	控制装饰线的粗细，例如 decoration-2。
Text Underline Offset	使用 underline-offset-* 控制下划线与文本的距离。
Text Transform	改变文本的大小写：uppercase（大写）、lowercase（小写）、capitalize（首字母大写）。
Text Overflow	使用 truncate、text-ellipsis 或 text-clip 处理超出其容器的文本。
Vertical Align	控制内联或表格单元格元素的垂直对齐方式。
Whitespace	控制元素内的空白和换行符如何处理。
Word Break	控制单词如何断行以防止溢出。

现代最佳实践：排版插件

对于你无法直接控制的内容，例如从 Markdown 渲染的博客文章或来自无头内容管理系统（headless CMS）的内容，为每个元素手动编写排版类是不切实际的。为此，Tailwind 提供了官方的 @tailwindcss/typography 插件。

通过向容器元素添加单个 prose 类，该插件将为所有嵌套元素（如标题、段落、列表和引用块）应用美观、易读的默认排版样式。对于内容丰富的页面来说，这大大节省了时间。

### 示例：使用 prose 类设置博客文章样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 排版插件需要一个构建步骤，但此演示使用包含它的自定义 CDN 构建 -->
  <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
  <title>Typography Plugin Demo</title>
</head>
<body class="bg-gray-100 p-8">
  <article class="prose lg:prose-xl mx-auto bg-white p-8 rounded-lg shadow-md">
    <h1>The Art of Building Modern Web Applications</h1>
    <p>Building for the web has evolved significantly. We've moved from static pages to dynamic, interactive experiences powered by sophisticated frameworks and tools.</p>
    <h2>Key Principles</h2>
    <p>There are several principles to keep in mind:</p>
    <ul>
      <li>Component-Based Architecture</li>
      <li>Declarative UI</li>
      <li>State Management</li>
    </ul>
    <blockquote>
      "The key to performance is elegance, not battalions of special cases." - Jon Bentley
    </blockquote>
    <p>By embracing these concepts, developers can create applications that are not only powerful but also maintainable and scalable. Using a utility-first CSS framework like <a href="#">Tailwind CSS</a> can dramatically speed up this process.</p>
  </article>
</body>
</html>

配置与自定义

Tailwind 最强大的优势之一是其可配置性。你可以通过编辑 tailwind.config.js 文件中的 theme 对象来轻松自定义排版。你可以在此处添加自定义字体、定义自己的字体大小比例尺或调整行高以匹配你品牌的 डिज़ाइन 系统。

### 示例：添加自定义字体

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        // 将 'Inter' 添加到无衬线字体堆栈的最前面
        'sans': ['Inter', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [],
}

添加此配置后（并在你的 CSS 或 HTML 中导入 ‘Inter’ 字体），你就可以使用标准的 font-sans 类将其应用于整个项目中。