必须在 tailwind.config.js 的 extend.fontFamily 中扩展字体栈并设置 dir 属性触发 RTL，而非用 JS 切换 class；中文字体名需加双引号，字体栈顺序影响 fallback，rtl: 变体仅响应 dir="rtl" 属性。
直接在 tailwind.config.js 里配好字体栈和 dir 响应逻辑，别用 JS 动态切类——否则 rtl:ml-4 这类规则根本不会生效。
fontFamily 必须用 extend.fontFamily 扩展，否则 font-serif 会失效
很多人写成 theme: { fontFamily: { sans: [...] } }，结果 font-serif 和 font-mono 全挂了。Tailwind 默认的 sans/serif/mono 键只存在于初始 theme 中，一覆盖就全丢。
- ✅ 正确写法：在
extend.fontFamily下新增键，比如arabic、chinese、hebrew - ❌ 错误写法：
theme: { fontFamily: { sans: ['Tajawal', 'sans-serif'] } } - 中文字体名必须加双引号：
'"Noto Sans SC"'，否则编译后 CSS 解析失败 - 字体栈顺序决定 fallback 行为：中文排版要把中文字体放最前，比如
['"Noto Sans SC"', 'system-ui', 'sans-serif']
RTL 布局翻转靠 dir 属性触发，不是靠 class 切换
rtl: 变体只响应 HTML 元素的 dir="rtl" 属性（或根元素上的 [dir="rtl"]），不是靠你手动加 class="rtl"。强行用 JS 改 class 不会激活 rtl:ml-4 这类规则。
- ✅ 推荐做法：服务端或初始化时设置
document.documentElement.dir = 'rtl'，所有rtl:类自动生效 - ⚠️ 注意：不要同时用
dir="rtl"和class="rtl"，后者无意义，还可能干扰第三方插件 - 如果项目用 CSS 自定义属性控制语言（如
:root[data-lang="ar"]），需配合addVariant手动注册变体，但没必要——dir更标准、更轻量
多语言字体切换不能靠响应式断点，得用逻辑属性+字体栈组合
Tailwind 不允许对 fontFamily 写 md:font-arabic 这种断点类——它不支持在字体族上做响应式映射。但你可以用「逻辑属性 + 字体栈内部分辨」来间接实现。
立即学习“前端免费学习笔记（深入）”；
- ✅ 实操方案：定义多个字体别名，如
arabic、chinese、latin，然后在对应语言的容器上设font-arabic类 - ✅ 结合
dir自动切换排版方向，再叠加字体类：<div dir="rtl" class="font-arabic text-lg">مرحبا</div> - ⚠️ 避免陷阱：别试图用
@layer utilities注册带断点的字体类，JIT 模式不识别，生成不了对应 CSS
真正难处理的不是配置本身，而是字体栈顺序和 dir 触发时机的耦合——改错一个位置，中文可能出方块，阿拉伯数字可能左对齐，且这些问题在开发环境里往往不显，上线后才集中爆发。
