正确做法是用 dir="rtl" 触发 rtl: 变体，并在 tailwind.config.js 中通过 extend.fontFamily 添加 arabic、chinese 等字体栈，中文字体名需加双引号；错误做法包括用 class="rtl" 或覆盖 theme.fontFamily。
直接用 dir="rtl" 触发 rtl: 变体，配合 extend.fontFamily 配字体栈，别用 JS 切 class 或写 class="rtl"——后者根本不会激活任何 RTL 相关类。
rtl: 变体只响应 dir 属性，不认 class
Tailwind 的 rtl: 前缀（比如 rtl:ml-4）只在元素有 dir="rtl" 属性，或根元素匹配 [dir="rtl"] 时才生效。它不解析 class="rtl"，也不管你用 JS 动态加这个 class。
- ✅ 正确做法：服务端渲染时设
，或客户端初始化时执行document.documentElement.dir = 'rtl' - ❌ 错误做法：写
<div class="rtl ml-4 rtl:mr-4">，其中 <code>rtl:mr-4永远不会应用 - ⚠️ 注意：同时写
dir="rtl"和class="rtl"不但多余，还可能干扰依赖class检测的第三方 UI 库 - ✅ 正确写法：
extend: { fontFamily: { arabic: ['"Tajawal"', 'sans-serif'], chinese: ['"Noto Sans SC"', 'system-ui', 'sans-serif'] } } - ❌ 错误写法：
theme: { fontFamily: { sans: ['"Tajawal"', 'sans-serif'] } }→font-serif和font-mono全部消失 - ⚠️ 中文字体名必须加双引号：
'"Noto Sans SC"'，否则编译后 CSS 解析失败，显示方块 - ✅ 实操方案：给容器同时加
dir="rtl"和对应字体类，例如<div dir="rtl" class="font-arabic text-lg">مرحبا</div> - ✅ 字体栈顺序决定 fallback：中文排版要把中文字体放最前，
['"Noto Sans SC"', 'system-ui', 'sans-serif']，否则小字或标点可能回退到不兼容字体 - ⚠️ 不要用
@layer utilities注册带断点的字体类，JIT 模式不识别，CSS 根本不生成 - 开发环境里
dir是 JS 设置的，但 SSR 首屏没来得及执行，导致中文显示为方块、阿拉伯数字左对齐 - 中文字体栈漏了双引号，本地编译不报错，上线后部分浏览器解析失败
- 改了
extend.fontFamily却忘了更新content路径，结果font-chinese类压根没生成
fontFamily 必须用 extend.fontFamily 扩展
想让阿拉伯语、中文等语言用专属字体，得在 tailwind.config.js 的 theme.extend.fontFamily 下新增键，比如 arabic、chinese。直接覆盖 theme.fontFamily 会清空默认的 sans/serif/mono，导致 font-serif 类失效。
多语言字体 + RTL 方向要组合使用
光设 dir="rtl" 不够，阿拉伯语需要阿拉伯字体，中文需要中文字体。不能靠断点（如 md:font-arabic）切换字体——Tailwind 不支持对 fontFamily 做响应式映射。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的耦合点
问题往往不出在单个配置上，而在「字体栈顺序」和「dir 触发时机」的耦合。比如：
