<p>prose 是一套有严格依赖和语义绑定的排版系统，需按规则使用：确保 CSS 加载顺序正确、添加 class="prose"、配合 max-w-* 限制宽度、合理选用尺寸变体、通过修饰符而非直接写 CSS 自定义样式，并在配置中精简未用功能以保障性能与节奏一致性。</p>
prose 类不是“加了就完事”的装饰，它是一套有严格依赖和语义绑定的排版系统。不按规则用，轻则样式错乱、响应式失效，重则整个排版节奏崩坏。
为什么 prose 没生效？检查 CSS 加载顺序和 class 位置
插件样式注入在 @layer base，必须确保它出现在 @tailwind base 之后、@tailwind components 之前。
- 常见错误是：在
index.css里手动写了@layer base { }，但位置靠前，被后续@tailwind base覆盖 - 没加
class="prose"——插件默认只作用于该类，不是全局生效 - 容器没限制宽度，
prose本身不设max-w-，大屏下一行几百字符根本没法读，得配max-w-3xl或类似类
prose-sm / prose-lg 等尺寸变体怎么选？别硬套，默认值会受根字体影响
prose 的字号单位是 rem，实际大小取决于 html 元素的 font-size。
- 如果项目里改过根字体（比如
html { font-size: 62.5%; }），prose-base（默认1rem = 16px）就会变成10px，文字小得看不清 - 移动端优先：用
prose-sm或prose-base，再配合sm:prose-base做断点提升 - 桌面端正文舒适区：通常
prose-lg（1.125rem）更合适，prose-xl适合长文或阅读型站点 - 别同时堆多个尺寸类，比如
prose prose-lg prose-xl——后者会覆盖前者，且破坏插件内部的垂直节奏计算
想改标题颜色或链接下划线？别直接写 .prose h2，用修饰符
硬写 .prose h2 { color: #3b82f6; } 看似简单，但会绕过插件对 prose-sm/prose-invert 等变体的样式继承逻辑。
立即学习“前端免费学习笔记（深入）”；
- 统一控制所有标题：用
prose-headings（v4 默认启用，v3 需在配置中开启variants） - 给链接加下划线：加
prose-a:underline，注意它只作用于<a>，不包括<button>或伪元素 - 自定义某一级标题：如
prose-h2:text-cyan-600，但前提是配置里没禁用prose-h2变体
性能关键：删掉不用的尺寸和元素样式
默认加载全部 5 种尺寸（sm/base/lg/xl/2xl）和全部 HTML 元素样式（blockquote、ol、pre 等），哪怕你只用 p 和 h2，也会多出几 KB CSS。
- 在
tailwind.config.js的theme.extend.typography里精简：modifiers: ['sm', 'base', 'lg'] - 排除不需要的元素：
'blockquote': false、'pre': false，避免生成无用规则 -
prose-invert单独增加约 12KB 未压缩 CSS，仅在真正需要深色模式反色时才保留
真正难的不是加 class="prose"，而是理解它把「语义层级」和「视觉样式」做了强绑定——一旦你手动覆盖 prose p 的 margin-bottom，后续所有 prose-sm、prose-xl 的垂直节奏都会错位。
