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;
}

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