@property isn't supported in shadow roots

[blittle]

What version of Tailwind CSS are you using?

For example: 4.0.0-alpha.34

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

Web components with shadow roots.

What version of Node.js are you using?

v22.2.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/blittle/tw-shadow

Describe your issue

Tailwind v4 uses @property to define defaults for custom properties. At the moment, shadow roots do not support @property. It used to be explicitly denied in the spec, but it looks like there's talk on adding it: w3c/css-houdini-drafts#1085

I don't know if this is something tailwind should fix, but it took me a while to find the issue, so it's probably worth keeping this issue to document the limitation.

Here is a work-around, just attaching the @property definitions to the base document. It would be nice if tailwind provided an easy way to import just that content.

An easy way to do that with Vite is to create a tailwind css file specifically for the properties and apply a transform:

export default defineConfig(() => {
  return {
    ...
    plugins: [
      tailwindcss(),
      {
        name: "tailwind-properties",
        transform(code, id) {
          if (id.endsWith("tailwind-properties.css?inline")) {
            // Change custom properties to inherit
            code = code.replaceAll("inherits: false", "inherits: true");

            // Remove everything before the property declarations
            code = code.substring(code.indexOf("@property"));

            return code;
          }
        },
      },
    ],
  };
});

[ErwinAI]

Not 100% sure if this is related, but I noticed that in a shadow root, the defaults under @theme aren't available. I.e. I can't see --spacing in devtools, and it doesn't have any value.

Essentially rendering Tailwind unusable in shadow roots for most use cases.