tailwind 中扩展字体必须用 extend.fontfamily 新增语言键而非覆盖 theme.fontfamily，中文字体名需加双引号；rtl 布局仅响应 dir="rtl"，不响应 class="rtl"；pl-4 等单边类在 rtl 下翻转需启用 rtl 插件并设置根元素 dir 属性。
tailwind.config.js 里必须用 extend.fontFamily 扩展字体别名
直接覆盖 theme.fontFamily 会导致 font-serif、font-mono 等默认类全部失效，浏览器 fallback 到 Times New Roman。正确做法是在 extend.fontFamily 下新增语言专属键，比如：
module.exports = {
theme: {
extend: {
fontFamily: {
arabic: ['"Tajawal"', 'sans-serif'],
chinese: ['"Noto Sans SC"', 'system-ui', 'sans-serif'],
hebrew: ['"Assistant"', 'sans-serif']
}
}
}
}
中文字体名必须加双引号，否则编译后 CSS 解析失败；字体栈顺序决定 fallback 行为，中文必须把中文字体放最前。
RTL 布局翻转只响应 dir="rtl"，不响应 class="rtl"
rtl: 变体是 Tailwind 的原生方向感知机制，它只监听 HTML 元素的 dir 属性（包括根元素），不是靠你手动加 class="rtl" 触发的。强行用 JS 改 class 不会激活 rtl:ml-4 这类规则。
- ✅ 正确切换方式：
document.documentElement.dir = 'rtl' - ⚠️ 错误写法：
document.body.classList.add('rtl')—— 完全无效 - ⚠️ 混用风险：同时设
dir="rtl"和class="rtl"可能干扰第三方插件或自定义样式
单边 padding 类（如 pl-4）在 RTL 下自动翻转的前提
pl-4 在 dir="rtl" 下会变成物理右侧内边距，但这个行为依赖两个条件：
- Tailwind 的 RTL 插件已启用（v3.3+ 默认开启，旧版需确认是否配置了
plugins: [require('@tailwindcss/typography')]或显式引入 RTL 支持） - HTML 根元素确实设置了
dir="rtl"，不能只靠 CSS 自定义属性或 data 属性模拟
没满足任一条件时，pl-4 始终作用于物理左边界，阿拉伯语界面文字会紧贴容器左缘，造成排版断裂。
多语言字体 + RTL 排版要组合使用，不能只靠响应式断点
Tailwind 不支持 md:font-arabic 这类“断点 + 字体别名”的写法，JIT 模式下不会生成对应 CSS。可行路径是逻辑属性 + 显式字体类组合：
<div dir="rtl" class="font-arabic text-lg">مرحبا</div> <div dir="ltr" class="font-chinese text-base">你好</div>
关键点在于：dir 控制布局镜像，font-xxx 控制字体栈，两者正交、不可替代。试图用 @layer utilities 注册带断点的字体类，只会导致构建失败或类名缺失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
