必须在标签上设置dir="rtl"，否则所有tailwind rtl类（如rtl:pr-4、text-start）均不生效；css中direction: rtl无法触发tailwind方向类，dir="auto"不可靠，动态切换应通过js修改document.documentelement.dir。

必须在 标签上设置 dir="rtl"，否则所有 Tailwind RTL 类（包括 rtl:pr-4 和 text-start）都不会生效。

为什么加了插件却没翻转？

很多人装了 tailwindcss-logical 或 tailwindcss-rtl 就以为万事大吉，结果样式毫无变化。根本原因是：Tailwind 的方向感知类全部依赖 HTML 的 dir 属性触发，CSS 里的 direction: rtl 声明无法激活它们。

• 是唯一可靠方式；dir="auto" 不推荐——它只看首字符推断方向，对混合内容不可靠，且不触发 Tailwind 方向类
• 动态切换时，用 JS 改 document.documentElement.dir，别只改某个容器的 dir 属性
• 如果项目已有 LTR 主样式，又想局部支持 RTL，不要直接在子容器加 dir="rtl"，而应统一由根元素控制 + 使用 ltr:/rtl: 条件类做微调

rtl:pr-4 还是 ps-4？选哪个？

两者定位不同，不是“谁更好”，而是“谁更适合你的场景”：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• rtl:pr-4 是条件覆盖：适合已有完整 LTR 样式、只需为 RTL 单独修正几个边距/浮动的项目，比如 ltr:pl-6 rtl:pr-6
• ps-4（padding-inline-start）是语义优先：类名本身即逻辑化，无需重复写两套，适合新项目或强国际化需求，但需额外引入 tailwindcss-logical 插件
• 混用风险高：ps-4 rtl:pr-4 会互相覆盖；若已大量使用 pl/pr，建议先用 rtl: 过渡，再逐步替换为逻辑类

哪些 CSS 属性容易被忽略？

RTL 不只是左右镜像，它影响的是整个书写模式（writing-mode）。只改 pl/pr 而漏掉这些，布局就会错乱：

• float-left → 应改为 float-start（或用 rtl:float-right）
• text-left → 必须换成 text-start；保留 text-left 在 RTL 下仍向左对齐，不符合预期
• border-left → 对应逻辑属性是 border-inline-start，对应工具类如 border-s-2（需插件支持）
• Flex/Grid 中的 justify-content: flex-start 在 RTL 下默认对齐到右侧，但 flex-direction: row 仍按逻辑顺序排列，不必强行加 row-reverse

最常被跳过的一步是：没检查表单 placeholder、滚动条位置、日期选择器箭头方向这些隐性 UI 元素——它们是否随 dir="rtl" 自动适配，取决于框架本身是否真正支持 RTL，而不是 Tailwind 类有没有生效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！