@tailwindcss/typography 非开箱即用，需满足CSS加载顺序正确、HTML容器带class="prose"、内容使用标准语义标签三条件；prose类失效主因是链路中断，尺寸类需按根字体适配，样式定制应通过变体而非硬写CSS，性能优化需精简尺寸与元素配置。
它不是“装完就能用”的开箱即用型插件，@tailwindcss/typography 必须满足三个硬性条件：CSS 加载顺序正确、HTML 容器带 class="prose"、内容使用标准语义标签（<p></p>、<h2></h2>、<blockquote></blockquote> 等），缺一不可。
为什么 prose 类完全没反应？先盯住这三处
常见失效现象是加了 prose 但文字排版毫无变化，甚至比默认还乱。根本原因往往不是插件没装，而是底层链路断了：
- CSS 加载顺序错位：插件样式注入在
@layer base，必须确保它出现在@tailwind base之后、@tailwind components之前；手动写的@layer base { }若位置靠前，会被后续@tailwind base覆盖 - HTML 容器漏加
class="prose"——插件默认只作用于该类，不全局生效，也不是“写进就自动套用” - 内容结构非语义化：比如把 Markdown 渲染结果直接塞进
<div>，而里面全是 <code><span></span>或内联文本，@tailwindcss/typography只对<p></p>、<h1></h1>–<h6></h6>、<ul></ul>、<pre class="brush:php;toolbar:false;"></pre>等标准块级标签生效prose 尺寸类怎么选？别被 rem 坑了
prose的字号单位是rem，实际大小取决于html元素的font-size。如果你项目里改过根字体（比如html { font-size: 62.5%; }），那prose-base的1rem就会变成10px，文字小得没法读。- 移动端优先：用
prose-sm或prose-base，再配合sm:prose-base在中屏提升 - 桌面端正文舒适区：通常
prose-lg（1.125rem）更合适；prose-xl适合长文或阅读型站点 - 绝对不要同时写
prose prose-lg prose-xl——后者会覆盖前者，且破坏插件内部的垂直节奏计算逻辑
想改标题颜色或链接样式？别直接写 CSS
硬写
.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 不设最大宽度，
max-w-类必须手动加，否则大屏下一行几百字符根本没法读；还有，它对非语义化 HTML 完全静默——不是 bug，是设计使然。 - 移动端优先：用
