typography插件必须手动安装、显式注册、按顺序加载,否则prose类完全不生效;需运行npm install并注册到plugins数组,且@tailwind base后紧接插件注入,html容器须含class="prose"并配合语义标签与max-w-类。

Typography插件必须手动安装、显式注册、按顺序加载,否则prose类完全不生效——这不是配置遗漏,而是加载链断裂。
安装与注册插件必须同步完成
只在 tailwind.config.js 里写 require("@tailwindcss/typography") 不够,npm 包没装的话会直接报错 Cannot find module '@tailwindcss/typography';装了但没注册进 plugins 数组,则 @layer base 的样式根本不会注入。
- 运行
npm install @tailwindcss/typography(或yarn add @tailwindcss/typography) - 确保
tailwind.config.js的plugins数组包含该插件:plugins: [require("@tailwindcss/typography")] - v4 用户注意:插件默认启用
prose-headings等变体;v3 用户若需这些功能,得在variants配置中手动开启
@tailwind 指令顺序决定 prose 是否能渲染
@tailwindcss/typography 注入的是 @layer base 样式,它必须紧接在 @tailwind base 之后、@tailwind components 之前。顺序错位会导致重置规则被覆盖或忽略。
- 检查你的入口 CSS(如
src/index.css),确保三者顺序严格为:@tailwind base;→@tailwind components;→@tailwind utilities; - 不要在
@tailwind base前手动写@layer base { },这会把插件的prose规则挤出有效作用域 - 如果用了自定义
@layer base,把插件 require 放到该 block 内部(不推荐,易出错)
prose 类生效有三个硬性前提
prose 不是“加了就变美”的装饰类,它是语义驱动的排版系统,依赖 HTML 结构、容器约束和字体上下文共同起效。
- HTML 容器必须带
class="prose",插件默认不作用于全局,也不响应prose-lg单独存在 - 内容必须用标准语义标签:
<p></p>、<h2></h2>、<ul></ul>、<blockquote></blockquote>等;纯<div> 或内联元素(如 <code><span></span>)不会被样式接管 - 必须配合
max-w-类限制宽度,prose自身无宽度控制;推荐max-w-3xl(64rem),避免大屏下单行过长 - 若设过
html { font-size: 62.5%; }(即 1rem = 10px),默认prose-base文字仅 10px,应改用prose-lg或prose-xl - 别混用多个尺寸类:
prose prose-lg prose-xl中后者会覆盖前者,且破坏插件内部的垂直节奏计算(如margin-bottom和line-height关系) - 移动端优先场景:用
prose-sm+sm:prose-base断点提升,比硬写prose-base更稳妥
字体缩放和尺寸变体容易互相干扰
所有 prose-* 尺寸类(如 prose-lg)基于 rem,实际大小直接受 html 元素的 font-size 影响。项目若改过根字体,prose-base 可能小到不可读。
最常被跳过的环节是检查 HTML 容器是否真带 class="prose",以及 @tailwind base 和插件注入顺序是否严格对齐——这两处任一出错,整个排版系统就静默失效,连控制台都不会报错。











