Japanese/Chinese fonts are not used in Japanese/Chinese pages in Chinese/Japanese Windows by default

[tats-u]

What version of Tailwind CSS are you using?

• 4.2.1
• 3.4.19
• 2.2.19
• 1.9.6

What build tool (or framework if it abstracts the build tool) are you using?

Independent

What version of Node.js are you using?

Independent

What browser are you using?

Independent

Firefox, Chrome

What operating system are you using?

Windows 11 + Japanese locale

Reproduction URL

https://play.tailwindcss.com/FsHyTW21Oj

Describe your issue

• Use Windows
• • Prepare Japanese content
  • Set lang="ja"
  • Set the OS locale to Chinese
• • Prepare Chinese content
  • Set lang="zh" or zh-■■
  • Set the OS locale to Chinese whose region is different or Japanese
    • zh-CN or zh page / Traditional Chinese (Taiwan) or Traditional Chinese (Hong Kong) locale
    • zh-TW, zh-HK, or zh-Hans page / Simplified Chinese (China) locale

The default font stack in Tailwind abuses system-ui and causes not a few problems. One of them is that it causes the problem https://heistak.github.io/your-code-displays-japanese-wrong/. If a Chinese-specific font is used for displaying Japanese text, and a Japanese-specific font is used for displaying Chinese text, characters may be displayed with unintended glyphs.

w3c/csswg-drafts#3658 (comment)

The solution to that is simple: just ditch system-ui from your default font stack. If you only want the best appearance on Apple's OSes, -apple-system and BlinkMacSystemFont are sufficient. sans-serif assigns a proper font for a designated language unlike system-ui. If you simply want to ensure that Segoe UI is used in Windows for languages that use Latin script, such as English, you only need to specify its name.

• Japanese font is not suitable for documentation sites in Japanese Windows, Japanese/Chinese fonts are not used in Japanese/Chinese pages in Chinese/Japanese Windows, and Segoe is not used in English pages in CJK Windows due to system-ui withastro/starlight#3721
  • Update default system font stack to better handle CJK locales on Windows withastro/starlight#3729
• Prefer sans-serif to system-ui in default fonts vuejs/vitepress#4946
  • fix(theme): strip system-ui from font-family-base vuejs/vitepress#4988
• Don't use system-ui, strip it from --ifm-font-family-base facebook/docusaurus#11727