tailwind is not working with slots & shadow true

[praveens96]

I am trying to use tailwind css with my react components and want to convert them to web components for my library.

The issue is, when i want the children in react to work, i need to set the shadow: "open" while generating web component. But, if i set that, tailwind styles are not working.

If i remove shadow: "open" , tailwind styles do work but slots i.e. children are not being shown.

can you help here?

[tema3210]

the shadow tree get's its own CSS scope, so you just don't have your styles there, so if you want your css you cannot use shadow DOM, can you?

[shyqerigashi]

@praveens96 I had the same issue but what you can do is create a wrapper component for your react component and there you can inject the tailwindcss file. I know that this means you have multiple tailwindcss imports but browser nowadays they load this only once the same CSS file (you can verify it under inspect > network).

export function WebComponentWrapper(Component: React.FC<any>) {
  return (props: any) => {
    return (
      <>
        <link
          rel="stylesheet"
          href="/path/to/your/index.css"
        />
        <Component {...props}>
          <slot />
        </Component>
      </>
    );
  };
}