v4 preflight theme variables aren't prefixed

[cvharris]

Versions:

• Tailwind: v4.0.9
• Vite: 5.2.11
• Node: 20.14.0
• Chrome, Mac OS

Reproduction URL

If you look at the reproduction URL above (took awhile to prefix all those classes lol) you can see that the --default-font-family does not map to the prefixed --font-sans declared in the @theme. It seems that since --default-font-family: var(--font-sans); it isn't getting updated to map to the prefixed value later. This was not an issue in v3.

The workaround I have is to declare --default-font-family in my own @layer base:

@layer base {
  html {
    --default-font-family: 'Salesforce Sans', Helvetica, Arial, sans-serif;
  }
}

What ought to happen is the preflight reference points to the prefixed font so that the theme can correctly override it: --default-font-family: var(--tw-font-sans);

[philipp-spiess]

Thanks for the repro! Can confirm that this is an issue, we're thinking about the best way to solve this right now, I'll update the issue ones we decided on a fix.

[woutersteven]

I have the same question :)