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

[philipp-spiess]

Hey @snaptopixel! Unfortunately @property declarations do not do anything when attached within a shadow-root, you need to ensue these are attached to the root document instead. We have an issue about this open at: #15005

The issue is that we rely on @property to make variables animatable and avoid inheritance, so using @property is a requirement for v4 unfortunately.

[snaptopixel]

Thanks @philipp-spiess, I'm curious why tailwind 4 made the design decision to rely on @property I don't think there is any required reason to use it over default variables? Is it just a convenience or "shiny new thing" feature? Looking at the other post it seems others have faced the same issue and frustration as I have. I would suggest a hard look at what it would take to refactor and be @property free unless it's absolutely a requirement for some reason.

[philipp-spiess]

@snaptopixel I don't think there is any required reason to use it over default variables?

@property allows us to control the inheritance properties of CSS variables and allows us to makes css variables interpolatable (read: animateable) by having a type (e.g. it would not be possible at all to animate box-shadow in Tailwind CSS without the use of @property).

I understand your frustration with how this feature works inside shadow-roots that makes it a bit inconvenient, but it's unfortunately specced like this. You can see more context on it here, for example: w3c/css-houdini-drafts#939 If you hoist the @property declarations into the document root styles, it will work as expected.

[snaptopixel]

Thanks for the discussion, appreciated! How would one hoist @property declarations? Is there a way to output css with only the @Property declarations via the CLI? For reference, I'm building a single tailwind css file and using it in shadow-dom web components via <link> tag. I really don't want anything bleeding out into the page. For now I'm stuck adding my own defaults under the :host selector as I run across issues which is less than ideal.

[snaptopixel]

For reference here's what I'm using to list of all the @property vars that have initial-value in my shadow-dom

:host {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-translate-z: 0;
  --tw-rotate-x: rotateX(0);
  --tw-rotate-y: rotateY(0);
  --tw-rotate-z: rotateZ(0);
  --tw-skew-x: skewX(0);
  --tw-skew-y: skewY(0);
  --tw-border-style: solid;
  --tw-gradient-from: #0000;
  --tw-gradient-via: #0000;
  --tw-gradient-to: #0000;
  --tw-gradient-from-position: 0%;
  --tw-gradient-via-position: 50%;
  --tw-gradient-to-position: 100%;
  --tw-shadow: 0 0 #0000;
  --tw-inset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-outline-style: solid;
}

[robustadev]

Hi, Just started a new project and found this discussion.
Like @snaptopixel did with the manual css custom properties injected into the host, I've created a PostCSS plugin that dees it automatically.

The plugin looks for @property declarations inside the css and convert them into a css custom property with the initial value from the @property

I guess i'll see some errors when it comes to animations since the css rules will not have an initial value to animate from.

Anyway, here is the Plugin code:

/**
 * PostCSS plugin to convert @property declarations to CSS custom properties
 * This helps with using property values inside Shadow DOM
 */
export default (opts = {}) => {
  return {
    postcssPlugin: 'postcss-property-to-custom-prop',
    prepare(result) {
      // Store all the properties we find
      const properties = [];

      return {
        AtRule: {
          property: (rule) => {
            // Extract the property name and initial value
            const propertyName = rule.params.match(/--[\w-]+/)?.[0];
            let initialValue = '';

            rule.walkDecls('initial-value', (decl) => {
              initialValue = decl.value;
            });

            if (propertyName && initialValue) {
              // Store the property
              properties.push({ name: propertyName, value: initialValue });

              // Remove the original @property rule
              rule.remove();
            }
          },
        },

        OnceExit(root, { Rule, Declaration }) {
          // If we found properties, add them to :root, :host
          if (properties.length > 0) {
            // Create the :root, :host rule using the Rule constructor from helpers
            const rootRule = new Rule({ selector: ':root, :host' });

            // Add all properties as declarations
            properties.forEach((prop) => {
              // Create a new declaration for each property
              const decl = new Declaration({
                prop: prop.name,
                value: prop.value,
              });
              rootRule.append(decl);
            });

            // Add the rule to the beginning of the CSS
            root.prepend(rootRule);
          }
        },
      };
    },
  };
};

export const postcss = true;

Usage:

import propertyToCustomProp from './plugins/postcss-property-to-custom-prop';
import tailwindcss from '@tailwindcss/postcss';

export default {
  plugins: [
    tailwindcss(),
    propertyToCustomProp()
  ],
};

Inside my web component i'm using the !inline directive for import and using the this.shadowRoot!.adoptedStyleSheets(...) like this:

import globalCss from '@/styles/global.css?inline';

const sheet = new CSSStyleSheet();
sheet.replaceSync(globalCss);

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

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

        // ...
    }
}

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