Tailwind CSS styles are not updating with HMR

[chiragparekh]

Hi I am using this library with shadow root and HMR is working but tailwind styles are not updating.

This is the main.js file

import { defineCustomElement as VueDefineCustomElement, h, createApp, getCurrentInstance } from "vue"
import { createWebComponent } from "vue-web-component-wrapper"
import styles from "./assets/styles/index.scss?inline"
import App from "./App.vue"

createWebComponent({
  rootComponent: App,
  elementName: "element",
  plugins: {
    install(GivenVue) {
      const Vue = GivenVue
    },
  },
  cssFrameworkStyles: styles,
  VueDefineCustomElement,
  h,
  createApp,
  getCurrentInstance,
  disableStyleRemoval: false,
})

This is the index.scss file

@import "./tailwind.css";
@import "./custom.scss";

This is the vite config file

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { viteVueCE } from "unplugin-vue-ce"
import { PluginOption } from "vite"
import { resolve } from "path"
import tailwindcss from "tailwindcss"

export default defineConfig(({ mode }) => {
  const plugins = [
    vue({
      customElement: true,
    }),
    viteVueCE({
      isESCSS: true,
    }) as PluginOption,
  ]

  return {
    plugins,
    css: {
      postcss: {
        plugins: [tailwindcss()],
      },
    },
    resolve: {
      alias: [
        {
          find: "@",
          replacement: resolve(__dirname, "./src"),
        },
      ],
    },
    define: {
      global: {},
    },
  }
})