必须用 extend.fontfamily 扩展字体，直接覆盖 theme.fontfamily 会清空 tailwind 原生 sans/serif/mono 导致 font-sans 失效；@font-face 名称与配置必须字面量完全一致；中文字体须前置字体栈；rtl 变体仅响应 dir 属性而非 class。
fontFamily 必须用 extend.fontFamily 扩展，不能覆盖 theme.fontFamily
直接写 theme.fontFamily 会清空 Tailwind 原生的 sans、serif、mono 定义，导致 font-sans 类彻底失效——浏览器找不到对应字体族，回退到 Times New Roman 或系统默认字体。你看到的“中文没变英文变了”，大概率就是这个原因。
正确做法只在 extend.fontFamily 下新增键，比如：chinese、arabic、hebrew，保留所有默认 fallback 链。
- ✅
extend: { fontFamily: { chinese: ['"Noto Sans SC"', 'system-ui', 'sans-serif'] } } - ❌
theme: { fontFamily: { chinese: [...] } }→font-sans失效
@font-face 名称和配置中字体名必须字面量完全一致
Tailwind 不解析字体文件，只把配置项原样转成 CSS 的 font-family 值。两端差一个字符（大小写、引号、下划线、空格），就匹配失败。
常见翻车点：
- @font-face 写
font-family: "robotoMono"，配置里却写roboto-mono: ["roboto-mono"] - 中文字体名漏双引号：
"PingFang SC"必须写成'"PingFang SC"'（单引号包裹双引号字符串） - Windows 路径用反斜杠又没转义：
url("C:\fonts\foo.woff2")→ 必须写url("./fonts/foo.woff2")或url("C:/fonts/foo.woff2")
字体栈顺序决定多语言渲染效果，中文字体必须前置
数组顺序 = fallback 优先级。中文字符若被 Inter 或 Roboto 渲染，大概率显示方块或异常字形。
正确顺序示例（简体中文优先）：
chinese: ['"Noto Sans CJK SC"', '"Microsoft YaHei"', 'system-ui', '-apple-system', 'sans-serif']
关键点：
- 中文字体放最前（
"Noto Sans CJK SC"） - 日/韩字体可紧随其后（如
"Hiragino Kaku Gothic Pro"） - 西文字体（
Inter、Roboto）靠后但不能太靠后，否则中文场景 fallback 到sans-serif就失控了 -
sans-serif必须是最后一项；放在中间会导致后续字体不参与匹配
切换语言靠 dir 属性，不是靠 class 或断点
Tailwind 的 rtl: 变体只响应 dir="rtl" 属性（或根元素 [dir="rtl"]），不是靠你手动加 class="rtl"。JS 动态改 class 不会激活 rtl:ml-4 这类规则。
实操建议：
- 服务端或初始化时设
或 - 动态切换时直接改
document.documentElement.dir = 'ar' - 配合字体类使用：
<div dir="ar" class="font-arabic text-base">مرحبا</div> - 别用
md:font-arabic—— Tailwind 不支持在字体族上做响应式映射
真正容易被忽略的是：字体栈本身不感知语言，全靠你提前按语种拆分并手动应用类。没有自动检测，也没有 lang 属性联动机制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
