Custom colors not working in CSS

[mirorauhala]

What version of Tailwind CSS are you using?

v4.0.17

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

Vite 6.2.0

What version of Node.js are you using?

v22.13.1

What browser are you using?

Chrome

What operating system are you using?

macOS

https://github.com/mirorauhala/tw-custom-properties

Issue

Referencing colors as --color-* properties from a CSS module file does not work unless the color utility is mentioned elsewhere.

For example, if you define a color such as --color-red-custom-1: red and use it from a CSS module file, like this:

.red { background: var(--color-red-custom-1); }

The final build will not contain the custom property defined and the color won't show correctly unless bg-red-custom-1 is used elsewhere, which will cause the property to be included in the build.

Expected

The colors to work. The docs outline the following:

Colors are exposed as CSS variables in the --color-* namespace, so you can reference them in CSS with variables like --color-blue-500 and --color-pink-700:

https://tailwindcss.com/docs/colors#referencing-in-css

[ThaoD5]

I think this is a mistake on a recent push, on a more global level of custom css variables to work, defining --z-index-header: 100; also does not work when doing z-index: var(--z-index-header-contact);, had to roll back to 4.0.3 (4.0.3 being previous version for this project, i did not isolate the problematic version) to make it work again

[mirorauhala]

I fixed this in our project by using the @apply bg-red-custom-1 directive instead of applying the colors as custom css properties. This of course isn't a proper long-term fix, since if the Tailwind utility usages change during development elsewhere in the project, it may cause incorrect colors to show inadvertently again.

[mirorauhala]

Related #16904

[mirorauhala]

It may also be possible to fix this temporarily with @theme static {...} which generates all CSS variables, but I bet that means a lot of unused tailwind builtins will also be included among the custom ones.

https://tailwindcss.com/docs/theme#generating-all-css-variables

[philipp-spiess]

Hey! Closing this as a duplicate of #16904 which we started fixing today pretty much as you wrote this GitHub issue haha. We're already testing a fix for it so that should work again soon.

[RobinMalfait]

Hey!

This should be fixed by #17433 and will be available in the next release.