reactjs - Page hot-update by Vite when send axios request and using @tailwindcssvite plugin - Stack Overflow

I have a project that uses Axios for data fetching. However, I noticed something strange:

• When I fetch data by clicking a button and my vite.config.js file contains tailwind() (@tailwindcss/vite plugin) in plugins, the browser refreshes automatically.

• When I remove the tailwind() (@tailwindcss/vite plugin) statements plugins, the fetch request works as expected without refreshing the page.

I've already tried using event.preventDefault(), but it didn't solve the issue.

Why does this happen, and how can I prevent the browser from refreshing while keeping Tailwind imported?

Any insights would be greatly appreciated!

I have a project that uses Axios for data fetching. However, I noticed something strange:

• When I fetch data by clicking a button and my vite.config.js file contains tailwind() (@tailwindcss/vite plugin) in plugins, the browser refreshes automatically.

• When I remove the tailwind() (@tailwindcss/vite plugin) statements plugins, the fetch request works as expected without refreshing the page.

I've already tried using event.preventDefault(), but it didn't solve the issue.

Why does this happen, and how can I prevent the browser from refreshing while keeping Tailwind imported?

Any insights would be greatly appreciated!

• reactjs
• axios
• tailwind-css
• vite
• tailwind-css-4

Share Follow edited Mar 4 at 9:32 rozsazoltan 11.4k66 gold badges2121 silver badges6060 bronze badges asked Mar 4 at 8:58 DananimeDananime 2111 silver badge22 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Starting from TailwindCSS v4, we can use automatic source detection by default. Actually, this is currently causing the whole issue, as it reviews as many files as possible, unfortunately including the JSON files.

• Which files are scanned - TailwindCSS v4 Docs

Although it's not clearly stated in the question, I assume that the request is triggering some file modification. This could cause TailwindCSS to recompile the CSS, which in turn triggers a page refresh via Vite's Hot Update.

• tailwindlabs/tailwindcss #16764: When I modify a source file, Vite always Hot Update

To modify this behavior, we need to disable the watching of certain files/folders by adding a minimal Vite plugin:

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)]
      }
    }
  }
}

• Plugin source: wcshds's comment from #16764

Use plugin, like this:

import { defineConfig } from 'vite'
import preventTailwindReload from './path/to/preventTailwindReload.js'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    preventTailwindReload([
      './first/excluded/folder/path',
      './second',
      // etc.
    ]),
    tailwindcss(),
  ],
})

Alternative: Disable Automatic Source Detection

Starting from TailwindCSS v4, we can use automatic source detection by default. This reviews all sources and updates the compiled CSS when changes are made. It only excludes the paths listed in .gitignore. Currently, there is no way to exclude other sources that are not listed in .gitignore.

• Automatic Source Detection - StackOverflow
• Which files are scanned - TailwindCSS v4 Docs
• @source directive - TailwindCSS v4 Docs

However, it is possible to disable automatic source detection and instead define all required paths using @source directives (which can exclude files updated by Axios requests). This way, there is no need to exclude hot-updates for files updated by Axios requests.

• Setting your base path: @import "tailwindcss" source("../src"); - TailwindCSS v4 Docs
• Disable automatic detection: @import "tailwindcss" source(none); - TailwindCSS v4 Docs

Therefore, by following the sources, you can completely disable the default source using none, or set the default source to the folder where you store only the files necessary for the frontend (those that use TailwindCSS classes).

The path provided to the directive is relative and should be specified from the location of the CSS file.

You can append additional paths to this using the @source directive, like this:

./src/css/style.css

@import "tailwindcss" source(none);

@source "./../js"; /* js and views folders just my example */
@source "./../views";

And if the file modified by the Axios request is, for example, stored in ./src/json, then it won't be included in the TailwindCSS source, so its changes won't be monitored.

Unfortunately, a directive opposite to @source is not currently available, although I have made a suggestion in #16764 to introduce a directive for excluding a file path:

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.