Issue refreshing styles using tailwind

[acanimal]

Hi, I'm developing a chrome extension and have a "strange" issue related with styles in hot reloading.

My extension runs a content script in current tab a "injects" a small window with some options.
I'm using react and tailwind for the code of the window and for some reason only de "default" styles of tailwind works, i.e. bg-blue-600. If I change the style to bg-blue-800 the change takes no effect until a restart the vite server.

This is my vite.config.ts file:

import { crx } from "@crxjs/vite-plugin";
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import manifest from "./manifest.json";

// https://vite.dev/config/
export default defineConfig({
  build: {
    outDir: "build",
  },
  plugins: [react(), tailwindcss(), crx({ manifest })],
});

This is my manifest:

{
  "manifest_version": 3,
  ...
  "permissions": ["activeTab", "identity"],
  ...
  "content_scripts": [
    {
      "js": ["src/content.tsx"],
      "matches": ["<all_urls>"]
    }
  ]
}

This is the context.tsx script:

import React from "react";
import { createRoot } from "react-dom/client";
import Start from "./features/Start";
import css from './style.css?inline';   // <---- hire I import the styles
import { Actions } from "./types";

const CONTAINER_ID = "frame-container";

/**
 * Listen for messages from background script
 */
chrome.runtime.onMessage.addListener((message: { action: string }) => {
  if (message.action === Actions.TOGGLE_EXTENSION) {
    toggleContainer();
  }
});

function toggleContainer() {
  const container = getcontainer();
  if (container.style.display === "block") {
    container.style.display = "none";
    return false;
  } else {
    container.style.display = "block";
    return true;
  }
}

function getcontainer() {
  let container = document.getElementById(CONTAINER_ID);
  if (!container) {
    container = createContainer();
  }
  return container;
}

function createContainer() {
  const container = document.createElement("div");
  container.id = CONTAINER_ID;
  container.style.display = "none";
  container.style.position = "fixed";
  container.style.top = "0px";
  container.style.bottom = "0px";
  container.style.right = "0px";
  container.style.width = "450px";
  container.style.zIndex = "9999";
  container.style.border = "1px solid #ccc";
  container.style.boxShadow = "0px 5px 5px rgba(0, 0, 0, 0.3)";
  container.style.backgroundColor = "white";
  container.style.overflow = "hidden";
  container.style.borderRadius = "10px";
  container.style.margin = "10px";
  container.style.fontSize = "14px";

  const shadow = container.attachShadow({ mode: "closed" });
  const root = createRoot(shadow);
  root.render(
    <React.StrictMode>
      <style type="text/css">{css}</style>
      <MyApp />
    </React.StrictMode>
  );

  document.body.appendChild(container);
  return container;
}

Everything seems to work fine except inside MyApp if I change tailwind class names changes doesnt take effect until I refresh the server.

Any ideas?
Thanks!

[Toumash]

related: #1021