prose类失效主因是css加载顺序错误、html未加class="prose"、内容非标准语义标签；需配合max-w-*控制宽度，避免字体缩放导致文字过小，样式定制应使用修饰符而非直接写css，性能优化可精简尺寸和元素。
prose类没生效？先查CSS加载顺序和class位置
插件样式注入在 @layer base，必须确保它出现在 @tailwind base 之后、@tailwind components 之前。常见失效原因包括：
- 在
index.css里手动写了@layer base { }，但位置靠前，被后续@tailwind base覆盖 - HTML容器没加
class="prose"—— 插件默认只作用于该类，不是全局生效 - 用了
prose但内容是纯文本或内联元素（如<span></span>），而插件只对标准块级语义标签（<p></p>、<h1></h1>–<h6></h6>、<ul></ul>、<blockquote></blockquote>等）生效
文字挤成一团？必须配合max-w-*控制宽度
prose 类本身不设最大宽度，只重置排版规则（行高、字距、段间距等）。大屏下若不加限制，一行可能超百字符，阅读体验极差。
- 推荐搭配
max-w-3xl（相当于 64rem / ~1024px），这是多数文章页的舒适阅读宽度 - 若项目根字体被修改过（例如
html { font-size: 62.5%; }），prose-base的 1rem 会变成 10px，文字过小；此时应改用prose-lg或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>，不包括按钮或伪元素 - 单独定制某级标题：如
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，仅在真正需要深色反色时才保留
Typography 插件真正难的不是加 class，而是理解它把「语义层级」和「视觉样式」做了强绑定——一旦你手动覆盖 prose p 的 margin-bottom，后续所有尺寸变体的垂直节奏都会错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
