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: {},
    },
  }
})

[MohamedKamalOthman]

I’m experiencing a similar issue where Tailwind CSS classes do not update with HMR unless I reload the site. However, if I add a class that has already been used elsewhere in the application, it updates correctly with HMR.

Interestingly, this issue resolves when I disable the Shadow DOM by setting disableShadowDOM: true. However, this workaround defeats the purpose of using the Shadow DOM in my project.

[chiragparekh]

@MohamedKamalOthman I have tried with disableShadowDOM: true but it didn't work for me. My idea was to conditionally toggle value for that attribute like if its in development mode then disable Shadow Dom but unfortunately it didn't work for me.

[EranGrin]

The HMR cannot update the module directly with the shadow DOM; therefore, I would suggest using a workaround solution
add this custom plugin to the plugins array of vite config file

plugins: [
    // ... other plugins ...
    {
      name: 'force-reload',
      handleHotUpdate({ file, server }) {
        // Force full page reload for all .vue file changes
        if (file.endsWith('.vue')) {
          server.ws.send({ type: 'full-reload' })
          return []
        }
      },
    },
  ],

[chiragparekh]

@EranGrin Thanks for now I have used the code that you have provided for full page reload.