Not able to change default color for shadow

[amir20]

What version of Tailwind CSS are you using?

v4.1.8

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

Using playground

What version of Node.js are you using?

Using playground

What browser are you using?

Chrome

What operating system are you using?

Mac

Reproduction URL

https://play.tailwindcss.com/FPv6fpDWw0?file=css

Describe your issue

I am trying to override the color for dark and light mode with --tw-shadow-color: rgb(255 0 0 / 50%); but I have noticed this doesn't work.

When using developer tools, everything seems right and css variables are correct. But still the shadow is black instead of red.

[wongjn]

The default shadow color is part of the shadow definitions. So to change the default color, you'd need to replace the default shadow theme tokens. Furthermore, rgb() components are in the range 0-255 not 0-1. So to have a red color, you'd need rgb(1 0 0): https://play.tailwindcss.com/IuIY2QZYCI?file=css

[amir20]

That was just my typo on my side. The variable --tw-shadow is 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)). So I am trying to override --tw-shadow-color.

The new color has been picked up, but the preview is still:

This seems to be a bug.

Updated link: https://play.tailwindcss.com/FPv6fpDWw0?file=css

[wongjn]

This is a bug in what seems to be the browser developer tools. If we look at the relevant @property rule:

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

We see that inherits is false. This means the value from :root (compiled from your @theme) does not inherit down. This intended to stop unintentional child shadow color inheritance.

The default shadow color is part of the shadow definitions. So to change the default color, you'd need to replace the default shadow theme tokens: https://play.tailwindcss.com/IuIY2QZYCI?file=css

Alternatively, you can use a shadow-<color> utility class: https://play.tailwindcss.com/WGXMeWIZdQ

[amir20]

Ok that explains it. Sounds like all inherits: false cannot be over ridden as expected.

[amir20]

I ended up doing

[class*="shadow-"] {
  @apply shadow-base-content/8;
}