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)