最小可行渲染链需用 react-markdown 的 components prop 精准映射关键 html 标签为 tailwind 类：h1–h6、p、ul/ol、code、pre、blockquote、table；pre 必套 code 并分别设类；table 必用 table-fixed + overflow-x-auto + touch-pan-x + col 宽度控制；代码块靠 pre 滚动、code 保留缩进；字体行高须根级统一声明，避免组件内重复设置。

react-markdown + Tailwind 的最小可行渲染链

直接用 react-markdown 渲染原始 Markdown，不加任何样式，结果几乎不可读：标题无层级、代码块溢出、列表缩进错乱、表格撑破容器。必须让每个 HTML 元素落地为带语义的 Tailwind 类，而不是靠全局重置。

核心是把 react-markdown 的 components prop 当作“元素翻译表”——不是覆盖所有标签，只处理关键节点：h1–h6、p、ul/ol、code、pre、blockquote、table。其他如 em、strong 保持默认继承即可。

• pre 必须包裹 code，且两者都要设类：pre 控制边框/圆角/滚动，code 控制字体/颜色/内边距
• table 不能只加 table-auto，必须走 table-fixed 路线（见下一条）
• 避免在 components 里写内联 style，全部走 class；否则无法和 JIT 模式下的 PurgeCSS 协同

table-fixed 是 Markdown 表格唯一靠谱的解法

Markdown 解析器生成的 table 标签默认没列宽控制，一遇到长 URL 或 JSON 字段，整列被撑开，小屏直接横向滚动失灵。这不是内容问题，是渲染策略错误。

table-fixed 强制浏览器跳过内容测量，按首行 th 或显式 col 宽度分配列宽，对后台日志、API 响应这类不可控字段场景几乎是刚需。

• 必须搭配外层 <div class="overflow-x-auto touch-pan-x"> —— iOS Safari 不加 <code>touch-pan-x 就滑不动
• <table class="table-fixed w-full"> 缺一不可，单独加 <code>table-fixed 无效
• 列宽推荐用 <col class="w-1/4"> 而非依赖 th 文本长度，后者在“ID” vs “X-Forwarded-For-Header”这种场景下必然失衡
• 单元格内文本需加 whitespace-normal 或 truncate，否则长字符串强制不换行，绕过列宽限制

代码块要滚动、要语法高亮、还要不破坏流式布局

纯 Tailwind 不提供语法高亮，但可以无缝对接 shiki 或 prism-react-renderer。重点不在“怎么高亮”，而在“怎么不崩布局”。


Xlsx To Markdown
文档转 Markdown 转换器 - 将 DOCX、PPTX、Excel 文件转换为 Markdown。用于从 Word 文档、PowerPoint 演示文稿或 E... 提取内容。
下载

常见错误是给 pre 加 max-w-full 或 break-words，结果代码折行、缩进错乱、复制时多出换行符。

• pre 设 overflow-x-auto + rounded-lg + border，宽度由父容器约束
• code 内部设 block + whitespace-pre + font-mono + text-sm，确保空格/缩进原样保留
• 不要给 code 加 max-w- 类，它应随内容自然延展，靠 pre 的横向滚动兜底
• 若用 shiki，其输出已是带 span 的 HTML，只需确保这些 span 不被 PurgeCSS 误删 —— 把 shiki 的 class 前缀加入 tailwind.config.js 的 safelist

字体与行高必须统一声明，不能靠组件局部覆盖

Markdown 内容里混着标题、正文、引用、代码，如果每个都单独设 font-sans / font-mono，HTML 体积暴增，且易漏配。Tailwind 的字体栈必须在根级锚定。

例如正文段落 p 和列表项 li 都该继承同一套 font-family、leading-relaxed、text-base，而不是在 components 里分别写 class="font-sans leading-relaxed text-base"。

• 在 tailwind.config.js 的 theme.fontFamily.sans 里显式覆盖为 ['InterVar', 'system-ui']，并配好 font-display: swap
• 所有段落级元素（p、li、blockquote p）统一用 prose 或自定义类如 md-content 包裹，再设 font-sans 和 leading-relaxed
• 避免在 components 中重复写 text-gray-800 这类颜色 —— 改 theme.textColor 更干净，也方便暗色模式切换

真正难的不是写对某一行 class，而是让所有 Markdown 元素共享一套可预测的排版基线。一旦某个 h3 忘了设 mt-8，或某处 blockquote 没继承 border-l-4，整篇阅读节奏就断了。这得靠配置驱动，而不是手写补丁。