必须用theme.extend.fontFamily扩展而非覆盖，否则会清空sans/serif/mono导致font-sans失效；@font-face与配置中字体名须完全一致（含引号、大小写、空格），中文字体需前置，末尾必加sans-serif等通用备选。
直接改 theme.fontFamily 会清空 font-sansfont-seriffont-mono，导致所有默认字体类失效——这不是配置没生效，而是你主动删掉了它们。
必须用 theme.extend.fontFamily 扩展，不能覆盖
Tailwind 的字体族是硬编码在初始 theme 里的，font-sans 对应的是 theme.fontFamily.sans。一旦你在 theme 下直接写 fontFamily: { sans: [...] }，整个原生结构就被替换了，font-serif 和 font-mono 立刻消失。
- ✅ 正确：只往
extend.fontFamily里加新键，比如heading→ 生成font-heading - ❌ 错误：写
theme: { fontFamily: { heading: [...] } }—— 这会丢掉所有默认键 - 修改后必须重启开发服务器，热更新不读新配置
@font-face 和配置中的字体名必须字面量一致
Tailwind 不解析字体文件，它只把配置项原样转成 CSS 的 font-family 值。所以两端的字符串必须完全相等：大小写、引号、空格、下划线，一个都不能差。
- 如果
@font-face写的是font-family: "robotoMono"，那配置里就得是robotoMono: ["robotoMono", ...] - 含空格的字体名（如
"Clash Display"）必须用引号包裹：['"Clash Display"', 'sans-serif']，否则 PostCSS 解析失败 - Windows 路径要用正斜杠或双反斜杠，并加引号：
url("./fonts/roboto.woff2")
@font-face 必须在 @tailwind base 之前
CSS 解析顺序决定字体能否被继承。@tailwind base 会重置根元素字体，如果字体还没注册，就只能 fallback 到系统默认。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确顺序：
@font-face→@tailwind base→@tailwind components→@tailwind utilities - ❌ 错误：把
@font-face放在组件级 CSS 或@layer utilities里，它根本不会被全局识别 - 推荐加
font-display: swap，避免 FOIT（空白文本阻塞）
中文字体栈要前置 + 通用备选不可少
中文字体必须放在字体栈靠前位置，且末尾一定要接 sans-serif 或 serif 等通用族名，否则浏览器可能降级失败或渲染异常。
- 中文字体顺序建议：
["-apple-system", "BlinkMacSystemFont", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "sans-serif"] - 别用
"STHeiti"：iOS 13+ 已移除，会导致降级链断裂 - 本地字体路径要相对于当前 CSS 文件计算，用 Network 面板看 404 请求地址比猜路径快得多
最常被忽略的点是：字体名不一致和加载时机错位。Tailwind 从不报错，它只是安静地跳过无效配置，然后用 fallback 字体顶上——你以为是“字体没加载”，其实是“名字对不上”或者“@font-face 没抢在 base 前注册”。
