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>、<h2>、<blockquote>等；如果ReactMarkdown或@nuxt/content输出的是<div><p>...</p></div>，那.prose p就匹配不到
ReactMarkdown / @nuxt/content 渲染后怎么套 prose？
直接 <div class="prose"><ReactMarkdown /></div> 是常见错误——它把整个 Markdown 输出包进一个 div，破坏了 prose 对“一级子元素”的选择器依赖。
- 禁用 wrapper：ReactMarkdown 传
components={{ wrapper: React.Fragment }}；@nuxt/content 的<ContentRenderer />默认已无 wrapper，但需确认未被自定义 layout 包裹 - 确保最终 DOM 中
prose元素下一级就是<p>、<h2>，而不是<div><p> - 若仍需 wrapper（比如加背景或 padding），用
<div class="prose [&_p]:my-4 [&_h2]:mt-8">这类任意变体微调，别动结构
如何定制 prose 内部样式（颜色/字体/间距）？
Typography 插件提供 prose 及其变体（如 prose-lg、prose-invert），但默认值不能直接覆盖；得通过插件配置或 @layer 注入。
News To Markdown
下载
输入文章 URL，返回干净 Markdown。支持17个平台（头条、微信公众号、知乎、36kr、虎嗅、华尔街见闻、澎湃、InfoQ 等）专项优化，双引擎提取、图片本地化、三层抓取策略。常与 browser‑web‑search skill配合：先用 bws 搜索获取 url 列表，再逐篇调用本 skill 提取正文。
- 在
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。
