prose类不生效的三个硬性条件是：css加载顺序错误（@layer base未紧接@tailwind base后）、容器未加class="prose"、内容非标准语义html块级标签直系子元素。
prose 类不生效的三个硬性条件
不是插件装了就能用，prose 样式失效绝大多数是因为卡在这三处：CSS 加载顺序错、容器没加 class="prose"、内容 DOM 结构不合规。
-
@layer base必须紧接在@tailwind base后面——若你在index.css里提前写了@layer base，会被后续@tailwind base覆盖，Typography 规则压根没注入 - 必须显式给包裹容器加
class="prose"，它不会自动作用于所有p或h2 - 内容必须是语义化 HTML 块级标签直系子元素：
<p></p>、<h2></h2>、<blockquote></blockquote>等；如果ReactMarkdown或@nuxt/content输出的是<div><p>...</p></div>，那.prose p就匹配不到
ReactMarkdown / @nuxt/content 渲染后怎么套 prose？
直接 <div class="prose"><reactmarkdown></reactmarkdown></div> 是常见错误——它把整个 Markdown 输出包进一个 div，破坏了 prose 对“一级子元素”的选择器依赖。
News To Markdown
下载
输入文章 URL，返回干净 Markdown。支持17个平台（头条、微信公众号、知乎、36kr、虎嗅、华尔街见闻、澎湃、InfoQ 等）专项优化，双引擎提取、图片本地化、三层抓取策略。常与 browser‑web‑search skill配合：先用 bws 搜索获取 url 列表，再逐篇调用本 skill 提取正文。
- 禁用 wrapper：ReactMarkdown 传
components={{ wrapper: React.Fragment }}；@nuxt/content 的<contentrenderer></contentrenderer>默认已无 wrapper，但需确认未被自定义 layout 包裹 - 确保最终 DOM 中
prose元素下一级就是<p></p>、<h2></h2>，而不是<div> <p> </p> <li>若仍需 wrapper（比如加背景或 padding），用 <code><div class="prose [&_p]:my-4 [&_h2]:mt-8"> 这类任意变体微调，别动结构 <h3>如何定制 prose 内部样式（颜色/字体/间距）？</h3> <p>Typography 插件提供 <code>prose及其变体（如prose-lg、prose-invert），但默认值不能直接覆盖；得通过插件配置或@layer注入。- 在
tailwind.config.js的theme.extend.typography下写定制项，例如：h1: { fontSize: '2.5rem', fontWeight: '600' }，注意必须用extend，不是直接覆盖typography - 深色模式下要用
prose-invert，且确保@nuxtjs/color-mode或prefers-color-scheme正确触发；prose-invert不会自动继承 light 主题改写，得单独配一遍 - 局部调整某类元素，比如让所有
<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容器加max-w-none（默认）、max-w-prose（推荐）或自定义宽度，否则段落无限宽 -
prose基于1rem = 16px计算行高/边距，若项目全局改了html的font-size（比如设为62.5%），所有 prose 间距都会缩放失真 - 安全做法：在
prose容器上显式加text-base，或用prose-sm/prose-lg变体控制基准字号
最易被绕开的其实是 DOM 结构验证——哪怕配置全对，只要 DevTools 里看到
prose > div > p，就得回头检查渲染层是否多套了一层 wrapper。 - 在
