使用Tailwind CSS与DaisyUI时切换RTL语言如何动态调整方向为RTL

前置依赖安装 #

先安装Tailwind官方RTL支持插件：
npm install @tailwindcss/rtl

配置Tailwind配置文件 #

修改tailwind.config.js，不要全局开启DaisyUI的固定RTL配置，开启RTL动态适配能力：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  daisyui: {
    // 不要配置 rtl: true，该配置为全局固定RTL模式，无法动态切换
    themes: ["light"], // 保留你原有的主题配置即可
  },
  corePlugins: {
    direction: true,
  },
  plugins: [
    require('daisyui'),
    require('@tailwindcss/rtl')
  ],
}

编写动态切换逻辑 #

语言切换时同步修改根节点的dir属性，DaisyUI所有组件会自动适配根节点的方向属性，无需额外修改组件配置：

// 切换为波斯语（RTL模式）
const changeToFa = () => {
  document.documentElement.setAttribute('dir', 'rtl')
  document.documentElement.lang = 'fa'
  // 补充你自身的i18n语言切换逻辑
}

// 切换为英语（LTR模式）
const changeToEn = () => {
  document.documentElement.setAttribute('dir', 'ltr')
  document.documentElement.lang = 'en'
  // 补充你自身的i18n语言切换逻辑
}

导航抽屉适配优化 #

如果默认抽屉未自动适配方向，将原有的物理方向属性替换为逻辑方向属性即可自动适配：

• 定位属性用start/end代替left/right
• 边距属性用ms/me/ps/pe代替ml/mr/pl/pr
  示例抽屉代码：

<!-- 抽屉触发按钮 -->
<button class="btn ms-4">打开导航</button>

<!-- 导航抽屉结构 -->
<div class="drawer-side fixed start-0 top-0 h-full w-64 bg-base-200 shadow-lg transition-transform duration-300">
  <ul class="menu p-4 gap-2">
    <li><a>首页</a></li>
    <li><a>个人中心</a></li>
    <li><a>设置</a></li>
  </ul>
</div>

所有涉及左右方向的样式统一用逻辑属性，RTL切换时会自动翻转，不需要写额外的条件判断。
适配效果参考：

内容的提问来源于stack exchange，提问作者morteza mortezaie