tailwind字体配置必须用theme.extend.fontfamily添加新字体，且@font-face需在@tailwind base前、字体名字面量完全一致，否则font-sans等默认类失效。
字体不生效，八成不是字体文件或网络问题，而是 @font-face 和 tailwind.config.js 两头没对上——字符串字面量不一致、配置位置错、或直接覆盖了默认字体族。
必须用 theme.extend.fontFamily，别碰 theme.fontFamily
直接写 fontFamily: { sans: [...] } 会清空整个默认结构，font-sans、font-serif、font-mono 全部失效。Tailwind 的这些基础类是硬编码在初始 theme 里的，替换就等于删除。
- ✅ 正确：只往
extend.fontFamily里加新键，比如heading→ 生成font-heading - ❌ 错误：写
theme: { fontFamily: { heading: [...] } }—— 这会丢掉所有默认键，连font-sans都变 Times New Roman - 修改后必须重启开发服务器，热更新不会读新配置
@font-face 必须在 @tailwind base 之前，且路径要算对
CSS 解析顺序决定字体能否被继承。@tailwind base 会重置根元素字体，如果字体还没注册，后续规则就只能 fallback。
- ✅ 正确顺序：
@font-face→@tailwind base→@tailwind components→@tailwind utilities - ❌ 错误：把
@font-face放在组件级 CSS 或@layer utilities里，它根本不会被全局识别 - 路径是相对于当前 CSS 文件的，不是相对于项目根目录。例如 CSS 在
src/styles.css，字体在public/fonts/roboto.woff2，就得写url("../public/fonts/roboto.woff2") - Windows 下路径要用正斜杠或双反斜杠，并加引号：
url("./fonts/roboto.woff2")
字体名大小写、引号、空格必须完全一致
Tailwind 不解析字体文件，它只把配置项原样转成 CSS 的 font-family 值。两端字符串字面量差一个字符，就匹配失败。
- 如果
@font-face写的是font-family: "robotoMono"，那配置里就得是robotoMono: ["robotoMono", "ui-monospace"] - 含空格的字体名（如
"Clash Display"）必须用单引号包裹：['"Clash Display"', "sans-serif"]，否则 PostCSS 解析失败 - 常见翻车点：
@font-face用双引号、配置用单引号；@font-face写roboto-mono，配置写robotoMono；大小写不统一 - 中文字体建议前置，末尾必加通用备选：
["'PingFang SC'", "'Microsoft YaHei'", "sans-serif"]
类名由配置键名决定，不是字体文件名
font-xxx 中的 xxx 完全来自 extend.fontFamily 的键名，和字体文件名、@font-face 中的 src 路径无关。
- 配置里写
robotoMono: [...]→ 类名是font-robotoMono，不是font-roboto或font-robotomono - 键名只能含小写字母、数字、短横线；
my-font→font-my-font，但My Font会被 Tailwind 忽略 - 推荐加
font-display: swap到@font-face规则里，避免 FOIT（空白文本阻塞） - DevTools Network 面板看不到字体请求？说明
@font-face根本没执行，先检查它是否在@tailwind base之前、是否在主 CSS 入口里
最常被忽略的是：字体名一致性是字面量级的，不是“意思差不多”；而 extend 不是可选项，是唯一安全入口——漏掉这两点，其他都白配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
