font-sans类不生效是因为直接覆盖theme.fontFamily会清空默认字体配置，应使用extend.fontFamily；同时需确保@font-face或@import正确加载字体文件，并注意字体名大小写、引号及空格的一致性。
font-sans 类不生效，基本是因为你直接写了 theme.fontFamily 覆盖了默认配置——这会清空 font-serif、font-mono 等所有内置字体族，导致类名还在，但生成的 CSS 里根本没对应规则。
为什么 font-sans 突然失效？
Tailwind v3 的 font-sans、font-serif、font-mono 是硬编码在初始 theme 里的工具类。一旦你在 theme.fontFamily 下直接写对象，就等于彻底替换整个字体配置，原生键全部丢失。
- ❌ 错误写法：
fontFamily: { sans: ['Inter', 'sans-serif'] }→font-serif立刻失效 - ✅ 正确写法：
extend: { fontFamily: { sans: ['Inter', 'ui-sans-serif', 'sans-serif'] } } - 如果你只是加新字体（比如
font-heading），同样走extend.fontFamily，键名决定类名后缀
@font-face 或 @import 没加载，配置再对也白搭
Tailwind 只输出 font-family 声明，不管字体文件从哪来。漏掉加载环节，font-sans 就永远卡在 fallback 上。
- Google Fonts 推荐放在 CSS 入口顶部，早于
@tailwind base：@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap'); - 本地字体必须用
@font-face显式注册，路径相对于当前 CSS 文件；Windows 路径要用正斜杠或双反斜杠，并加引号：url("./fonts/Inter.woff2") -
font-display: swap强烈建议加上，避免 FOIT（空白文本阻塞） - 检查 DevTools 的 Network 面板：如果没看到字体请求，说明
@font-face或@import根本没执行
字体名大小写、引号、空格一个都不能差
所有含空格或特殊字符的字体名（如 "PingFang SC"）必须用双引号包裹，且和 @font-face 中声明的 font-family 完全一致——大小写、引号、空格都得对上。
- ❌
['PingFang SC']→ 解析失败，回退到系统默认 - ✅
['"PingFang SC"']或["PingFang SC"]（JS 字符串内用双引号包裹字体名） - 中文字体栈顺序不能乱：
["-apple-system", "BlinkMacSystemFont", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "sans-serif"] - 别用
"STHeiti"：iOS 13+ 已移除，会导致降级失败
想用 CSS 变量控制字体？必须显式声明数组
Tailwind 不解析 CSS 自定义属性，var(--font-sans) 必须作为字符串出现在 fontFamily 数组里，且不能加引号包裹（否则会被当作文本字面量）。
立即学习“前端免费学习笔记（深入）”；
- ❌
sans: ["var(--font-sans)"]→ 生成font-family: "var(--font-sans)"（带引号，无效） - ✅
sans: ["var(--font-sans)", "system-ui", "sans-serif"]→ 生成font-family: var(--font-sans), system-ui, sans-serif - 确保
:root或html中已定义该变量，否则浏览器自动跳过，用下一个 fallback - 变量值含空格时，CSS 里必须加引号：
--font-sans: "Inter Variable";
@font-face 必须在 @tailwind base 之前；改完 tailwind.config.js 后必须重启开发服务器——热更新不会重载配置。 
