TailwindCSS 路线 05：长文排版——Typography 插件、代码块与内容规范

Tailwind 很多人只用来写“组件”，但长文排版往往决定了内容产品的专业感。

好消息是：这个仓库已经在用 prose（Typography 插件）来渲染文章正文。

01 目标与验收#

目标：把文章正文的排版变成“全站统一且可维护”的样子。

验收：

• h2/h3 的间距规律，阅读不累
• 列表、引用、链接风格统一
• 代码块在浅色/深色都清晰
• 图片圆角与阴影一致（不突兀）

02 你应该怎么用 prose#

核心规则：用 prose 管内容，用工具类管布局。

• 页面外层：max-w-3xl、px、py
• 正文区域：prose + 少量 prose-* 细调

03 练习：做一篇“排版压力测试”文章#

新建一篇文章，包含：

• 三级标题（h2/h3/h4）
• 有序/无序列表（嵌套）
• 引用（blockquote）
• 表格（GFM table）
• 行内 code + 代码块（含长行）
• 1 张图片

你会非常直观地发现：哪些地方需要统一的节奏与对比。

04 小结#

组件能让产品“可用”，排版能让内容“耐读”。下一篇我们做交互反馈：动画与过渡怎么“恰到好处”，既不花里胡哨，也不显得生硬。