[V4] Box Shadow Color doesn't work about tailwindcss HOT 5 CLOSED

Hey!

You mentioned that you are using Chrome but I'm 99% sure you are using Firefox. If that's the case then this is currently expected behaviour.

We rely on @property which isn't supported in Firefox yet. You can use Firefox Nightly and I believe it should be available in the release of May in normal Firefox.

Are you using Firefox by any chance?

from tailwindcss.

Hey!

You mentioned that you are using Chrome but I'm 99% sure you are using Firefox. If that's the case then this is currently expected behaviour.

We rely on @property which isn't supported in Firefox yet. You can use Firefox Nightly and I believe it should be available in the release of May in normal Firefox.

Are you using Firefox by any chance?

Unfortunately, I'm using Chrome Version 123.0.6312.59 (Official Build) (arm64).
BTW tried to do the same using tailwind@3.* - works well

from tailwindcss.

I'm seeing this issue in Chrome too, seems --tw-shadow-colored doesn't use var(--tw-shadow-color) when using shadow-xl:

Compared to just shadow which does include it (and doesn't wrap the entire value in var(--shadow, ...)):

Updating --tw-shadow-colored to the following resolves the issue.

 --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);

from tailwindcss.

Looked into this quickly — definitely a real bug, regression we introduced when we started including the var(...) function call in resolved theme values. Fix is a bit more complicated than I hoped, will take a peek tomorrow!

from tailwindcss.

Patched this up, running a release now 👍 Should be back to working in 4.0.0-alpha.13.

from tailwindcss.