Tailwind class not applied

[ayub-kokabi]

Why tailwind classes don't work here, what should I do?

import "@/assets/tailwind.css";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";

export default defineContentScript({
  matches: ["<all_urls>"],
  cssInjectionMode: "ui",

  async main(ctx) {
    const ui = await createShadowRootUi(ctx, {
      name: "app-ui",
      position: "inline",
      append: "first",
      onMount(container) {
        const app = document.createElement("div");
        container.append(app);
        const root = ReactDOM.createRoot(app);
        root.render(<App />);
        return root;
      },
      onRemove: (root) => {
        root?.unmount();
      },
    }); 

   ui?.mount()
    
    ////////////////////////// HERE ///////////////////////////////
    document.querySelector(".vector-page-toolbar")
    ?.classList
    .add("bg-red-400"); // tailwind class doen't work here
   ///////////////////////////////////////////////////////////////
  },
});

[aklinker1]

What's your tailwind.config.js look like?

[ayub-kokabi]

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["assets/**", "entrypoints/**", "components/**"],
  theme: {
    extend: {},
  },
  plugins: [],
};

assets/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

[aklinker1]

Oh, I see. When using cssInjectionMode: "ui", your telling WXT all your styles should only be applied to the UI inside the shadow root.

I assume .vector-page-toolbar is outside the shadow root, so your style isn't working.

[ayub-kokabi]

Yes.
it is outside shadow root. I changed cssInjectionMode to manifest and it works now.
thank you.

[aklinker1]

If you're using tailwind, be careful, you're going to be applying all your classes and base styles to all websites the content script is injected into. This can and will break the appearance of most websites

[ayub-kokabi]

So what's the best practice to highlight a few words across pages related to specific domains without breaking other styles? I just need to highlight certain words specifically and show a popup with some data about that word when the user clicks on them.

[aklinker1]

If the styles are simple, I'd do something like this:

function highlightElement(element: HTMLElement) {
  element.style.background = 'red';
}

Or if you want to use CSS, you could create a separate CSS entrypoint and add it to the manifest for that content script.

[curiosbasant]

I've a added a tailwind prefix, to work around that. 👍🏼