Tailwind Typography 灰阶主题对比

Tailwind 提供了5种灰度排版主题，其目的在于适配不同设计语言中的灰度风格。

名称	风格倾向	色温倾向	应用感受
gray	默认 / 通用	中性偏暖	最通用、最传统
slate	冷感 / 科技风	偏冷	稍偏蓝调，适合代码类文档
zinc	金属感 / 极简风	冷灰	非常中性，适合 UI 组件说明文档
neutral	纯中性色	极中性	略偏灰黄，视觉最柔和
stone	自然风 / 柔和感	偏暖	类似纸张、石块，有自然复古感

为什么看起来好像“都差不多”？

默认背景色相同、字体较小，会掩盖它们在引用、列表符号、代码块、表格边框等处的细节色彩差异，但在不同主题中会有微妙差异。

H1：灰色主题 gray

H2：灰色小节

H3：子小节标题

这是一个段落内容，用来演示 `p` 的样式。包括行高、字间距、段距等相关的内容。

你可以写一些加粗、斜体或代码片段的文字。

这是一个引用区域。

无序列表项 A
无序列表项 B

有序列表 1
有序列表 2

function greet(name) {
  return 'Hello, ' + name + '!';
}

项目	说明
HTML	超文本标记语言
CSS	层叠样式表

H1：石板色主题 slate

H2：石板色小节

H3：子小节标题

这是一个段落内容，用来演示 `p` 的样式。包括行高、字间距、段距等相关的内容。

你可以写一些加粗、斜体或代码片段的文字。

这是一个引用区域。

无序列表项 A
无序列表项 B

有序列表 1
有序列表 2

function greet(name) {
  return 'Hello, ' + name + '!';
}

项目	说明
HTML	超文本标记语言
CSS	层叠样式表

H1：锌色主题 zinc

H2：锌色小节

H3：子小节标题

这是一个段落内容，用来演示 `p` 的样式。包括行高、字间距、段距等相关的内容。

你可以写一些加粗、斜体或代码片段的文字。

这是一个引用区域。

无序列表项 A
无序列表项 B

有序列表 1
有序列表 2

function greet(name) {
  return 'Hello, ' + name + '!';
}

项目	说明
HTML	超文本标记语言
CSS	层叠样式表

H1：中性色主题 neutral

H2：中性色小节

H3：子小节标题

这是一个段落内容，用来演示 `p` 的样式。包括行高、字间距、段距等相关的内容。

你可以写一些加粗、斜体或代码片段的文字。

这是一个引用区域。

无序列表项 A
无序列表项 B

有序列表 1
有序列表 2

function greet(name) {
  return 'Hello, ' + name + '!';
}

项目	说明
HTML	超文本标记语言
CSS	层叠样式表

H1：石色主题 stone

H2：石色小节

H3：子小节标题

这是一个段落内容，用来演示 `p` 的样式。包括行高、字间距、段距等相关的内容。

你可以写一些加粗、斜体或代码片段的文字。

这是一个引用区域。

无序列表项 A
无序列表项 B

有序列表 1
有序列表 2

function greet(name) {
  return 'Hello, ' + name + '!';
}

项目	说明
HTML	超文本标记语言
CSS	层叠样式表