直接在 tailwind.config.js 中配置 RTL 和多字体栈，通过 dir 属性或 CSS 自定义属性切换，比 JS 动态改类更稳定轻量；fontFamily 必须用 extend.fontFamily 扩展，中文字体名加双引号，字体栈顺序影响 fallback，RTL 依赖 dir="rtl" 触发，多语言字体需结合逻辑属性与字体别名实现。
直接在 tailwind.config.js 里配好 RTL + 多字体栈，再用 dir 属性或 CSS 自定义属性切换，比 JS 动态改类名更稳、更轻、不闪屏。
fontFamily 扩展必须用 extend.fontFamily，否则 font-serif 会失效
很多人写成 theme.fontFamily，结果 font-serif 类完全不生效——浏览器回退到 Times New Roman。这是因为 Tailwind 默认的 sans/serif/mono 键只存在于初始 theme 中，一覆盖就全丢。
- ✅ 正确写法：在
extend.fontFamily下新增键，比如arabic、chinese、hebrew - ❌ 错误写法：
theme: { fontFamily: { sans: ['Tajawal', 'sans-serif'] } }→font-serif和font-mono全挂了 - 中文字体名必须加双引号：
'"Noto Sans SC"'，否则编译后 CSS 解析失败 - 字体栈顺序决定 fallback 行为：中文排版要把中文字体放最前，比如
['"Noto Sans SC"', 'system-ui', 'sans-serif']
RTL 布局翻转靠 dir 属性触发，不是靠 class 切换
Tailwind 的 rtl: 变体只响应 HTML 元素的 dir="rtl" 属性（或根元素上的 [dir="rtl"]），不是靠你手动加 class="rtl"。强行用 JS 切 class 不会激活 rtl:ml-4 这类规则。
- ✅ 推荐做法：服务端或初始化时设置
或<li>✅ 动态切换时，直接改 <code>document.documentElement.dir = 'rtl'，所有rtl:类自动生效 - ⚠️ 注意：不要同时用
dir="rtl"和class="rtl"，后者无意义，还可能干扰第三方插件 - 如果项目用 CSS 自定义属性控制语言（如
:root[data-lang="ar"]），需配合addVariant手动注册变体，但没必要——dir更标准、更轻量 - ✅ 实操方案：定义多个字体别名，如
arabic、chinese、latin，然后在对应语言的容器上设font-arabic类 - ✅ 结合
dir自动切换排版方向，再叠加字体类：<div dir="rtl" class="font-arabic text-lg">مرحبا</div> - ⚠️ 避免陷阱：别试图用
@layer utilities注册带断点的字体类，JIT 模式不识别，生成不了 CSS - 进阶可选：用
addUtilities注册font-lang-ar这类工具类，但前提是它只映射到一个固定字体栈，不能动态依赖语言状态 - ✅ 示例：若
@font-face定义font-family: "Tajawal"，则配置里必须写tajawal: ['"Tajawal"', 'sans-serif']，生成font-tajawal - ❌ 错误示例：
@font-face写"tajawal"（小写），配置写Tajawal（大写）→ 类名生成失败，CSS 里没这条声明 - 字体文件路径建议用相对路径，并确保构建工具（Vite/Webpack）能正确解析
url() - 上线前务必关掉
TAILWIND_MODE=watch，否则 JIT 可能漏掉动态插入的字体类
多语言字体切换不能靠响应式断点，得用逻辑属性+字体栈组合
Tailwind 不允许对 fontFamily 写 md:font-arabic 这种断点类——它不支持在字体族上做响应式映射。但你可以用「逻辑属性 + 字体栈内部分辨」来间接实现。
字体加载与闪退问题：@font-face 名称必须和 fontFamily 键名严格一致
常见现象是：字体文件加载成功，DevTools 显示已请求，但文字始终用系统默认字体——根本原因是 @font-face 里的 font-family 值和 tailwind.config.js 中的键名不匹配。
最易被忽略的一点：字体栈里 serif 和 sans-serif 必须显式写在数组末尾，否则中英文混排时西文可能 fallback 到错误字体；而 dir 属性一旦设错，rtl: 变体就彻底失效，连 margin 翻转都不会发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
