Typography插件没生效？检查@layer和@tailwind base顺序
插件不生效最常见原因是CSS加载顺序错乱。Tailwind的Typography插件依赖@layer base注入样式，必须确保它出现在@tailwind base之后、@tailwind components之前。
- 在
tailwind.config.js中启用插件后，必须在CSS入口文件（如src/index.css）里按顺序写：@tailwind base→@tailwind components→@tailwind utilities - Typography的样式定义在
@layer base里，如果手动写了@layer base { ... }但位置靠前，会被后续@tailwind base覆盖 - 插件默认只作用于
prose类，不是全局生效；没加class="prose"就看不到任何变化
prose类为什么文字还是太挤？调整max-w-和prose-变体
prose本身不设宽度，只是重置排版规则。实际阅读体验差，往往是因为容器太宽或行高/字距没适配。
- 必须配合宽度限制使用，比如
class="prose max-w-3xl"，否则在大屏上一行几百字符根本没法读 - 默认
prose用rem单位，但字体大小受根元素影响；若项目根字体被改过（如html { font-size: 62.5%; }），需用prose-lg或prose-xl补偿 -
prose-headings:font-semibold这类变体需在配置中显式开启variants，否则prose-h1:font-bold不会生效
自定义标题层级或链接样式？别直接覆盖，用prose-headings和prose-a
想改h2颜色或给链接加下划线，硬写.prose h2 { color: #3b82f6; }会破坏插件响应式逻辑，且无法继承prose-lg等尺寸变体。
- 插件提供预设修饰类：
prose-headings:font-bold prose-headings:text-slate-800可统一控制所有标题 - 链接支持
prose-a:text-blue-600 prose-a:underline prose-a:decoration-dotted，注意prose-a只作用于<a></a>，不包括<button></button>或伪元素 - 若要单独改h3，得用
prose-h3:text-indigo-700，但需确认配置中启用了headingStyles（v4默认开，v3需手动设）
生产环境CSS体积暴增？禁用不用的prose-变体
Typography插件默认生成大量响应式、尺寸、颜色变体，但多数项目只用prose + prose-lg + prose-invert三个。
- 在
tailwind.config.js的theme.extend.typography里，用fontSize和fontWeight精简范围，例如只留['sm', 'base', 'lg'] - 禁用整套变体：设置
typography: { modifiers: [] }，然后手动用prose-sm/prose-lg按需添加 - 注意
prose-invert会额外增加约12KB未压缩CSS，仅暗色模式需要时才保留
Typography插件真正难的不是加class，而是理解它把「语义层级」和「视觉样式」做了强绑定——一旦你手动覆盖prose p的margin-bottom，后续所有prose-sm、prose-xl的垂直节奏都会错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
