Vite HMR Error After Updating to TailwindCSS v4 with using @tailwindcss/vite

[Hetari]

I recently updated TailwindCSS to v4, and now when I save files during development or when I refresh the page by pressing f5 I get this error:

The only way to fix it is to stop the dev server (npm run dev), restart it, and then the site works again.

Has anyone else encountered this issue? What could be causing it, and how can I fix it permanently?

Setup Details:

• Vue 3.3.5.13
• Vite 6.2.2
• TailwindCSS 4.0.14

Repo link:
https://github.com/Hetari/portfolio

[Hetari]

👀

[skwid138]

I'm not sure if this will be helpful as my setup and error are different, but I was seeing an issue seemingly caused by tailwindcss v4 and HMR. So I hope it is helpful in some capacity.

Environment

• tailwindcss: 4.0.0-beta.2
• @tailwindcss/vite: 4.0.0-beta.2
• vite: 5.4.11
• @vitejs/plugin-react: 4.3.3
• vite-plugin-svgr: 4.3.0
• vite-tsconfig-paths: 5.1.3
• react: 18.3.1
• typescript: 5.7.2
• Node.js: 23.10.0
• Running in a docker container

Issue

HMR cache invalidation bug with dynamic Tailwind classes using template literals (e.g., bg-[${backgroundColor}]). The @tailwindcss/vite plugin caches malformed CSS and doesn't properly invalidate it during HMR, causing persistent errors even after removing the problematic code.

Solution

Adding the following to my Vite server configuration resolved the issue:

export default defineConfig({
  server: {
    watch: {
      usePolling: true,
      interval: 1000,
      ignored: ['!**/src/**/*.{js,ts,jsx,tsx}'],
    },
  },
  optimizeDeps: {
    exclude: ['@tailwindcss/vite'],
    force: true,
  },
})