-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Description
What version of Tailwind CSS are you using?
3.2.1
What build tool (or framework if it abstracts the build tool) are you using?
- tailwind cli
- https://play.tailwindcss.com/
What version of Node.js are you using?
- 18.12.0
- 19.0.0
What browser are you using?
Chrome
What operating system are you using?
Windows
Reproduction URL
https://play.tailwindcss.com/IOqcJC9U7G
Describe your issue
If you try to use fontFeatureSettings
on the sans
font family then the value added to the html
rule results in the following which places Inter
at the end of the list instead of the beginning, and instead of font-feature-settings
you get [object Object]
at the very end of the font list:
html {
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji", Inter, [object Object];
}
.font-sans {
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji", Inter, [object Object];
}
If you adjust the font family to be a string instead of string array then the font-family
is correctly set on the html
rule, but there's no font-feature-settings
. The .font-sans
rule does include the extra settings though.
This issue does not seem to happen with a custom font family class such as the .font-inter
version in the example.