第 3 章排版

你的网页应用很可能需要向读者展示文字。网站设计中有很大一部分，其实都是在处理文字的摆放、大小、粗细和布局。在本章中，我们将看看 Tailwind 是如何让你控制文字的显示方式的。

大小与形状

在网页上，你最先注意到的文字特征，可能就是它的大小和样式。 Tailwind 为这两方面都提供了一整套工具类。

文字的默认大小是通过 text-base 类来定义的，它对应的 CSS 属性是：

css

font-size: 1rem;
line-height: 1.5rem;

也就是说，text-base 的字体大小等于页面根元素的字体大小，而行高是它的 1.5 倍。

Tailwind 提供了一组名为 text-{size} 的工具类，其中包含两个比默认更小的等级、十个更大的等级，以及这个基础的 base 类，总共有 13 种文字大小可选。

每个等级都定义了对应的字体大小和行高，具体数值如下表所示。

Class	Font Size	Line Height
text-xs	0.75rem	1rem
text-sm	0.875rem	1.25rem
text-base	1rem	1.5rem
text-lg	1.125rem	1.75rem
text-xl	1.25rem	1.75rem
text-2xl	1.5rem	2rem
text-3xl	1.875rem	2.25rem
text-4xl	2.25rem	2.5rem
text-5xl	3rem	1
text-6xl	3.75rem	1
text-7xl	4.5rem	1
text-8xl	6rem	1
text-9xl	8rem	1

这是我们第一次接触到 Tailwind 明确的设计目标之一——为潜在无限的取值范围，提供一组一致的分级体系。

通过 text-{size} 这一类工具，Tailwind 让整个网站的文字大小和间距保持一致变得非常容易。

正如第 10 页“实用类（Utilities）”中提到的，你可以用方括号语法来自定义任意大小，比如：

html

text-[20px]

需要注意的是，必须同时写上数字和单位。

至于字体样式——像加粗、斜体、下划线这些基础样式——其实对应的是几个不同的 CSS 属性，但在 Tailwind 里，它们都被封装成了实用类：

italic 和 not-italic
underline 和 no-underline

通常，只有当你希望文字在不同状态下（比如响应式布局中）样式发生变化时，才会用到 not-italic 或 no-underline。

这种情况一般和不同屏幕尺寸下的响应式行为有关，我们会在第 7 章“响应式设计”（第 59 页）详细讨论。

此外，你还可以使用 overline（上划线）和 line-through（删除线）。

如果你使用了 underline、overline 或 line-through，还可以再加一个类来控制这些线条的样式。

可选的类包括：

decoration-solid（实线）
decoration-double（双线）
decoration-dotted（点线）
decoration-dashed（虚线）
decoration-wavy（波浪线）

它们的效果就和名字所表示的一样。

你还可以用 decoration-{width} 来设置线条的粗细。默认提供的宽度有 0、1、2、4 和 8，单位都是像素。

除此之外，还有两个特殊值：

decoration-auto
decoration-from-font 当然，你也可以自定义任意数值。

类似地，underline-offset-{width} 用来设置下划线与文字之间的偏移距离，数值范围与上面相同，也包括 auto。

另外，你还可以用 decoration-{color} 来设置下划线（或其他装饰线）的颜色。（关于 {color} 的用法，详见下一节的说明。）

对于粗体字体，CSS 提供了从 100 到 900 共九个等级的粗细度，其中 400 代表普通字体。

Tailwind 也对应地提供了九个工具类，每个类对应一个等级：

font-hairline
font-thin
font-light
font-normal
font-medium
font-semibold
font-bold
font-extrabold
font-black

并不是所有字体在每个粗细等级下都会有明显的区别，但常见的网页字体一般都会支持这些等级。

我也不太清楚为什么 Tailwind 没采用类似 font-weight-100 这样的命名方式——看起来那样会更一致。不过，你可以通过修改配置来让它这样命名（详见第 8 章“自定义 Tailwind”，第 67 页）。

此外，你也可以像这样设置任意的自定义数值：

html

font-[1200]

你可能还希望控制文字的大小写形式。比如，你可能希望标题全部为大写。

Tailwind 为此提供了四个与 text-transform 属性对应的工具类，每个类的功能都和它的名字一样：

