prose 类需严格遵循加载顺序、语义结构和配置控制才生效；否则会导致排版错乱、响应式失效或深色模式崩坏，常见原因包括@layer base位置错误、容器缺失prose类、使用非语义标签。
prose 类不是加了就生效的装饰，它依赖严格的加载顺序、语义结构和配置控制。不按规则来，轻则文字挤成一团、标题颜色错乱，重则响应式失效、深色模式下排版崩坏。
为什么 prose 没生效？先查这三处
常见失效不是代码写错了，而是基础链断了：
-
@layer base必须在@tailwind base之后、@tailwind components之前 —— 如果你在index.css里手动写了@layer base { }且位置靠前，会被后续@tailwind base覆盖 - HTML 容器没加
class="prose"—— 插件默认只作用于该类，不是全局生效 - 内容用了非语义标签（比如纯
<div> 或内联元素），而 <code>prose只识别<p></p>、<h1>–<h6></h6> </h1>、<ul></ul>、<blockquote></blockquote>等标准块级语义标签max-w-不是可选项，是必配项prose只重置行高、段距、字距等排版规则，它本身不设最大宽度。大屏下若不加限制，一行可能超百字符，阅读体验极差。- 推荐搭配
max-w-3xl（约 1024px），这是多数文章页的舒适阅读宽度 - 如果项目改过根字体（例如
html { font-size: 62.5%; }），prose-base的1rem会变成10px，文字过小；此时应改用prose-lg或prose-xl补偿 - 别同时写
prose prose-lg prose-xl—— 后者覆盖前者，还会破坏插件内部的垂直节奏计算逻辑
想改样式？别直接写
.prose h2硬写
.prose h2 { color: #3b82f6; }会绕过prose-sm、prose-invert等变体的继承链，导致暗色模式下标题不可读、小字号时行高错位。立即学习“前端免费学习笔记（深入）”；
- 统一控制所有标题：用
prose-headings（Tailwind v4 默认启用，v3 需在tailwind.config.js中显式开启variants） - 给链接加下划线：加
prose-a:underline，注意它只作用于<a></a>，不包括<button></button>或伪元素 - 单独定制某级标题：如
prose-h2:text-cyan-600，但前提是配置中未禁用prose-h2变体
性能拖慢？删掉不用的尺寸和元素
默认加载全部 5 种尺寸（
sm/base/lg/xl/2xl）和全部 HTML 元素样式（<pre class="brush:php;toolbar:false;"></pre>、<blockquote></blockquote>、<table> 等），哪怕你只用 <code><p></p>和<h2></h2>，也会多出几 KB CSS。- 在
tailwind.config.js的theme.extend.typography里精简：modifiers: ['sm', 'base', 'lg'] - 排除不需要的元素：
'blockquote': false、'pre': false，避免生成无用规则 -
prose-invert单独增加约 12KB 未压缩 CSS，仅在真正需要深色模式反色时才保留
最常被忽略的一点：prose 的字号单位是
rem，实际大小取决于html元素的font-size。改过根字体却没调尺寸变体，是文字突然变小或变大的根本原因。 - 推荐搭配
