[V4] Theme colors broken on build result

[danie-ramdhani]

What version of Tailwind CSS are you using?

4.0.0-alpha.33

What build tool (or framework if it abstracts the build tool) are you using?

vite 5.4.11

What version of Node.js are you using?

—

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

—

Describe your issue

--color-primary is not works properly on build result but works as expected in development mode.

Steps to Reproduce

<div
        style="background-color: var(--color-primary); width: 40px; height: 40px; margin-top: 10px; margin-bottom: 10px;">
</div>

@theme {
    --color-primary: light-dark(theme(--color-cyan-700), theme(--color-cyan-300));
}

dev mode result

build result

[philipp-spiess]

Heya! I don't think this is a Tailwind CSS bug. First of all, I was only able to reproduce this with a Vite config where transformer is set to lightningcss. Can you confirm this is part of your setup as well? When I use the default postcss transformer, the --color-primary function would transform as expected:

Now, when you do use lightningcss as the Vite transformer, there are some caveats that are documented in the lightningcss docs: https://lightningcss.dev/transpilation.html#light-dark()-color-function

The light-dark() function compiles to a nested var() lookup and in order for this to work, you need to include the color-scheme property so that the root of these variables are defined. I was able to make your example work by changing the CSS to:

@theme {
    --color-primary: light-dark(theme(--color-cyan-700), theme(--color-cyan-300));
}

html {
  color-scheme: light dark;
}