Cannot change shadow via CSS variable

[MarvinAsmen]

I am using Tailwind v4 with CSS for configuration. My goal is to change the value of a theme shadow variable (e.g., --shadow-2xl) via its generated regular CSS variable. However, this does not seem to work. When I assign a value to the regular CSS variable, it gets ignored.

In contrast, this approach works fine for other theme variables, such as --radius-2xl. This behavior seems unexpected to me.

I have found a workaround by introducing additional CSS variables and assigning them to the theme shadow variables. This way, I can update those variables, which in turn update the shadows. However, I would prefer to modify the shadow CSS variables directly to avoid bloating the config even further.

Here is a CodePen example illustrating the issue.

Is this a bug or intended behavior?

[wongjn]

I believe this is a side-effect of how Tailwind currently supports the four different box shadow composables. It transforms the value into CSS as:

.shadow-2xl {
  --tw-shadow: 0px 0px 0px 1px var(--tw-shadow-color, rgba(255, 0, 0, 0.2)), 0px 7px 14px 0px var(--tw-shadow-color, rgba(255, 0, 0, 0.8)), 0px 14px 28px 0px var(--tw-shadow-color, rgba(255, 0, 0, 0.09));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

Notice how there is no direct usage of --shadow-2xl, hence why it cannot be overriden directly.

[adamwathan]

This is an annoying trade-off we had to make because otherwise the shadow color utilities wouldn't work 😕

Here's a time capsule of me trying to figure out a solution:

https://x.com/adamwathan/status/1775937299919859961

[MarvinAsmen]

Interesting, so I guess my best bet is to use my workaround. Maybe for clarification why I want to do this: I want to use different shadow styles for different data-themes. E.g. for the dark mode themes I want to hide them.