When I modify a source file, Vite always reloads the page instead of using HMR.

[wcshds]

https://github.com/user-attachments/assets/f8a42db9-7fbc-4e4f-b31f-80e368f5adfb

What version of Tailwind CSS are you using?

v4.0.8

What build tool (or framework if it abstracts the build tool) are you using?

Vite 6.1.1

What version of Node.js are you using?

v22.14.0

What browser are you using?

Chrome and Firefox

What operating system are you using?

WSL

Reproduction URL

https://github.com/wcshds/nuxt-tailwind-source-reload-everytime

Describe your issue

I tried to use tailwind v4 in my Nuxt project. I use @source to explicitly register source path, but when I modify a source file, Vite always reloads the page instead of only using HMR.

[philipp-spiess]

Hey! I think we need to file this as an upstream bug report for Nuxt.js. I am able to reproduce this as soon as you add a transform hook to a CSS file that adds a watch directory. So this currently reproduces the same issue:

function debug() {
  return {
    name: "debug",
    transform(content: string, id: string) {
      if (id.endsWith("main.css")) {
        this.addWatchFile(
          "/Users/philipp/dev/nuxt-tailwind-source-reload-everytime/articles/test.txt"
        );
        return { content: `/* ${Math.random()} */\n${content}` };
      }
    },
  };
}

I'm going to clean this up an make an upstream bug report!

[philipp-spiess]

Actually can reproduce this in a plain Vite setup, so this appears to be a Vite thing.

[philipp-spiess]

Filed https://github.com/vitejs/vite/issues/19511

[philipp-spiess]

So, apparently this is expected behavior for now: https://github.com/vitejs/vite/issues/9512#issuecomment-1208133617

We'll do some digging on our side (the Vite extension) to see if we can work around this somehow but I can't make any guarantees :/

[wcshds]

We'll do some digging on our side (the Vite extension) to see if we can work around this somehow but I can't make any guarantees :/

@philipp-spiess Thank you. I found that for my simple use case, adding an extra simple Vite plugin is sufficient.

import type { Plugin } from 'vite'
import path from "node:path"

export default function preventTailwindReload(
  directories: string[]
): Plugin {
  return {
    name: 'vite-prevent-tailwind-reload',
    handleHotUpdate({ file, modules }) {
      const currentDir = process.cwd();
      const relativeDir = path.dirname(path.relative(currentDir, file));

      if (directories.includes(relativeDir)) {
        return [...modules[0]?.importers ?? [], ...modules.slice(1)]
      }
    }
  }
}

Of course, it would be even better if the official Tailwind Vite plugin could completely resolve this issue.

[rozsazoltan]

Yes. Currently, only the contents of .gitignore are not taken into account in v4. However, I would love to see a solution similar to the @source directive for excluding certain sources.

• Inspired by: Page hot-update by Vite when send axios request and using @tailwindcss/vite plugin

[thecrypticace]

Looks like this issue got fixed in Vite 7.1