必须设置 html 的 dir 属性才能触发 tailwind rtl 类生效；rtl: 前缀依赖 dir="rtl" 激活，逻辑类名（如 text-start）同样需此前提，否则所有方向相关样式均被忽略。
直接在 tailwind.config.js 里加插件就能支持 RTL，但光加插件不设 dir 属性或不用逻辑类名，样式根本不会翻转——这是最常被忽略的前提。
必须设置 dir 属性才能触发 RTL 类名生效
Tailwind 的 rtl: 前缀（如 rtl:pr-4）和逻辑类名（如 text-start）都依赖 HTML 根元素的 dir 属性来判断当前方向。没有它，所有 RTL 相关类名都会被浏览器忽略。
-
是最稳妥的方式；direction: rtlCSS 声明无法激活 Tailwind 的方向感知类 - 动态切换时，建议用 JS 修改
document.documentElement.dir，而不是只改 body 或局部容器 -
dir="auto"不推荐用于布局控制——它只根据首字符推断方向，对混合内容不可靠，且不触发 Tailwind 的方向类
选 rtl: 前缀还是 text-start 这类逻辑类？
两者定位不同：rtl: 是“条件覆盖”，适合已有 LTR 样式、只需微调的场景；text-start/pl-4 是“语义优先”，从设计源头就脱离左右物理概念，更适合新项目或强国际化需求。
- 用
ltr:pl-6 rtl:pr-6：当你已有一套 LTR 主样式，只想为 RTL 单独修正几个边距/浮动 - 用
ps-6（padding-inline-start）或text-start：需搭配tailwindcss-logical插件，类名本身即逻辑化，无需重复写两套 - 混用风险：同时引入
tailwindcss-logical和大量rtl:类，容易造成意图冲突，比如ps-4 rtl:pr-4会互相覆盖
三个主流插件怎么选？看你的构建约束
不是所有插件都默认启用逻辑属性，也不是所有都能零配置运行。关键区别在「是否重写原始类名」和「是否需要 PostCSS 处理」。
-
tailwindcss-logical：只新增ps/pe/text-start等类，不改动pl/pr，适合渐进升级 -
tailwindcss-rtl：把pl编译成padding-inline-start，并自动注入[dir="rtl"]规则，但要求你停用原生pl/pr类 -
tailwindcss-dir：轻量级，仅提供ltr:/rtl:变体，无逻辑类，适合简单覆盖，无需额外 PostCSS 配置
常见翻车点：margin/padding 翻转了，但 float 或 text-align 没动
RTL 不只是左右镜像，它影响的是整个书写模式（writing-mode）。很多开发者只改了 pl/pr，却忘了 float、text-align、border-left 这些也得同步处理。
-
float-left在 RTL 下应变成float-right，但更推荐直接用float-start（需tailwindcss-logical） -
text-left应替换为text-start；保留text-left在 RTL 下仍向左对齐，不符合预期 -
border-l-2同样要换成border-s-2（s = start），否则 RTL 下左边框还在左边，视觉错位 - 绝对定位的
left: 0类（如left-0）在 RTL 下不会自动变right-0，必须显式写ltr:left-0 rtl:right-0或改用inset-inline-start-0
真正难的不是加插件，而是把「left/right」思维彻底替换成「start/end」——哪怕只改一个按钮的内边距，也要想清楚它在阿拉伯语用户眼里是靠近起始边还是结束边。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
