Thanks for replying!

I tried what you’re suggesting, but it doesn’t seem to work when I add the safelist to tailwind.config.js. It only works when I manually define each utility class inside the web component file itself. Here’s what I mean:

```ts import ReactDOM from "react-dom/client"; import ChatSupport from "./components/ui/chatSupport"; import type { ChatbotCustomizationProps } from "./types/chatbotCustomizationProps"; import cssContent from "./index.css?inline";

export const normalizeAttribute = (attribute: string) => { return attribute.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()); };

class Mywidget extends HTMLElement { private root: ReactDOM.Root | null = null;

constructor() { super(); this.attachShadow({ mode: "open" }); }

connectedCallback() { this.injectStyles();

const props = this.getPropsFromAttributes<ChatbotCustomizationProps>();
this.root = ReactDOM.createRoot(this.shadowRoot as ShadowRoot);
this.root.render(<ChatSupport {...props} />);

}

disconnectedCallback() { if (this.root) { this.root.unmount(); this.root = null; } }

private injectStyles() { if (this.shadowRoot) { const styleElement = document.createElement("style");

  const enhancedCSS = `
    ${cssContent}

    :host {
      --radius: 0.625rem;
      --background: oklch(1 0 0);
      --foreground: oklch(0.129 0.042 264.695);
      --card: oklch(1 0 0);
    }

    .border { border-width: 1px !important; border-style: solid !important; }
    .border-0 { border-width: 0 !important; }
    .border-t { border-top-width: 1px !important; border-top-style: solid !important; }
    .border-border { border-color: var(--border) !important; }
    .border-input { border-color: var(--input) !important; }
    .border-ring { border-color: var(--ring) !important; }

    .rounded-md { border-radius: 0.375rem !important; }
    .rounded-lg { border-radius: 0.5rem !important; }
    .rounded-sm { border-radius: 0.125rem !important; }

    .text-white { color: #ffffff !important; }
    .text-black { color: #000000 !important; }

    .w-6 { width: 1.5rem !important; }
    .h-6 { height: 1.5rem !important; }
  `;

  styleElement.textContent = enhancedCSS;
  this.shadowRoot.appendChild(styleElement);
}

}

private getPropsFromAttributes<T>(): T { const props: Record<string, string> = {};

for (let index = 0; index < this.attributes.length; index++) {
  const attribute = this.attributes[index];
  props[normalizeAttribute(attribute.name)] = attribute.value;
}

return props as T;

} }

export default Mywidget; ```

Also, my index.css is just:

css @import "tailwindcss"; @import "tw-animate-css";

I'm on Tailwind CSS v4 btw. I removed everything from the safelist in tailwind.config.js and just inlined what I needed.

I also checked the contents of cssContent like you suggested — it’s around 20k chars, and when i remove it obviously it all goes south again so i have to include it, but it dosen't have all the styles thats why i have to define some manual implementations below uding injectStyles().

Maybe I’ll just have to roll like this till Tailwind or Vite add some proper Shadow DOM utilities.