Component Lacks Tailwind Styling When Injected Dynamically

[ntdgo]

Describe the bug

I am dynamically injecting a container component using the injectTailwind function. What I expect is that the dynamically created component displays with the Tailwind CSS styles (such as h-[300px], bg-slate-50, dark:bg-slate-900, etc.). What is actually happening is that the container renders without any Tailwind styling.

Reproduction

https://github.com/ntdgo/wxt-react-shadcn-tailwindcss-chrome-extension/blob/f13d3b5140a787d01c77240133e47b3ac0ce3c40/entrypoints/content/App.tsx#L56

Steps to reproduce

1. Run npm install followed by npm run dev to start the application in development mode.
2. Ensure that the DOM includes an element with the class .name so that injectTailwind can properly target its parent.
3. Observe that the dynamically injected container is added to the DOM.
4. Notice that the expected Tailwind styles are not applied to the container.

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 Intel(R) Core(TM) i5-14400F
    Memory: 15.31 GB / 31.83 GB
  Binaries:
    Node: 22.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.4.0 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (133.0.3065.59)
  npmPackages:
    wxt: ^0.17.0 => 0.17.12

Used Package Manager

npm

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[aklinker1]

You are using a shadow root UI for your main UI. So the styles are isolated to that UI only. When you add a new UI outside the shadow root, your original styles aren't applied.

So you need to call createShadowRootUi again instead of just appending your second UI to the DOM.

[ntdgo]

It worked for me tho My updated repo https://github.com/adeyemialameen04/wxt-contents-ui-issue

@adeyemialameen04,
Your work looks like query the element and set that element to container, I think we got the different issue.
My issue is that I injected the UI element to website element, that UI doesn't got style from tailwind.

For example: I want to add a Button with tailwindcss before WXT text. The injection is okay, but the Button doesn't got tailwindcss

https://github.com/ntdgo/wxt-react-shadcn-tailwindcss-chrome-extension/blob/f13d3b5140a787d01c77240133e47b3ac0ce3c40/entrypoints/content/App.tsx#L33

[iatomic1]

It worked for me tho My updated repo https://github.com/adeyemialameen04/wxt-contents-ui-issue

@adeyemialameen04,
Your work looks like query the element and set that element to container, I think we got the different issue.
My issue is that I injected the UI element to website element, that UI doesn't got style from tailwind.

For example: I want to add a Button with tailwindcss before WXT text. The injection is okay, but the Button doesn't got tailwindcss

https://github.com/ntdgo/wxt-react-shadcn-tailwindcss-chrome-extension/blob/f13d3b5140a787d01c77240133e47b3ac0ce3c40/entrypoints/content/App.tsx#L33

Ohh I understand you now
I'm also have that issue rn 😂, it's not a blocker for me atm so I would skip it for now, when you are able to fix it, kindly update me
@aklinker1 pls help on this as well

[aklinker1]

So it seems like both of you are facing a similar issue: you want to render something outside the shadow root as apart of your react app.

In that case, you could try writing a custom portal component that uses createShadowRootUi internally, kinda like what @ntdgo is trying to accomplish. I'm not a react expert, so I'm not 100% sure what that would look like.

I'll try and create an example later today.

[iatomic1]

I've been able to fix it by just injecting the style element with the tailwind classes as a string

// lib/utils.ts
export function injectStyles(css: string): void {
  const style = document.createElement("style");
  style.textContent = css;
  document.head.appendChild(style);
}

//component.tsx
import { createPortal } from "react-dom";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import tailwindStyles from "~/assets/main.css?inline";
import { injectStyles } from "@/lib/utils";


export default function X() {
  const [leaderboardTargetEl, setLeaderboardTargetEl] =
    useState<HTMLElement | null>(null);

  useEffect(() => {
    injectStyles(tailwindStyles);
    const observer = new MutationObserver(() => {
      const target = document.querySelector(
        'a[aria-label="Post"][data-testid="SideNav_NewTweet_Button"][href="/compose/post"]',
      )?.parentElement;
      if (target) {
        setLeaderboardTargetEl(target);
        observer.disconnect();
      }
    });

    observer.observe(document.body, { childList: true, subtree: true });

    return () => {
      observer.disconnect();
    };
  }, []);

  return (
    <>
      {leaderboardTargetEl &&
        createPortal(<Button>Open Leaderboard</Button>, leaderboardTargetEl)}
    </>
  );
}

[ntdgo]

@aklinker1 you save my life, thank you!!