font-sans 类不生效是因为直接覆盖 theme.fontfamily 会清空默认字体配置，应使用 extend.fontfamily；同时需确保 @font-face 或 @import 正确加载字体文件，并注意字体名大小写、引号及空格的一致性。
font-sans 类不生效？先确认你没覆盖默认字体配置
Tailwind v3 的 font-sans、font-serif、font-mono 是硬编码在初始 theme 里的工具类，一旦你在 theme.fontFamily 下直接写对象，就会清空所有默认键。结果是：类名还在，但生成的 CSS 里根本没对应规则——浏览器回退到 Times New Roman 或 SimSun，控制台也查不到 font-family 声明。
必须用 theme.extend.fontFamily，而不是 theme.fontFamily
- ❌ 错误写法：
fontFamily: { sans: ['Inter', 'sans-serif'] }→font-serif立刻失效 - ✅ 正确写法：
extend: { fontFamily: { sans: ['Inter', 'ui-sans-serif', 'sans-serif'] } } - 如果只是加新字体（如
font-heading），同样走extend.fontFamily，键名决定类名后缀 - 所有含空格或特殊字符的字体名（如
"PingFang SC"）必须用双引号包裹，且和@font-face中声明的font-family完全一致（大小写、引号、空格一个都不能差）
@font-face 或 @import 没加载，再对的配置也白搭
Tailwind 不管字体文件从哪来，它只输出 font-family 声明。漏掉字体加载环节，font-sans 就永远卡在 fallback 上。
- Google Fonts 推荐放在 CSS 入口顶部，早于
@tailwind base：@import url('@#@#@#@#@#@#@#@#@#@0'); - 本地字体必须用
@font-face显式注册，路径相对于当前 CSS 文件（不是 JS 或 HTML）；Windows 路径要用正斜杠或双反斜杠，并加引号：url("./fonts/Inter.woff2") -
font-display: swap强烈建议加上，避免 FOIT（空白文本阻塞） - 检查 DevTools 的 Network 面板：如果没看到字体请求，说明
@font-face或@import根本没执行
中文字体栈要按系统真实名称写，且顺序不能乱
中文渲染出问题，90% 是 fallback 链没对齐。比如把 "Microsoft YaHei" 放在 "-apple-system" 后面，macOS 就跳过它直接用 PingFang；漏掉 "Noto Sans CJK SC"，Linux 下可能崩到方块。
- 推荐 sans 栈：
["-apple-system", "BlinkMacSystemFont", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "sans-serif"] - 必须用
@layer base在html上设font-family，否则纯文本 div 会走浏览器默认字体（Safari 对body继承有 bug） - 不要用
"STHeiti"：iOS 13+ 已移除，会导致降级失败 - 字体名带空格必须加引号，
"Hiragino Sans GB"不能简写成Hiragino
font-[name] 类没生成？检查键名是否合法且匹配
Tailwind 只认 ASCII 字母、数字、短横线组成的键名。
-
heading→ 生成font-heading -
my-font→ 生成font-my-font -
'IBM Plex Sans'或My Font→ 直接忽略，不生成任何类 - 配置完必须重启开发服务器（Vite/webpack 不会热更新
tailwind.config.js中的字体配置） - 构建后检查输出 CSS 文件，搜索
font-heading看是否存在——若没有，说明配置没被读取或语法错误
最易被忽略的一点：字体名大小写和引号在 @font-face 和 tailwind.config.js 中必须完全一致，差一个空格或引号位置，就匹配失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
