必须在同一个 css 文件中按顺序声明：@font-face 在前（路径相对于当前文件、含 font-display: swap）、@import 'tailwindcss' 居中、@theme 在后（带 --font- 前缀、完整字体栈）；否则 font-inter 类不生成且无报错。
必须用 @font-face 声明字体 + @theme 声明变量，二者不能混用；@font-face 控制浏览器能否加载并渲染字体，@theme 控制 Tailwind 能否生成 font-{name} 类——缺一不可，且顺序、命名、路径三处极易出错。
如何在 CSS 入口里正确写 @font-face
它必须出现在 @import 'tailwindcss'; 之前（v4 已废弃 @tailwind 指令），且路径要相对于当前 CSS 文件计算：
-
@font-face的font-family值是唯一接头点，比如写font-family: "inter"，后续所有环节都得严格匹配这个字符串（含引号、大小写、空格） - 路径错误时 Network 面板会显示 404，但 Tailwind 不报错，只静默回退到系统字体
- 必须加
font-display: swap，否则首屏文字可能空白（FOIT） - 如果字体名含空格（如
"Source Sans Pro"），font-family和后续配置中都必须带双引号，否则 PostCSS 解析失败
为什么 font-inter 类没生成？
v4 不再读 tailwind.config.js 中的 fontFamily 配置，它只认 CSS 入口里的 @theme 规则。你写的 font-inter 类根本不会出现，不是编译慢，是引擎压根没看到定义。
-
@theme必须写在@import 'tailwindcss';之后，顺序错 = 无效 - 变量名必须带
--font-前缀：--font-inter: "inter", sans-serif;→ 才能生成font-inter - 不加前缀（如
--inter）或拼错（如--fonts-inter）都会被 Oxide 引擎直接忽略 - 值必须是完整字体栈，末尾建议加
sans-serif等通用族，尤其对中文字体兼容性关键
怎样让自定义字体参与变体和响应式？
font-inter 本身不支持 sm:font-inter 或 hover:font-inter —— Tailwind v4 默认只给内置字体族（sans/serif/mono）加变体。要启用，得手动扩展：
- 在同一个 CSS 入口文件里，用
@layer utilities显式绑定：@layer utilities { .font-inter { @apply font-[var(--font-inter)]; } @variants responsive, hover { .font-inter { @apply font-[var(--font-inter)]; } } } - 或者更稳妥：把字体名硬编码进
@theme，比如--font-inter: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;，这样font-inter就是纯静态类，无变体需求 - 注意：不要在
@theme里写var(--x)，Oxide 引擎不解析嵌套变量，只认字面量值
最易被忽略的是：v4 中 @font-face 和 @theme 必须在同一个 CSS 文件里，且 @font-face 在前、@import 居中、@theme 在后——跨文件声明等于没写，连控制台警告都不会有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
