必须用 dir="rtl" 触发 tailwind 的 rtl: 变体，而非 class；字体栈需在 extend.fontfamily 下定义并加引号；优先使用逻辑属性替代物理方向样式。
直接在 tailwind.config.js 里配好 dir="rtl" 响应逻辑和字体栈，别用 JS 动态切 class——否则 rtl:ml-4 这类规则压根不会生效。
必须用 dir 属性触发 rtl: 变体，不是靠 class
rtl: 是 Tailwind 的「属性变体」，只响应 HTML 元素上的 dir="rtl"（或根元素 [dir="rtl"]），不认你手动加的 class="rtl"。强行用 JS 改 class，生成的 CSS 规则根本不会匹配。
- ✅ 正确做法：服务端渲染时设
，或初始化时执行document.documentElement.dir = 'rtl' - ❌ 错误做法：写
<div class="rtl text-right rtl:ml-4">——<code>rtl:ml-4永远不生效，text-right在 RTL 下反而错位 - ⚠️ 注意：
dir="rtl"和class="rtl"别共存，后者无意义，还可能干扰next-intl等插件的 DOM 检测 - ✅ 正确写法：在
extend.fontFamily下新增语言专用键，如arabic、chinese：extend: { fontFamily: { chinese: ['"Noto Sans SC"', 'system-ui', 'sans-serif'], arabic: ['Tajawal', 'sans-serif'] } } - ❌ 错误写法：
theme: { fontFamily: { sans: ['Tajawal', 'sans-serif'] } }—— 这会清空所有默认字体族 - ⚠️ 中文字体名必须用双引号包裹：
'"Noto Sans SC"'，否则编译后 CSS 解析失败，中文显示方块 - ✅ 替换为逻辑属性：
margin-inline-end、padding-inline-start、text-align: end - ⚠️ 没有
border-start-start-radius这种标准写法，border-top-left-radius在 RTL 下仍锚定物理左上角，需配合[dir="rtl"] .icon { border-top-left-radius: 0; }手动修正 - SVG 图标不随
direction翻转，纯装饰性图标可用transform: scaleX(-1)，但含文字或热区的必须提供 RTL 版本或用:dir(rtl) svg.icon-return { transform: rotateY(180deg); } - ✅ 实操方案：定义多个字体别名（
font-chinese、font-arabic），再结合dir使用：<div dir="rtl" class="font-arabic text-lg">مرحبا</div> - ⚠️ 字体栈顺序决定 fallback 行为：中文排版要把中文字体放最前，比如
['"Noto Sans SC"', 'system-ui', 'sans-serif']，否则小字号下容易回退到模糊的系统字体 - ⚠️ 真正难处理的是字体栈顺序和
dir触发时机的耦合——开发环境常不显问题，上线后才集中爆发：中文出方块、阿拉伯数字左对齐、图标方向错乱，三者往往同时出现
字体栈必须放在 extend.fontFamily 下，且中文字体名加双引号
Tailwind 默认的 sans/serif/mono 键只存在于初始 theme 中；一旦你在 theme.fontFamily 下全量覆盖，这些键就丢了，连带 font-serif 类都失效。
排版方向翻转 ≠ 所有属性镜像，要用逻辑属性替代物理写法
direction: rtl 只影响逻辑方向相关属性（如 margin-left → 视觉右距），但 background-position、border-radius、transform 等物理属性完全不变。硬写 margin-right: 16px 在 RTL 下会错位。
流式字体 + 多语言不能靠断点类切换，得靠组合使用
Tailwind 不支持 md:font-arabic 这种断点绑定字体族的写法，JIT 模式下也不会生成对应 CSS。也不能指望 @layer utilities 注册带断点的字体类——它不识别。
