直接套用 Tailwind class 对富文本无效，因其仅作用于手写 class 属性，不接管富文本自动生成的 HTML 结构与内联样式；需用 @layer base 全局重置语义标签样式或借助 prose 插件统一排版。
为什么直接套用 Tailwind class 对富文本无效
富文本内容（比如从 CMS、Markdown 渲染器或 contenteditable 输出的 HTML）通常自带内联样式或嵌套结构，而 Tailwind 的实用类只作用于你手写的 class 属性——它不会自动重写 <p>、<h2>、<ul> 这些标签的默认浏览器样式，也不会接管富文本生成的 class 名（如 wp-block-paragraph 或 ql-align-center）。
常见现象：你在富文本里写了 <p class="text-lg">Hello</p>，但实际渲染出来字体大小没变，因为父容器或富文本编辑器注入了更高优先级的 CSS 规则，或者该 p 标签被包裹在未加 Tailwind 类的外层容器中。
- 富文本输出的 HTML 是“被动内容”，Tailwind 不扫描也不接管它，除非你显式控制其容器和子元素的 class
-
text-lg这类类名只对当前元素生效，不继承、不穿透；若富文本里有<strong>，它不会自动获得font-bold - 响应式断点（如
md:text-xl）在富文本内部失效，除非每个标签都手动加，这不可维护
用 @layer base 统一重置富文本根标签样式
最稳定的做法不是给每个富文本片段加 class，而是用 Tailwind 的 @layer base 在全局 CSS 中批量重写常用语义标签的默认表现。这样无论富文本怎么生成 HTML，只要结构是标准的，就能被统一接管。
在你的主 CSS 入口文件（如 src/input.css）中添加：
立即学习“前端免费学习笔记（深入）”；
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
p {
@apply text-base leading-relaxed text-gray-700;
}
h1 {
@apply text-3xl font-bold mt-8 mb-4;
}
h2 {
@apply text-2xl font-semibold mt-6 mb-3;
}
ul, ol {
@apply my-4 pl-6 space-y-2;
}
li {
@apply text-gray-600;
}
a {
@apply text-blue-600 underline hover:text-blue-800;
}
img {
@apply max-w-full h-auto rounded-lg;
}
}
注意：@layer base 必须放在 @tailwind base 之后，且不能写在 @layer components 或 @layer utilities 里，否则会被忽略。
- 这种方式绕过了“在 HTML 中补 class”的繁琐操作，适合 CMS 输出、MD 转 HTML、用户提交内容等场景
- 所有规则都会被 JIT 编译进最终 CSS，无需担心体积膨胀（Tailwind 只打包实际用到的标签）
- 若富文本含自定义 class（如
highlight），可额外在@layer components里定义，不影响 base 层
用 prose 插件快速启用语义化排版
Tailwind 官方插件 @tailwindcss/typography 提供了 prose 类，专为富文本设计。它不是简单加 class，而是注入一整套经过排版验证的、带层级关系的样式规则，支持响应式、暗色模式、代码块高亮等。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
启用步骤：
- 安装：
yarn add -D @tailwindcss/typography或npm install -D @tailwindcss/typography - 在
tailwind.config.js的plugins数组中加入：require('@tailwindcss/typography') - 在富文本容器上加 class：
<article class="prose prose-lg">...</article>
prose 自动处理：blockquote 缩进与边框、pre + code 高亮背景、table 斑马纹、img 响应式居中、h1–h6 尺寸阶梯等。你还可以用 prose-invert 适配深色背景，或用 prose-headings:underline（需配合插件配置）微调子项。
⚠️ 注意：prose 不会修改富文本里的 class 属性，它只通过 CSS 选择器匹配标准 HTML 标签。所以确保富文本输出的是语义化 HTML（如用 <h2> 而非 <div class="heading-2">）。
避免用 !important 或内联 style 破坏一致性
富文本编辑器（如 TinyMCE、Quill、CKEditor）常会输出带 style 属性的标签，例如：<p style="font-size: 18px; margin-bottom: 24px;">。这类内联样式优先级高于 Tailwind 生成的 CSS，会导致 @layer base 或 prose 失效。
解决思路不是硬覆盖，而是从源头控制：
- 在编辑器初始化时禁用内联样式：TinyMCE 设置
formats: { p: { inline: 'span', remove_similar: true } }；Quill 配置formats白名单，剔除size、color等易产出 style 的格式 - 服务端清洗：入库前用 DOMPurify 或自定义正则移除
style属性（保留class） - 前端运行时清理（仅调试用）：
element.querySelectorAll('*').forEach(el => el.removeAttribute('style'))，但不推荐用于生产
真正难处理的不是样式本身，而是富文本结构的不确定性——比如嵌套 div 包裹 p、无序列表里混用 span、或自定义 block 渲染为 figure 却没加 class。这时候，@layer base 和 prose 的能力边界就浮现了：它们只管标准标签。非标结构必须靠编辑器导出配置或前端解析后 patch。
