prose类不生效需确认三件事：CSS加载顺序中@layer base必须紧接@tailwind base后；容器必须显式添加class="prose"；DOM结构需为语义化块级标签的直系子元素，禁用多余wrapper。
prose类不生效？先确认这三件事
绝大多数人卡在“装了插件但样式没出来”，根本不是插件问题，而是三个硬性条件没满足：
- CSS加载顺序错：
@layer base必须紧接在@tailwind base后面；若你提前写了@layer base，它会被后续@tailwind base覆盖，Typography 规则压根不会注入 - 容器没加
class="prose"：它不会自动作用于所有<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/gongju/2905" title="CSS"><img src="https://img.php.cn/upload/manual/000/969/633/6af2b1226ad9e733.png" alt="CSS" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/gongju/2905" title="CSS">CSS</a> <p>CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。</p> </div> <a href="/xiazai/gongju/2905" title="CSS" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>或<h2></h2>，必须显式包裹 - DOM结构不合规：内容必须是语义化块级标签的直系子元素，比如
<p></p>、<h2></h2>、<blockquote></blockquote>；如果ReactMarkdown渲染出来是<div><p>...</p></div>，那.prose p就完全匹配不到
ReactMarkdown / @nuxt/content 怎么套 prose？别用 div 包一层
直接写 <div class="prose"><reactmarkdown></reactmarkdown></div> 是常见错误——它把整个 Markdown 输出包进一个 <div>，破坏了 prose 对“一级子元素”的选择器依赖。
<ul>
<li>禁用 wrapper：<code>ReactMarkdown 传 components={{ wrapper: React.Fragment }}；@nuxt/content 的 <contentrenderer></contentrenderer> 默认已无 wrapper，但需确认未被自定义 layout 包裹
.prose 下一级就是 <p></p>、<h2></h2>，而不是嵌套在 <div> 里
<li>若真需要 wrapper（比如加背景或 padding），改用变体语法：<code><div class="prose [&_p]:my-4 [&_h2]:mt-8">，别动结构
<h3>怎么改 prose 里的 code、h2、blockquote 样式？</h3>
<p>默认值不能直接覆盖，得靠插件配置或 <code>@layer 注入：
立即学习“前端免费学习笔记（深入）”；
- 全局定制：在
tailwind.config.js的theme.extend.typography下写，例如h2: { fontSize: '1.5rem', fontWeight: '700' }；注意必须用extend，不是直接覆盖typography - 深色模式要单独配：
prose-invert不会自动继承 light 主题改写，得在typography配置里为dark分支再写一遍 - 局部微调某类元素：比如让所有
<code>带背景，用@layer base { .prose code { @apply bg-gray-100 dark:bg-gray-800 px-1 rounded; } }；注意必须放在@tailwind base后、@tailwind components前
max-w-prose 和 font-size 为什么总被忽略？
很多人只加了 prose，但没意识到它本身不设宽度和基础字号——prose 只管排版逻辑（行高、间距、缩进），不管容器尺寸和根字体大小。结果就是文字撑满全屏、小字糊成一片。
- 必须手动加宽度控制：
<div class="prose max-w-none md:max-w-3xl"> 或直接用 <code>prose-lg（它自带max-w-prose和放大字号） -
prose默认字号是1rem，也就是继承父容器字体大小；若父容器没设font-size，就可能极小；建议在prose容器上加text-base或统一设font-size: 16px - 响应式断点要对齐：Tailwind 的
prose-sm/prose-lg使用的是内置断点，若你自定义了theme.screens，得同步调整typography配置里的fontSize断点映射
最常漏掉的是 @layer base 的位置和 max-w- 类的搭配——这两处一错，prose 看起来就像没生效，其实它早就在那儿了，只是被撑开或压扁了。
