Replies: 8 comments 5 replies
-
|
Hello, 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 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 { customElements.define('my-component', MyComponent); |
Beta Was this translation helpful? Give feedback.
-
|
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! |
Beta Was this translation helpful? Give feedback.
-
|
There was a similar question asked in the Discord server with a maintainer response as follows:
|
Beta Was this translation helpful? Give feedback.
-
|
I was testing v4 inside shadow dom, and I faced this issue with |
Beta Was this translation helpful? Give feedback.
-
|
This isn't perfect, but i've done this as a workaround for now. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @guyathomas your workaround solved my issue after multiple hours of debugging and research! 🙏 I ended up adding some more |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, this solved my issue |
Beta Was this translation helpful? Give feedback.
-
|
I actually have the exact opposite issue as it looks like it is applying to
This issue with this is now any properties defined in the upper scope get overwritten which means nothing propagates to the shadowdom children. The work around is to set the Did this get changed so it applies on :host as well? |
Beta Was this translation helpful? Give feedback.
-
|
I'm chiming in here, too, with the request to be able to disable outputting 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 Tailwindcss outputs selectors like 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? |
Beta Was this translation helpful? Give feedback.
-
|
There's several discussions about wanting tailwind v4 to include the Heres a fresh vite + tailwind repo that shows that I can see two scenarios though so I think there needs to be some sort of selector for this:
I'm a little torn for my use case. Having it not include @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 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. |
Beta Was this translation helpful? Give feedback.
-
|
are there any updates on this topic? |
Beta Was this translation helpful? Give feedback.
-
|
I am writing an app composed entirely of web components (using lit). This worked for me: /* index.css */
@import "tailwindcss";
/* Look for the presense of a `dark` class in the shadown dom host element or
* regular elements to apply dark theme */
@custom-variant dark (&:where(.dark, .dark *), :host(.dark));
@theme {
--color-primary: #F00;
/* ... */
}
@layer theme {
@variant dark {
--color-primary: #0F0;
/* ... */
}
}// MyBaseElement.ts
import style from "index.css?inline";
import { LitElement, unsafeCSS } from "lit";
const darkThemeClass = "dark";
/** The base class of all project web components. */
export class MyBaseElement extends LitElement {
/* Apply css */
static styles = unsafeCSS(style);
private themeObserver?: MutationObserver;
connectedCallback() {
super.connectedCallback();
/* Sync theme on connection */
this.syncTheme();
this.themeObserver = new MutationObserver(() => {
this.syncTheme();
});
/* Observe changes to the 'class' attribute of the html element */
this.themeObserver.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"],
});
}
disconnectedCallback() {
super.disconnectedCallback();
if (this.themeObserver) {
this.themeObserver.disconnect();
}
}
/**
* Sync the theme settings with this component.
*
* Current implementation is purely CSS based, thus no re-rendering
* of the component is needed. However this can be overridden to
* also call `this.requestUpdate()` if for some reason it is necessary to
* re-render the component on theme change. */
protected syncTheme() {
/* Check for the presense of a `darkThemeClass` class in the `<html>` tag */
const isDark = document.documentElement.classList.contains(darkThemeClass);
/* Toggle the class on the shadow root.
* This allows theme color overrides to work (e.g. `--color-myColor` to
* have different values depending on the current theme) */
this.classList.toggle(darkThemeClass, isDark);
/* Also apply or remove the class on all top-level elements in the
* shadow root (if present).
* This allows individual theme modifiers (e.g. the `dark:` prefix
* to classes) to work. */
if (this.shadowRoot) {
for (const el of this.shadowRoot.children) {
el.classList.toggle(darkThemeClass, isDark);
}
}
}
}The above should work on all browsers, including Firefox and Safari, as it does not rely on the import { TemplateResult, html } from "lit";
import { customElement } from "lit/decorators.js";
import MyBaseElement from "./MyBaseElement.ts"
@customElement("test-component")
export default class TestComponent extends MyBaseElement {
render(): TemplateResult {
return html`
<!-- bg-primary color value and the applied text classes will change depending on the currently set theme -->
<div class="w-full h-full text-blue dark:text-red bg-primary">
Test
</div>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"test-component": TestComponent;
}
} |
Beta Was this translation helpful? Give feedback.
-
|
This approach also works for me. But I made a tweak in By doing that, when the current theme is The key to this is in "setTimeout". The 50 ms delay is the shortest delay possible to make the component load the correct mode. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
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:
I would be great if all the theme variables are included using ":root, :host" selector for Shadow DOM compatibility. Example:
You can check why on this article:
https://techblog.skeepers.io/create-a-web-component-from-a-react-component-bbe7c5f85ee6
Thanks!
Beta Was this translation helpful? Give feedback.
All reactions