uppercase —— 全部大写
lowercase —— 全部小写
capitalize —— 每个单词首字母大写
normal-case —— 保持原样，不做大小写转换

有了这些工具类，我们就可以开始为实际的标题样式构建基础了。下面是一个流行的 CSS 框架中，标题和副标题的默认样式示例（或多或少与之类似）：

html

<h1 class="text-3xl font-semibold">Title</h1>
<h2 class="text-xl">Subtitle</h2>

这样设置后，标题的字体大小是 1.875rem（约 30 磅），行高是 2.5rem（约 36 磅），字体为 半粗体（semibold）；副标题的字体大小是 1.25rem（约 20 磅），字体为 常规粗细（normal），行高是 1.75rem。

我个人更喜欢让标题更醒目一些，所以我可能会这样调整：

html

<h1 class="text-4xl font-bold">Title</h1>
<h2 class="text-2xl font-semibold">Subtitle</h2>
<h3 class="text-lg font-medium italic">Header</h3>

这样我们就得到了一个稍微更大、更粗的标题和副标题，以及一个三级标题，它比普通文字稍大、稍粗，还带有斜体。我可能还会在标题周围加一些间距，具体做法我们将在第 4 章“盒子模型”（第 27 页）中讲。

要记住，Tailwind 的重置样式（reset styles）会让 h1、h2 等标签没有默认样式，所以在 Tailwind 中使用这些标签只是 语义上的标记 ——表示这是某种标题，对样式本身没有影响。

现在，你可能会想，我真的要每次写标题都输入 text-lg font-medium italic 吗？确实很繁琐，也有点难记。关于如何在 Tailwind 中管理这种重复操作，可以参考第 12 页的“Duplication（重复管理）”一节。

颜色与不透明度

Tailwind 允许你调整文字的颜色和不透明度。我们先来说颜色。Tailwind 内置了上百种颜色工具类，而且这些工具类在不同的颜色相关类别中表现方式都差不多。

文字颜色的类名格式是：text-{color}。有三个特殊的颜色类：text-transparent、text-inherit 和 text-current。

text-transparent 会让文字变成透明的，也就是说你能透过文字看到背景颜色。这个类有时候可以用来做一些特效，尤其是配合 bg-clip-text 使用时，它能让背景颜色只出现在文字形状的区域里。

text-current 和 text-inherit 都是很实用的“重置”选项。 text-inherit 会继承父元素的颜色。而 text-current 使用的是 CSS 的 currentColor，这个属性通常用来让其他颜色属性和文字颜色保持一致。对于文字本身来说，text-current 的效果其实和 text-inherit 是一样的。

Tailwind 还定义了 text-black（颜色为 #000000）和 text-white（颜色为 #ffffff）。

不过，大多数情况下，Tailwind 使用的是组合类：.text-{color}-{level}。 Tailwind 默认提供了 22 种不同的颜色，每种颜色有 10 个层级，从最浅的 50，一直到最深的 900（每次增加 100）。

默认的颜色按相似性分组如下：

Slate、Gray、Zinc、Neutral、Stone
Red、Orange、Pink、Rose
Amber、Yellow
Lime、Green、Emerald、Teal
Cyan、Sky、Blue
Indigo、Violet、Purple、Fuchsia

颜色和层级可以任意组合，比如 .text-yellow-400 或 .text-blue-200。我这里不会列出这 80 种组合的具体 RGB 十六进制值，但你可以在 Tailwind 的官方文档中查看。Tailwind 文档中称这些层级是 “expertly-crafted（精心设计的）”，意思就是这些颜色不是自动计算出来的。

