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) localezh-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.
What version of Tailwind CSS are you using?
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
lang="ja"lang="zh"orzh-■■zh-CNorzhpage / Traditional Chinese (Taiwan) or Traditional Chinese (Hong Kong) localezh-TW,zh-HK, orzh-Hanspage / Simplified Chinese (China) localeThe default font stack in Tailwind abuses
system-uiand 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-serifassigns a proper font for a designated language unlikesystem-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.system-uiwithastro/starlight#3721sans-seriftosystem-uiin default fonts vuejs/vitepress#4946system-ui, strip it from--ifm-font-family-basefacebook/docusaurus#11727