BlocksRenderer 配合 TailwindCSS 时富文本格式丢失怎么办？

2026-11-04数据小陈

通常不需要修改 BlocksRenderer。先检查浏览器生成的 HTML：如果已经有 h1、ul、li 和 blockquote，可以从 CSS 样式入手。题目中的数据包含这些块结构，但仅凭控制台数据和页面外观，还无法确认最终 DOM 是否正确。

为什么只有粗体、斜体等格式正常？

启用 TailwindCSS 的 Preflight 后，浏览器默认的标题字号、列表标记和元素间距等样式会被重置。即使标题和列表标签正确生成，它们在页面上也可能看起来接近普通文本。

粗体、斜体等行内格式仍然可能可见，因此要分别检查 HTML 结构和 CSS 显示效果。

prose 本身不会把 HTML 转换成普通文本。它依赖 @tailwindcss/typography 提供的样式。如果插件没有正确加载，或者相关规则被其他 CSS 覆盖，仅添加类名可能不会产生预期效果。

先检查实际生成的 DOM

在浏览器开发者工具的 Elements 面板中定位富文本区域。对于题目中的数据，重点检查以下对应关系：

heading 且 level: 1：是否生成了 h1。
list 且 format: 'unordered'：是否生成了包含 li 的 ul。
quote：是否生成了 blockquote。

如果标签存在，就在 Computed 面板中查看 font-size、font-weight、list-style-type、margin、padding 和边框属性，并追踪生效规则的来源。

如果这些标签没有生成，再检查传给 content 的运行时值，以及项目是否使用了自定义 blocks 渲染配置。不要只因为页面看起来像普通文本，就认定富文本数据已经丢失。

方案一：使用 Typography 的 prose 样式

如果项目已经正确安装并启用了 @tailwindcss/typography，可以在 BlocksRenderer 外层添加容器：

import {
  BlocksRenderer,
  type BlocksContent,
} from '@strapi/blocks-react-renderer';

export function RichText({ content }: { content: BlocksContent }) {
  return (
    <div className="prose max-w-none">
      <BlocksRenderer content={content} />
    </div>
  );
}

prose 为后代标题、段落、列表和引用提供排版样式。max-w-none 用于取消 Typography 的默认最大宽度限制，可以按页面需要保留或移除。

题目没有提供 TailwindCSS 版本，插件的具体启用配置需要根据项目版本确定。如果已经添加了 prose，先确认浏览器加载了对应 CSS，再检查外层是否存在 not-prose，以及是否有其他规则覆盖了排版样式。

方案二：为富文本区域添加局部 CSS

如果不使用 Typography，可以用普通 CSS 设置所需样式，也可以借此确认问题是否来自样式重置。

import {
  BlocksRenderer,
  type BlocksContent,
} from '@strapi/blocks-react-renderer';

export function RichText({ content }: { content: BlocksContent }) {
  return (
    <div className="cms-richtext">
      <BlocksRenderer content={content} />
    </div>
  );
}

将以下规则放入项目实际加载的样式文件中：

.cms-richtext :where(h1, h2, h3, h4, h5, h6) {
  margin-block: 1.25em 0.5em;
  font-weight: 700;
  line-height: 1.3;
}

.cms-richtext h1 { font-size: 2em; }
.cms-richtext h2 { font-size: 1.5em; }
.cms-richtext h3 { font-size: 1.25em; }
.cms-richtext h4 { font-size: 1.125em; }
.cms-richtext h5 { font-size: 1em; }
.cms-richtext h6 { font-size: 0.875em; }

.cms-richtext p {
  margin-block: 0.75em;
}

.cms-richtext ul {
  list-style-type: disc;
}

.cms-richtext ol {
  list-style-type: decimal;
}

.cms-richtext :where(ul, ol) {
  margin-block: 0.75em;
  padding-inline-start: 1.5em;
  list-style-position: outside;
}

.cms-richtext li {
  margin-block: 0.25em;
}

.cms-richtext blockquote {
  margin-block: 1em;
  padding-inline-start: 1em;
  border-inline-start: 3px solid #9ca3af;
  color: #4b5563;
}

这里的字号、颜色和间距仅作示例，可以按设计要求调整。如果规则没有生效，继续检查 CSS 层叠顺序、选择器优先级和 cascade layer，不必直接增加 !important。

什么时候才需要自定义 renderer？

如果需要为标题添加锚点、为链接设置特殊行为，或将某类块替换为业务组件，可以通过 BlocksRenderer 的 blocks 配置定制渲染。要恢复标题字号、列表符号和引用边框，通常只需补充 CSS。

另外，data.content as BlocksContent 是 TypeScript 类型断言，不会在运行时校验或转换数据。题目展示的数据包含相应的块结构，排障时仍应确认传入组件的实际值与这份输出一致。