[bug] box-shadow doesn't work in shadow-dom due to reliance on @property

[snaptopixel]

What version of Tailwind CSS are you using?

v4.0.6

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

tailwind-cli

What version of Node.js are you using?

v20.0.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://codepen.io/snaptopixel/pen/GgRZebj

Describe your issue

Tailwind's box-shadow based utils (ring, shadow, etc) use multiple shadow syntax with custom properties:

box-shadow: var(--foo), var(--bar), var(--baz);

Since these vars don't have default/fallback values the whole box-shadow breaks if any one of them is undefined. In non-shadow this is a non-issue since @property provides default values. However in shadow-dom @property does nothing, so ironically, in shadow-dom you will have no shadows on your dom.

Essentially it seems there should be suitable fallbacks for any utils that currently rely on @property since it doesn't work in shadow-dom land.