Tailwind Typography 插件实践

这篇示例用于展示富文本场景下的中文排版表现，包括标题、段落、列表、引用、表格与代码块。

为什么需要 Typography 插件

Tailwind 默认会重置很多浏览器原生样式，这对应用 UI 很友好，但对“文章内容”并不总是理想。Typography 插件提供了 prose 类，能让长文在默认状态下就有较好的可读性。

使用方式

把 prose 类挂在文章容器上：

<article class="prose">
  <h1>示例标题</h1>
  <p>正文内容……</p>
</article>

中文场景建议

• 适当降低字距，避免“字与字太散”
• 段落行高控制在 1.6 到 1.8 之间
• 标题上下间距要有节奏差异
• 代码块与正文保持明显视觉分层

列表示例

• 这是第一条
• 这是第二条
• 这是第三条

表格示例

总结

Typography 插件的价值在于“快速得到可读性基线”。在此基础上再做中文细调，通常就能得到更稳定的阅读体验。