v4: define all Tailwind CSS Variables using ":root, :host" selector for Shadow DOM compatibility

[ibarral]

Hello,

I'm using Tailwind v4 with Vite on a project where I want to create Web Component using React and Tailwind for the styles.

I noticed that all the CSS Variables included on the @theme layer are inside a ":root" selector, as is mentioned on the Tailwind v4.0 Beta Documentation:

:root {
  --font-display: "Satoshi", "sans-serif";

   /* ... */
}

I would be great if all the theme variables are included using ":root, :host" selector for Shadow DOM compatibility. Example:

:root, :host {
  --font-display: "Satoshi", "sans-serif";

   /* ... */
}

You can check why on this article:

https://techblog.skeepers.io/create-a-web-component-from-a-react-component-bbe7c5f85ee6

Thanks!

[bella964]

Hello,
You're right that by default, Tailwind v4 generates the CSS variables in the :root selector, which is not directly compatible with the Shadow DOM's :host selector. This could cause issues when you're working with Web Components, as styles inside the Shadow DOM are encapsulated and need the :host selector for proper styling. JPMCB Card

To add compatibility for the Shadow DOM, you can modify the Tailwind configuration to include :host in addition to :root. Here's how you can approach it:

Customizing the Tailwind Configuration:

In your tailwind.config.js file, you can extend Tailwind's CSS variables to be included in both :root and :host. You might need to write a custom PostCSS plugin or use Tailwind's @layer to ensure this gets applied.

Using PostCSS with Tailwind (or Tailwind Plugin):

You can customize the @theme layer to prepend :root, :host like this:

js
// tailwind.config.js
module.exports = {
content: [
'./index.html',
'./src/**/*.{js,ts,jsx,tsx}', // Adjust according to your project structure
],
theme: {
extend: {
// You can add custom CSS variables here
},
},
plugins: [
function ({ addBase }) {
addBase({
':root, :host': {
'--font-display': '"Satoshi", sans-serif',
// Add other theme variables here
},
});
},
],
};
This ensures that all theme variables are applied within both :root and :host, making them available both globally and within any shadow DOMs.

Ensure Tailwind's CSS is Applied in Shadow DOM:

When you generate your Web Component, ensure that the generated CSS is encapsulated within the component's shadow root. Here's a basic example:

jsx

class MyComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
const style = document.createElement('style');
style.textContent = :host { font-family: var(--font-display, sans-serif); /* Other styles */ };
this.shadowRoot.appendChild(style);
}
}

customElements.define('my-component', MyComponent);

[ibarral]

Thanks for your help @bella964 !

I just want to use all the default theme variables of Tailwind, but change the selector to ":root, :host".

I think that the example that you send requires the re-define all the Tailwind variables, and uses the tailwind.config.js, that is not recommended on v4.

Is there any other better way?

Anyway, I think that Tailwind should use the ":root, :host" selector by default for Shadow DOM compatibility ;)

Thanks!

[wongjn]

There was a similar question asked in the Discord server with a maintainer response as follows:

Is there a way (or plan to support this) to make @theme directive define the theming variables with different than :root selector. I'd need to do it on :host (shadow DOM root)?

