如何在NuxtJS+Tailwind中随语言切换默认字体族？

1. 给根元素绑定明确的方向属性 #

在Nuxt的布局文件（如layouts/default.vue）中，将排版方向绑定到当前语言的dir属性，确保根元素能被精准选中：

<template>
  <html :dir="$i18n.dir">
    <body>
      <Nuxt />
    </body>
  </html>
</template>

2. 调整全局CSS的优先级与写法 #

在你的全局Tailwind样式文件（如assets/css/tailwind.css）中，在Tailwind基础样式之后添加方向对应的字体设置，用更具体的选择器覆盖默认样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

/* RTL方向默认字体 */
html[dir="rtl"] {
  font-family: 'Noto Kufi Arabic', sans-serif;
}

/* LTR方向默认字体 */
html[dir="ltr"] {
  font-family: 'Open Sans', 'Ubuntu', sans-serif;
}

3. 验证字体加载状态 #

确保字体已正确引入项目：

• 若使用CDN字体，在nuxt.config.js的head.link中添加字体资源链接；
• 若为本地字体，通过@font-face在全局CSS中声明，且文件路径无误。

原方法失效原因 #

你之前用的[style*="direction:rtl"]选择器优先级和Tailwind默认的html选择器一致，如果自定义CSS加载在Tailwind基础样式之前，就会被覆盖。改用html[dir="rtl"]选择器能提升优先级，确保样式生效。另外，字体名称包含空格时需加引号，避免解析错误。

内容的提问来源于stack exchange，提问作者Abdelrhman Gad