@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.

[philipp-spiess]

@blittle Thanks for the detailed writeup and sorry for the late answer here.

From what I understand after doing some testing, it is indeed still required that the @property definitions are hoisted to the base document.

The snippet you have for that also changes the inherits property. Do you remember why this was necessary? I was playing around it in a simple playground and found that this wasn't necessary for my tests. I didn't transform the sources via Vite though but added this snippet directly within the runtime of a custom component's connectedCallback hook:

let atProperties = styles.slice(styles.indexOf('@property'))
let style = document.createElement('style')
style.innerText = atProperties
document.head.appendChild(style)

[kilobyte2007]

I've stumbled upon this today so thanks for the workaround @blittle @philipp-spiess. I've spent an hour pulling my hair out.

@philipp-spiess Does it make sense to be somehow able to configure tailwindcss to build the CSS with simple variables instead of @property for cases like this? Or would that break other stuff?

[molvqingtai]

Same issue, the shadow dom should follow isolation rules, we need a way not to rely on @property

[ico85]

Noticed this as well. Some css-variables are not defined in my Custom Element :/

[KoJem9Ka]

+1 Same problem(

[meefik]

You can use this code to add Tailwind properties to global style sheets:

import styles from './styles.css?inline';

const shadowSheet = new CSSStyleSheet();
shadowSheet.replaceSync(styles.replace(/:root/ug, ':host'));

const globalSheet = new CSSStyleSheet();
for (const rule of shadowSheet.cssRules) {
    if (rule instanceof CSSPropertyRule) {
        globalSheet.insertRule(rule.cssText);
    }
}

document.adoptedStyleSheets.push(globalSheet);

export class MyComponent extends HTMLElement {
    constructor() {
        super();

        const shadowRoot = this.attachShadow({ mode: 'open' });
        shadowRoot.adoptedStyleSheets = [shadowSheet];

        // ...
    }
}

Or you can replace @property with variables like this:

import styles from './styles.css?inline';

const shadowSheet = new CSSStyleSheet();
shadowSheet.replaceSync(styles.replace(/:root/ug, ':host'));

const properties = [];
for (const rule of shadowSheet.cssRules) {
  if (rule instanceof CSSPropertyRule) {
    if (rule.initialValue) {
      properties.push(`${rule.name}: ${rule.initialValue}`);
    }
  }
}
shadowSheet.insertRule(`:host { ${properties.join('; ')} }`);

export class MyComponent extends HTMLElement {
    constructor() {
        super();

        const shadowRoot = this.attachShadow({ mode: 'open' });
        shadowRoot.adoptedStyleSheets = [shadowSheet];

        // ...
    }
}

[sschultze]

I stumbled upon this too. The decision to go for @property makes Tailwind 4 unusable for the Shadow DOM, which is very frustrating. If @property is really needed for something like animating drop shadows (it this so important?), then the developers should at least have included a configuration setting that makes something as simple as a drop shadow work in the Shadow DOM. In my opinion.

[mengxi-ream]

This really makes me to consider about other css options rather than tailwind