Issues with Tailwind CSS Functionality in Chrome Extension (Manifest V3) Content Script

Question

I'm using Tailwind CSS in a Chrome extension and facing issues within a shadowRoot: CSS loads perfectly, but functionalities like tooltips and dropdowns don't work. Despite trying a workaround by copying Tailwind CSS into a tailwindcss.js file, I can't get these components to function correctly. How can I resolve this?

I'm making a Chrome extension with React, TypeScript, and Tailwind CSS. Everything works fine in the popup part of my extension, where I use this in tailwind.css:

//tailwind.css

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

But when I try to use in the content script and want the styles to apply inside a shadowRoot, it doesn't work.

//tailwind.config.js

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

But, when I try to use Tailwind CSS in the content script for styles inside a shadowRoot, it just doesn't work.

Also, when I include Tailwind CSS in the extension's manifest file, it changes the design of the website where my extension is running, which I don't want.

//manifest.json

{
  // other config
  "content_script": [
  {
    "css": ["js/tailwind.css"],
    "js": ["js/contentScript.js"]
  }
  ],
  "web_accessible_ressources": [
  {"resources": ["js/*"]}
  ]
}

Right now, I'm trying to fix this by copying Tailwind CSS into a file named tailwindcss.js and using it in my project but I need the dropdowns and tooltips to work inside the shadowRoot without affecting the website's original design. Is there something I'm missing about using Tailwind CSS with shadowRoot or a way to keep the parent website's design unchanged?

import { tailwindStyles } from "./tailwindStyles"

let shadowRoot = targetElement.shadowRoot || targetElement.attachShadow({ mode: "open" });

if (!shadowRoot.querySelector(`#sampleExtension`)) {
 const style = document.createElement('style');
 style.id = "writeWizStyles";
 style.textContent = tailwindStyles;
 shadowRoot.appendChild(style);
} 

Thank you for your insights!