你也可以在配置文件中自定义颜色（见第 8 章《自定义 Tailwind》，第 67 页），或者直接使用一次性的颜色定义，比如 text-[#34da33]。

正如你会看到的，Tailwind 中很多带前缀的类都共享相同的颜色和层级体系。你可以放心地认为，数字越大颜色越深，也可以利用这一点做出一些细微的视觉效果。

html

<div class="text-gray-300 hover:text-gray-700">
  Hi
</div>

这能让你的文字在默认情况下是浅灰色的，当用户把鼠标悬停其上时，颜色会变深。你甚至可以把这个逻辑封装成一个返回类名字符串的函数。下面是 JavaScript 版本的示例：

const hoverDarker = (color) => {
  return `text-${color}-300 hover:text-${color}-700`
}

不过，你可以看看第 75 页的“修改生成的类（Change Generated Classes）”部分，那里提到了一些你可能不想用这种实现方式的原因。

现在我们来说说“不透明度”（opacity）。改变不透明度可以让颜色更明显或更淡。 Tailwind 允许你在颜色声明后直接扩展出不透明度，语法是这样的：text-gray-300/50。意思是：在颜色类名后加一个斜杠 /，再加上不透明度的数值。

默认的不透明度等级稍微有点特别——它包括从 0 到 100 之间每隔 10 的数值（比如 10、20、30……），外加 5、25、75 和 95。这个数字表示百分比，比如：

text-gray-300/20 表示 20% 的不透明度；
text-gray-300/95 表示 95% 的不透明度。

你也可以用方括号来设置任意数值，比如：text-gray-300/[42]。

同样的颜色规则也可以用在输入光标（插入符号）的颜色上，语法是 caret-{color}，例如 caret-fuschia-300 或 caret-current。也支持自定义颜色，比如 caret-[#ababab]。

颜色模式

你会在 Tailwind 中多次看到这种模式：类名由一个前缀加上相同的一组颜色和不透明度选项组成。比如用于边框的 border-，用于背景颜色的 bg-，以及许多其他和颜色相关的 CSS 属性。

在第 8 章《自定义 Tailwind》（第 67 页）中，你会看到，所有颜色都可以在一个地方统一自定义，而这些修改会自动应用到所有使用颜色的属性上。

对齐与间距

Tailwind 提供了几个类来控制文字的水平对齐方式：

text-left
text-center
text-right
text-justify

这些类都会改变 CSS 的 text-align 属性。具体的对齐范围取决于文字所在的盒子（我会在第 4 章《盒模型》（第 27 页）中详细讲）。

至于垂直对齐，对应的 CSS 属性是 vertical-align，Tailwind 提供了以下类：

align-baseline
align-top
align-middle
align-bottom
align-text-top
align-text-bottom
align-sub
align-super

和水平对齐一样，垂直对齐的具体位置也取决于文字所在的盒子。

在行距方面，Tailwind 提供了相对值和绝对值两种选项。

相对选项中，最基础的是 leading-none，它让行高与字体大小完全相同。（顺便说一下，“leading” 是印刷术语，意思是“行高”，发音和 “wedding” 押韵，不是 “beading”。）

这种设置通常会让文字显得有点挤，所以 Tailwind 提供了一系列用于调整行距的类，从最紧到最松依次是：

leading-tight
leading-snug
leading-normal（行高是字体大小的 1.5 倍，通常是默认值）
leading-relaxed
leading-loose

绝对行距选项是基于 rem 的，也就是说它的值来源于根元素（root element）的字体大小，而不是它所附着的那个 DOM 元素的字体大小。

你可以使用从 leading-3 到 leading-10 的类，对应的范围是 0.75rem 到 2.5rem，每次递增 0.25rem。当然，你也可以使用自定义值，比如：leading-[4.3rem]。

接下来是 CSS 中叫做 letter-spacing（字母间距）的属性，在 Tailwind 里被称作 tracking。它有以下几个类：

tracking-normal（默认间距）
两个让文字更紧凑的类：
- tracking-tight
- tracking-tighter
以及三个让文字更宽松的类：
- tracking-wide
- tracking-wider
- tracking-widest

这些类在大标题或字体较大的文字上使用时，能产生不错的视觉效果。

特殊文本

Tailwind 允许你使用修饰符（modifiers）来对应一些 CSS 伪类，用于给特定类型的文字添加不同的样式。

比如 selection 修饰符，用来控制用户选中文本时的样式。你可以改变颜色（如 selection:bg-red-400），或者添加其他样式（如 selection:font-bold）。如果这个修饰符应用在父元素上，它会自动影响到所有子元素。

如果你喜欢报纸或杂志风格的排版，Tailwind 还提供了 first-line 和 first-letter 修饰符。这些通常用在调整文字的大小或粗细上，比如： first-letter:text-9xl first-letter:font-bold first-line:text-2xl，可以让段落的首字母特别大、加粗，而首行文字稍微放大。

此外，Tailwind 还支持 before: 和 after: 修饰符，分别对应 CSS 的 ::before 和 ::after 伪类，可以插入在 DOM 中不可见的内容。不过在大多数情况下，直接使用真实的 HTML 标签（比如 <span>）来放置内容，会比使用这些 CSS 伪类更简单也更直观。

列表

Tailwind 提供了两组用于控制 <li> 标签的类。

第一组是列表样式：

list-disc（项目符号列表，圆点样式）
list-decimal（编号列表）
list-none（无列表样式）

你还可以控制项目符号或数字相对于文字的位置：

list-inside（标记在文字框内部）
list-outside（标记在文字框外部）

此外，Tailwind 还提供了一个特殊的修饰符 marker:，用来为列表项的标记符号（项目符号或编号）设置样式。比如可以修改颜色：marker:text-blue-300，或者修改大小：marker:text-2xl。

marker 修饰符的一个优点是它支持继承—— 你可以把样式加在 <ul> 或 <ol> 标签上，它会自动作用到其中的所有 <li> 元素上。

排版插件

如果你希望页面上的长文本有一些易读的默认排版样式，Tailwind 提供了官方的排版插件（typography plugin）。

安装这个插件，首先需要添加对应的包：

$ yarn add @tailwindcss/typography

然后把它添加到 Tailwind 的配置文件中，现在配置文件中的 plugins 部分应该像这样：

module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

使用排版插件的方法是，在任意元素上添加 prose 类，例如：

html

<article class="prose">
  All your text
</article>

如果你想更直观地看看效果，可以访问我的博客：https://noelrappin.com/blog，这个网站就用了这个插件。

要调整文字大小，你可以使用大小修饰符，但必须和已经加了 prose 类的元素一起使用，例如：

html

<article class="prose prose-sm">
  All your text
</article>

基础字号是 1rem（也就是 16 点）。这些是可用的字号修饰符：

-sm 14pt -lg 18pt -xl 20pt -2xl 40pt

你也可以用不同的默认灰阶来指定，比如： prose prose-gray、prose prose-neutral、prose prose-slate、prose prose-stone 和 prose prose-zinc。

prose 插件的典型用法是包裹一段已有文本或渲染后的 Markdown。在这种情况下，prose 块内部的标记很可能是动态生成的 HTML 元素，你无法直接访问内部的具体元素。

这时，你可以针对 prose 块内的 HTML 元素专门自定义样式。通用的语法模式是：prose-{element}:{tailwind}

element 是 HTML 元素（大部分常见的排版元素都适用）
tailwind 是 Tailwind 的工具类

例如：

prose-h1:font-bold（给所有 h1 元素加粗）
prose-a:decoration-red-700（给所有链接添加红色下划线）

另外，有一个特殊的 header 元素，可以匹配所有标题元素（h1 到 h6）。

Tailwind 表单

Tailwind 提供了一个官方插件 @tailwindcss/forms，用于为表单元素提供一系列实用的默认样式。

和之前的排版插件类似，安装这个插件的第一步是先添加对应的包：

$ yarn add @tailwindcss/forms

然后在 Tailwind 的配置文件中添加 require('@tailwindcss/forms')：

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

这样就能为基本表单元素提供合理的默认样式。（演示见：https://tailwindcssforms.vercel.app）

对于输入框，插件会根据 type 属性来调整大小，因此即使是普通的输入框，也需要设置 type="text"，样式才能生效。

需要注意的是，Tailwind 表单样式不是完整的成品样式，它更像是一个更好的重置（reset），方便你在此基础上为自定义页面添加样式。

既然我们已经了解了排版，现在让我们把文字放到一个盒子里。

第 3 章 排版 ​

大小与形状 ​

颜色与不透明度 ​

对齐与间距 ​

特殊文本 ​

列表 ​

排版插件 ​

Tailwind 表单 ​

第 3 章排版

大小与形状

颜色与不透明度

对齐与间距

特殊文本

列表

排版插件

Tailwind 表单