The sans font family is incorrectly generated on the html rule when using fontFeatureSettings

[xt0rted]

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.

[bradlc]

Hey @xt0rted, thanks for reporting this! The issue is now resolved and will be included in the next stable release. In the meantime you may use the insiders release which already contains the fix: npm install tailwindcss@insiders