content_script index.tsx not applying Tailwind CSS

[fpicoitoj]

Hey there

First of all, thank you for this template. I've searched and tried many over the coarse of about 3 days and this one was quite honestly the best one. It is missing an example with commands, which honestly can be quite hard to grasp, but other than that it's brilliant.

Would have created this in discussions but I cannot find that option.

I'm trying to make a content script display UI with TailwindCSS but no luck, maybe I'm missing the concept here.

I've created a shadow-dom to isolate tailwind to our own little world.

import { createRoot } from "react-dom/client";
import "./style.css";
import Container from "./components/Container";
const div = document.createElement("div");
div.id = "__root";

document.body.appendChild(div);

const rootContainer = document.querySelector("#__root");
if (!rootContainer) throw new Error("Can't find Options root element");

// Create a Shadow DOM for the rootContainer
const shadowRootContainer = rootContainer.attachShadow({ mode: "open" });

const root = createRoot(shadowRootContainer);
root.render(<Container></Container>);

try {
  console.log("content script loaded");
} catch (e) {
  console.error(e);
}

Container is just a component with tailwind classes.

The end-result is HTML with classes that have no CSS associated with them.

Let me know what other information I can provide.

[fpicoitoj]

An update, as I managed to do this, but I have a feeling this is not correct, so I guess I'll be waiting for any news, if possible :)

I've just resorted to injecting the CSS file within the shadow dom.

import { createRoot } from "react-dom/client";
import styles from "./style.css?inline";
import Container from "./components/Container";
const div = document.createElement("div");
div.id = "__root";

document.body.appendChild(div);

const rootContainer = document.querySelector("#__root");
if (!rootContainer) throw new Error("Can't find Options root element");

// Create a Shadow DOM for the rootContainer
const shadowRootContainer = rootContainer.attachShadow({ mode: "open" });

// create the style element to attach the styles from tailwind
const styleElement = document.createElement("style");
styleElement.innerHTML = styles;

// append it to the shadow dom
shadowRootContainer.appendChild(styleElement);

const root = createRoot(shadowRootContainer);
root.render(<Container></Container>);

try {
  console.log("content script loaded");
} catch (e) {
  console.error(e);
}

[dr-dargon]

hi, @fpicoitoj I tried the same as you, but I think it's caused by this plugin(vite-plugin-css-injected-by-js), it will directly inject css into the head under document instead of the style under shadow dom,maybe wo can do sth. to change it. :)

[dr-dargon]

this is my solution

# utils/plugins/build-content-script.ts
...
plugins: [ cssInjectedByJsPlugin({
            // styleId: `foo-${Math.random() * 100}`,
            injectCode: (cssCode, options) => {
              return `try{
                if(typeof document != 'undefined'){
                  const shadowDOM = document.createElement('div');
                  shadowDOM.id = '__root';
                  const shadow = shadowDOM.attachShadow({mode: "open"});
                  const shadow_style = document.createElement("style");
                  shadow_style.appendChild(document.createTextNode(${cssCode}));      
                  shadow.appendChild(shadow_style);
                  document.body.appendChild(shadowDOM);
                }
              }catch(e){
                console.error('vite-plugin-css-injected-by-js', e);
              }`
            }
          }) ],
...

# pages/content/index.tsx
import { createRoot } from 'react-dom/client';
import './style.css' 

const rootContainer = document.querySelector('#__root')?.shadowRoot;
if (!rootContainer) throw new Error("Can't find Options root element");
const root = createRoot(rootContainer);
root.render(
  <div className='w-[150px] h-[50px] fixed bottom-[150px] left-0 text-lg text-black bg-amber-400 z-50'  >
    content script loaded
  </div>
);
...

[donething]

Thank you both, this is a temporary solution 😁😁