No plans right now, I guess you could add a custom PostCSS plugin that converts :root into :root, :host or something. However, shadow dom has other issues around @property which we rely on in v4 (see: w3c/csswg-drafts#10541)

[vincaslt]

I was testing v4 inside shadow dom, and I faced this issue with :root -> :host, and I solved that by importing css inline then string-replace w/ .replaceAll(':root', ':host') as a quick workaround. However, v4 still won't work in shadow dom because theme variables and some utility properties don't work, i.e. the ones added as @property. Is there a solution for this, or do we stick to v3? Is there going to be a solution for shadow dom?

[guyathomas]

This isn't perfect, but i've done this as a workaround for now.

@import "tailwindcss";

:host {
  --tw-border-style: solid;
  --tw-font-weight: initial;
  --tw-tracking: initial;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-color: initial;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-shadow-color: initial;
  --tw-ring-color: initial;
  --tw-ring-shadow: 0 0 #0000;
  --tw-inset-ring-color: initial;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-inset: initial;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-offset-shadow: 0 0 #0000;
}

[j-hit]

Thanks @guyathomas your workaround solved my issue after multiple hours of debugging and research! 🙏

I ended up adding some more @property variables as standard CSS variables to my globals.css file.

@import 'tailwindcss';

:host {
    --tw-divide-y-reverse: 0;
    --tw-border-style: solid;
    --tw-font-weight: initial;
    --tw-tracking: initial;
    --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-space-x-reverse: 0;
    --tw-gradient-position: initial;
    --tw-gradient-from: #0000;
    --tw-gradient-via: #0000;
    --tw-gradient-to: #0000;
    --tw-gradient-stops: initial;
    --tw-gradient-via-stops: initial;
    --tw-gradient-from-position: 0%;
    --tw-gradient-via-position: 50%;
    --tw-gradient-to-position: 100%;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-color: initial;
    --tw-inset-shadow: 0 0 #0000;
    --tw-inset-shadow-color: initial;
    --tw-ring-color: initial;
    --tw-ring-shadow: 0 0 #0000;
    --tw-inset-ring-color: initial;
    --tw-inset-ring-shadow: 0 0 #0000;
    --tw-ring-inset: initial;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-blur: initial;
    --tw-brightness: initial;
    --tw-contrast: initial;
    --tw-grayscale: initial;
    --tw-hue-rotate: initial;
    --tw-invert: initial;
    --tw-opacity: initial;
    --tw-saturate: initial;
    --tw-sepia: initial;
    --tw-drop-shadow: initial;
    --tw-duration: initial;
    --tw-ease: initial;
}

[joezappie]

I actually have the exact opposite issue as it looks like it is applying to :root, :host in v4 which is strange unless this was changed.

This issue with this is now any properties defined in the upper scope get overwritten which means nothing propagates to the shadowdom children.

@theme { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji"; }
:root[silly-mode] { --font-sans: 'comic sans'; }

<html silly-mode></html> // Shadow dom elements will be ui-san-serif

The work around is to set the @theme variables to inherit:

@theme { --font-sans: inherit; }
:root { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji"; } 
:root[silly-mode] { --font-sans: 'comic sans'; }

<html silly-mode></html> // Shadow dom elements will be comic sans

Did this get changed so it applies on :host as well?

[doits]

I'm chiming in here, too, with the request to be able to disable outputting :host selectors at all (I can open a new discussion if this fits better):

I'm using tailwindcss to style pdf documents that are generated by WeasyPrint. It worked fine with v3 and I mostly got it to work with v4, too: I could disable some calc()s for example (which WeasyPrint doesn't support) by specifying the --spacing-* manually etc., but I have one remaining thing that makes it incompatible:

Tailwindcss outputs selectors like :root, :host { and WeasyPrint doesn't support :host. This leads to all styles inside :root, :host { to be ignored (which I thought was a bug in WeasyPrint but actually isn't) and this breaks everything completely.

I know that tailwindcss doesn't target such document generators, but maybe it makes sense to reduce the css anyways when one is sure there is never any shadow DOM used and a tailwindcss config option could be provided to do so?

Maybe it is possible already and I just don't know how?

[joezappie]

There's several discussions about wanting tailwind v4 to include the :root, :host selector so I'm just confused if this was a change that was made. I even tried to go back to beta-9 from two months ago but I still see the :host selector. So a little clarity from the dev team if this is intended or not would be helpful.

Heres a fresh vite + tailwind repo that shows that
https://github.com/joezappie/tailwind-shadow-dom-test

I can see two scenarios though so I think there needs to be some sort of selector for this:

• If you're using tailwind for your entire project, then you probably want to to propagate your colors and variables from the root.
• If your using tailwind only inside a shadow dom element on a non tailwind site, then the element needs to declare these variables or else you have no colors.

I'm a little torn for my use case. Having it not include :host works the way I'd expect it to. Having it include :host, I have to declare all my @theme variables as inherit just to get tailwind to recognize them and then define them later in a :root selector, but this has the added benefit of being able to force a fixed color even if the root changes it (such as an important brand color):

@theme {
  --color-primary: inherit;
  --fixed-color: blue;
}

/* Default theme */
:root:not([color-theme]) {
  --color-primary: blue;
}

/* Additional Theme */
:root[color-theme=red] {
  --color-primary: red;
  --fixed-color: red;
}

In this example, the primary color would inherit from the root document, but the fixed color would be reset for every component.

edit
Another potential solution for the problem I described could be importing the theme layer only into the root, and having a separate shadowdom style sheet for my theme that excludes the theme layer:

main.css

@import "tailwindcss";

@theme {
  --color-primary: blue;
}

shadow-dom.css

@layer theme, base, components, utilities;
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

This seems to error though not being able to find utility classes.

[ibqn]

are there any updates on this topic?