如何基于HTML lang属性重写Tailwind CSS fontFamily主题配置适配多语言？

问题场景 #

我的Tailwind CSS/Next.js项目使用了@tailwindcss/typography包，引入了Google字体Lexend Deca，加载运行均正常。当前Tailwind配置如下：

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'main-sans': ["Lexend Deca", "sans-serif"]
      },
    }
  }
}

我在多个CSS模块中通过@apply复用该字体类，示例代码：

.headerBig {
  @apply text-[22px] leading-[26px] font-main-sans font-[500];
}

现在项目需要支持多语言，部分语言需切换字体（比如Lexend Deca不支持日语，当HTML的lang属性变为ja-JP时，要改用Noto Sans JP字体）。原生CSS可通过lang属性选择器实现，但我不想修改大量已使用@apply的代码，希望基于HTML lang属性重写Tailwind主题的fontFamily定义。

解决方案 #

方法1：全局样式覆盖（最简方案） #

无需修改Tailwind配置，直接在全局CSS文件（如globals.css）中添加lang选择器规则，覆盖font-main-sans类的字体：

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

html[lang="ja-JP"] .font-main-sans {
  font-family: "Noto Sans JP", sans-serif;
}

所有使用@apply font-main-sans的类，在日语环境下会自动切换为Noto Sans JP，完全不需要修改现有业务代码。

方法2：Tailwind配置扩展+全局注入 #

先在Tailwind配置中添加多语言字体定义，再通过全局样式关联lang属性：

1. 更新Tailwind配置：

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'main-sans': ["Lexend Deca", "sans-serif"],
        'main-sans-ja': ["Noto Sans JP", "sans-serif"]
      },
    }
  }
}

2. 在全局CSS中注入关联规则：

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

html[lang="ja-JP"] .font-main-sans {
  font-family: theme('fontFamily.main-sans-ja');
}

这种方式把字体定义统一放在Tailwind配置中，便于后续维护多语言字体列表。

方法3：自定义Tailwind变体（灵活场景） #

如果需要针对特定组件单独控制语言字体，可以自定义lang变体：

1. 修改Tailwind配置：

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'main-sans': ["Lexend Deca", "sans-serif"],
        'main-sans-ja': ["Noto Sans JP", "sans-serif"]
      },
    },
    variants: {
      extend: {
        fontFamily: ['lang-ja']
      }
    },
    plugins: [
      function({ addVariant, e }) {
        addVariant('lang-ja', ({ modifySelectors, separator }) => {
          modifySelectors(({ className }) => {
            return `html[lang="ja-JP"] .${e(`lang-ja${separator}${className}`)}`;
          });
        });
      }
    ]
  }
}

2. 在CSS模块中使用变体：

.headerBig {
  @apply text-[22px] leading-[26px] font-main-sans font-[500];
  @apply lang-ja:font-main-sans-ja;
}

此方案适合需要精细控制组件语言样式的场景，但需要少量修改现有@apply代码。

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