必须在tailwind.config.js的theme.fontfamily中显式声明数组，首项为"var(--font-sans)"字符串，后续为回退字体，并确保:root中已定义对应css变量，tailwind仅原样输出不解析变量。
在 tailwind.config.js 中注册自定义字体族并映射 CSS 变量
Tailwind 本身不直接读取 CSS 自定义属性（如 --font-sans）来生成工具类，必须显式在 theme.fontFamily 中声明。若想让 font-sans 工具类最终编译为 font-family: var(--font-sans)，不能只靠变量名映射，得配合 CSS 层覆盖。
- 在
tailwind.config.js的theme.fontFamily中用数组形式声明：第一个元素是回退字体（如"system-ui"），后续元素可为字符串"var(--font-sans)"—— Tailwind 会原样输出该字符串到生成的 CSS 中 - 确保你的 CSS 变量已在全局样式中定义（例如在
:root或html中），否则var(--font-sans)会降级为空值或浏览器默认 - 不要写成
fontFamily: { sans: ["var(--font-sans)"] }，这会导致生成无效的font-family: "var(--font-sans)"（带引号 → 字体名被当作文本字面量）
正确配置示例：支持变量 + 回退链 + 多字体族
以下配置使 font-sans、font-serif、font-mono 均基于 CSS 变量，同时保留合理回退：
module.exports = {
theme: {
fontFamily: {
sans: ["var(--font-sans)", "system-ui", "-apple-system", "sans-serif"],
serif: ["var(--font-serif)", "Georgia", "serif"],
mono: ["var(--font-mono)", "ui-monospace", "SFMono-Regular", "monospace"]
}
}
}
- 数组第一项必须是
var(--xxx)字符串（无引号包裹在 CSS 中生效，但 JS 配置里就是带引号的字符串） - 后续项是传统字体名，构成完整回退链；Tailwind 会把整个数组转为 CSS 的
font-family值 - 如果变量未定义，浏览器自动使用下一个字体，不会崩溃
为什么不能直接在 HTML 或组件里用 style="--font-sans: 'Inter';"？
可以，但要注意作用域和优先级：
-
:root中定义的变量对所有元素生效；若在某个组件上用style设置，仅影响该元素及其后代，且可能被更具体的 CSS 覆盖 - Tailwind 生成的
.font-sans类没有!important，所以如果你在组件内动态设style="--font-sans: 'CustomFont';"，它能生效；但如果父容器也设了同名变量，且层级更深，可能被覆盖 - 变量值中含空格或特殊字符（如
'Inter Variable'）必须加单/双引号，否则 CSS 解析失败 → 浏览器跳过该声明
常见错误：字体没变、控制台报 Invalid property value
典型现象是页面字体仍是系统默认，开发者工具里看到 font-family 计算值为空或回退到 sans-serif：
- 检查是否漏写了
:root中的变量定义，例如忘记--font-sans: "Inter", system-ui; - 确认
tailwind.config.js修改后已重启构建（Vite/Next.js 等热更新不一定捕获 config 变更） - 查看生成的 CSS 文件（如
dist/output.css），搜索.font-sans，确认其font-family值是否包含var(--font-sans)；若没有，说明配置未被识别（比如拼错fontFamily为fonts） - 变量值里用了未转义的反斜杠或括号（如
--font-sans: "Cascadia Code\ PL";）→ 应改为双反斜杠或换用 URL 引用
变量驱动字体的核心在于「CSS 层与 JS 配置协同」：Tailwind 负责生成带 var() 的类，而你负责确保变量存在且有效。缺一不可，且变量定义时机早于类应用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
