Xlsx To Markdown
下载
文档转 Markdown 转换器 - 将 DOCX、PPTX、Excel 文件转换为 Markdown。用于从 Word 文档、PowerPoint 演示文稿或 E... 提取内容。
prose类未生效因三大硬性条件未满足：css加载顺序错误（@layer base须紧接@tailwind base后）、容器未加class="prose"、内容非标准语义html标签；reactmarkdown需禁用wrapper并确保dom一级子元素为p/h2等块级标签；还需配合max-w-*限制宽度及正确设置根字体大小。
prose类为什么没生效？先看三个硬性条件
Typography插件不是“装完就能用”，它依赖三处明确配合：CSS加载顺序、HTML class 位置、内容语义结构。缺一不可。
-
@tailwind base必须在@tailwind components和@tailwind utilities之前，而@layer base（Typography 插件注入点）必须紧接在@tailwind base后面；常见错误是手动在index.css里提前写了@layer base，结果被后续@tailwind base覆盖 - 容器元素必须显式添加
class="prose"—— 插件默认只作用于该 class，不全局接管p或h2 - 内容需为标准 HTML 语义标签：
<p></p>、<h1></h1>–<h6></h6>、<ul></ul>、<blockquote></blockquote>等；若react-markdown输出的是纯文本或内联节点（如<span></span>包裹的段落），prose 规则不会命中
react-markdown 渲染后怎么套上 prose 样式？别直接包 div
直接给 <div class="prose"><reactmarkdown></reactmarkdown></div> 是错的——ReactMarkdown 默认把整个文档当一个 div 渲染，内部所有 p、h2 都成了子元素，但 prose 的样式规则（如 .prose p）只对直系子块级元素生效，且依赖其语义层级。
- 正确做法：用
componentsprop 显式接管每类节点，例如p: ({node, ...props}) => <p classname="prose-p"></p>，再配合prose容器统一控制节奏 - 更稳妥方案：让
ReactMarkdown输出纯净语义 HTML（禁用 wrapper），再用className="prose"包住整个输出区域，并确保它只包含p、h2、ul这类顶层块级标签 - 检查渲染结果：打开 DevTools，确认最终 DOM 中
prose元素下一级确实是<p></p>、<h2></h2>，而不是<div> <p> 套娃 </p> <h3>文字挤成一团、字号小得看不见？宽度和根字体必须同步调</h3> <p><code>prose类本身不设max-w-，也不适配被修改过的根字体。这两点不处理，排版就只是“看起来用了”，实际阅读体验极差。- 必须加宽度限制：
class="prose max-w-3xl"是多数场景安全起点；若内容含代码块或表格，可升到max-w-4xl，但避免无限制拉满 - 如果项目改过
html { font-size: 62.5%; }，那么prose-base的1rem就变成10px，文字肉眼难辨；此时应改用prose-lg或prose-xl补偿，而非硬调 CSS - 别同时写
prose prose-lg prose-xl—— 后者会覆盖前者，且破坏插件内置的行高/间距比例链，导致段落呼吸感消失
想改链接颜色或标题样式？修饰符是唯一安全路径
直接写
.prose a { color: #3b82f6; }看似快，但会绕过插件对prose-invert、prose-sm等变体的样式继承逻辑，深色模式下链接可能彻底不可见。- 统一改所有标题颜色：用
prose-headings（v4 默认启用，v3 需在tailwind.config.js中开启variants: ['prose-headings']） - 只改 h2：加
prose-h2:text-cyan-600，前提是配置中未禁用prose-h2变体 - 给链接加下划线：
prose-a:underline，注意它只作用于<a></a>，不包括<button></button>或伪元素 - 自定义 blockquote 边框色？先确认配置里没关掉：
'blockquote': true，再用prose-blockquote:border-l-4 prose-blockquote:border-amber-500
真正卡住人的从来不是“怎么加 class”，而是 prose 把语义结构、视觉节奏、响应式断点全绑在一起。漏掉一个环节，比如忘了
max-w-或误删了prose-headings配置项，整篇文字的呼吸感就没了——这种问题往往要靠 DevTools 逐层检查 computed styles 才能定位。 - 必须加宽度限制：
