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>、<h2>、<ul>、<blockquote>等；纯<div>或内联元素（如<span>）不会被样式接管 - 必须配合
max-w-类限制宽度，prose自身无宽度控制；推荐max-w-3xl（64rem），避免大屏下单行过长
字体缩放和尺寸变体容易互相干扰
所有 prose-* 尺寸类（如 prose-lg）基于 rem，实际大小直接受 html 元素的 font-size 影响。项目若改过根字体，prose-base 可能小到不可读。
- 若设过
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更稳妥
最常被跳过的环节是检查 HTML 容器是否真带 class="prose"，以及 @tailwind base 和插件注入顺序是否严格对齐——这两处任一出错，整个排版系统就静默失效，连控制台都不会报错。
