prose类未生效需检查CSS加载顺序、HTML容器是否添加class="prose"、内容是否使用语义标签；文字拥挤需配max-w-*；字体异常应选用合适prose尺寸；样式定制优先用修饰符而非硬写CSS；性能优化可精简尺寸与元素配置。
prose类没生效？先查CSS加载顺序和class位置
插件样式注入在@layer base，必须确保它出现在@tailwind base之后、@tailwind components之前。常见错误包括：
- 在
index.css里手动写了@layer base { }，但位置靠前，被后续@tailwind base覆盖 - HTML容器没加
class="prose"——插件默认只作用于该类，不是全局生效 - 内容用了
<div>或纯文本，而插件只对标准语义标签（<p>、<h1>–<h6>、<ul>、<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——后者会覆盖前者，且破坏插件内部的垂直节奏计算逻辑
想改标题颜色或链接样式？用修饰符，别硬写CSS
直接写.prose h2 { color: #3b82f6; }看似简单，但会绕过插件对prose-sm、prose-invert等变体的继承链，导致暗色模式下标题不可读、小字号时行高错位。
- 统一控制所有标题：用
prose-headings（Tailwind v4 默认启用，v3 需在tailwind.config.js中显式开启variants） - 给链接加下划线：加
prose-a:underline，注意它只作用于<a>，不包括按钮或伪元素 - 单独定制某级标题：如
prose-h2:text-cyan-600，前提是配置中未禁用prose-h2变体
性能拖慢？删掉不用的尺寸和元素样式
默认加载全部5种尺寸（sm/base/lg/xl/2xl）和全部HTML元素样式（<pre>、<blockquote>、<table>等），哪怕你只用<p>和<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，整个垂直节奏就可能崩掉，且无法通过变体恢复。
