是否可以按语言为多种字体配置 Tailwindcss 排版？

Question

我的 Tailwindcss / nextjs 项目使用 @tailwindcss/typography 包并定义了 google 字体。它加载并运行良好。

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 属性更改为 lang="ja-JP" 时，我们需要使用 Noto Sans JP 字体。

在 vanilla css 中，使用“lang”属性选择器，此任务很简单：

html[lang="ja-JP"] body{ font-family: "Noto Sans JP" }

我知道我们也可以不使用 Tailwindcss @apply 字体系列。但这将是一种耻辱，因为依赖它的类遍布我们的代码。

有没有办法根据 html lang 属性覆盖 Tailwindcss 主题 fontFamily 定义？

谢谢！

Answer 1

找到了一个并不理想但有效的解决方案。

将日文版字体添加到主题中：

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

然后在CSS模块中使用lang选择器来覆盖：

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

html[lang="ja-JP"] {
  .headerBig {
    @apply text-[22px] leading-[26px] font-main-sans-jp font-[500];  
  }
}