必须设dir="rtl"，否则所有rtl类名（如rtl:pl-4、text-start）全不生效；根本原因是tailwind依赖[dir="rtl"]原生匹配机制，direction: rtl的css声明无法触发，dir="auto"也不可靠；推荐直接在标签设置dir="rtl"。
必须设 dir="rtl"，否则所有 RTL 类名（rtl:pl-4、text-start）全不生效——这是 90% 的人卡住的第一步。
为什么 rtl: 类名写了却没反应？
根本原因不是插件没装，而是 HTML 根节点缺 dir 属性。Tailwind 的 rtl: 变体和逻辑类（如 ps-4、text-start）都依赖浏览器对 [dir="rtl"] 的原生匹配机制。没有它，CSS 规则压根不会被应用。
-
是唯一可靠方式；direction: rtl的 CSS 声明无法触发 Tailwind 方向感知 -
dir="auto"不可用于布局控制——它只看首字符推断方向，混合文本下不可靠，且不激活 Tailwind 类 - 动态切换时，必须改
document.documentElement.dir，改或局部容器无效
选 rtl:pl-4 还是 ps-4？
取决于项目阶段和维护成本：
-
rtl:pl-4是“条件覆盖”：适合已有完整 LTR 样式，只需微调几个边距/浮动/对齐的场景，比如ltr:pl-6 rtl:pr-6 -
ps-4（padding-inline-start）或text-start是“语义优先”：从源头脱离物理左右概念，需配合tailwindcss-logical插件，更适合新项目或强国际化需求 - 混用风险高：
ps-4 rtl:pr-4会冲突，后者可能覆盖前者，调试时难定位
哪些属性容易被漏翻？
RTL 不只是 pl/pr 对调。以下属性在 dir="rtl" 下也必须同步处理，否则布局错乱：
-
float-left→ 应改用float-start（需tailwindcss-logical），或直接用flex替代float -
text-left→ 必须换成text-start；保留text-left在 RTL 下仍向左对齐，违反阅读习惯 -
border-l-2→ 对应逻辑属性是border-inline-start-2，或用rtl:border-r-2显式覆盖 - 图标/箭头类如
rtl:rotate-180要手动加，direction不会自动翻转 SVG 或 background-image
插件怎么选才不踩坑？
三个主流插件的核心差异不在功能多寡，而在「是否重写原始类」和「构建链路侵入性」：
-
tailwindcss-logical：只新增ps/pe/text-start等逻辑类，不碰pl/pr，适合渐进升级 -
tailwindcss-rtl：把pl编译成padding-inline-start，并注入[dir="rtl"]规则，但要求你停用所有物理类，迁移成本高 -
tailwindcss-dir：最轻量，仅提供ltr:/rtl:变体，无逻辑类，无需 PostCSS 额外配置，适合简单覆盖
真正复杂的是那些没显式声明、却隐含方向语义的地方：比如自定义 SVG 图标路径、background-position 值、甚至第三方组件里的硬编码 margin-left —— 它们不会被任何插件自动捕获，得靠人工审查或运行时检测工具补位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
