Skip to content

v4 preflight theme variables aren't prefixed #16945

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
cvharris opened this issue Mar 4, 2025 · 2 comments · Fixed by #17036
Closed

v4 preflight theme variables aren't prefixed #16945

cvharris opened this issue Mar 4, 2025 · 2 comments · Fixed by #17036

Comments

@cvharris
Copy link

cvharris commented Mar 4, 2025

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
Copy link
Member

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
Copy link

I have the same question :)

@philipp-spiess philipp-spiess mentioned this issue Mar 14, 2025
Merged
philipp-spiess added a commit that referenced this issue Mar 20, 2025
@philipp-spiess
Make --theme(…) return CSS variables (#17036)
ca7b10e 
Closes #16945

This PR changes the `--theme(…)` function now return CSS `var(…)`
definitions unless used in places where `var(…)` is not valid CSS (e.g.
in `@media (width >= theme(--breakpoint-md))`):

```css
/* input */
@theme {
  --color-red: red;
}
.red {
  color: --theme(--color-red);
}

/* output */
:root, :host {
  --color-red: red;
}
.red {
  color: var(--color-red);
}
```

Furthermore, this adds an `--theme(… inline)` option to the `--theme(…)`
function to force the resolution to be inline, e.g.:

```css
/* input */
@theme {
  --color-red: red;
}
.red {
  color: --theme(--color-red inline);
}

/* output */
.red {
  color: red;
}
```

This PR also changes preflight and the default theme to use this new
`--theme(…)` function to ensure variables are prefixed correctly.

## Test plan

- Added unit tests and a test that pulls in the whole preflight under a
prefix theme.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Make --theme(…) return CSS variables tailwindlabs/tailwindcss
3 participants
@philipp-spiess @cvharris @woutersteven