prose类不生效需确认三件事：CSS加载顺序中@layer base必须紧接@tailwind base后；容器必须显式添加class="prose"；DOM结构需为语义化块级标签的直系子元素，禁用多余wrapper。

prose类不生效？先确认这三件事

绝大多数人卡在“装了插件但样式没出来”，根本不是插件问题，而是三个硬性条件没满足：

• CSS加载顺序错：@layer base 必须紧接在 @tailwind base 后面；若你提前写了 @layer base，它会被后续 @tailwind base 覆盖，Typography 规则压根不会注入
• 容器没加 class="prose"：它不会自动作用于所有
  

  CSS

  CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

  下载
  或
  ，必须显式包裹
• DOM结构不合规：内容必须是语义化块级标签的直系子元素，比如
  、
  、
  ；如果 ReactMarkdown 渲染出来是

  ...

  ，那 .prose p 就完全匹配不到

ReactMarkdown / @nuxt/content 怎么套 prose？别用 div 包一层

直接写

是常见错误——它把整个 Markdown 输出包进一个

，破坏了 prose 对“一级子元素”的选择器依赖。

• 禁用 wrapper：ReactMarkdown 传 components={{ wrapper: React.Fragment }}；@nuxt/content 的 默认已无 wrapper，但需确认未被自定义 layout 包裹
• 检查最终 DOM：确保 .prose 下一级就是
  、
  ，而不是嵌套在
  里
• 若真需要 wrapper（比如加背景或 padding），改用变体语法：
  ，别动结构

  怎么改 prose 里的 code、h2、blockquote 样式？

  默认值不能直接覆盖，得靠插件配置或 @layer 注入：

  • 全局定制：在 tailwind.config.js 的 theme.extend.typography 下写，例如 h2: { fontSize: '1.5rem', fontWeight: '700' }；注意必须用 extend，不是直接覆盖 typography
  • 深色模式要单独配：prose-invert 不会自动继承 light 主题改写，得在 typography 配置里为 dark 分支再写一遍
  • 局部微调某类元素：比如让所有 带背景，用 @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 只管排版逻辑（行高、间距、缩进），不管容器尺寸和根字体大小。结果就是文字撑满全屏、小字糊成一片。

  • 必须手动加宽度控制：
    或直接用 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 看起来就像没生效，其实它早就在那儿了，只是被撑开或压扁了。