SCSS changes in imported file (in another SCSS file) aren't applied on hot reload (Vite)

[Novivy]

What version of Tailwind CSS are you using?

4.1.8

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

"vite": "^6.3.5",
"vite-plugin-html": "^3.2.2"
"@tailwindcss/postcss": "^4.1.8",
"@vitejs/plugin-react": "^4.5.1",
"autoprefixer": "^10.4.21",
"postcss": "^8.5.4",
"sass": "^1.89.2",
"tailwindcss": "^4.1.8",

"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-router-dom": "^7.6.1"

What version of Node.js are you using?

Node: 22.16.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-ut6hyy9r?file=src%2Fstyle.scss

Describe your issue

If you change the background color in src/global.scss and save, Vite will hot reload the page but won't apply the css change. Only running npm run dev again will apply the css change.

Commenting out @use 'tailwindcss'; in src/style.scss fix the issue.

I initially opened the issue on the Vite repo ( vitejs/vite#20198 ) but since removing tailwind seems to fix the issue, I figured I would continue here

[wongjn]

As per the documentation:

Tailwind CSS v4.0 is a full-featured CSS build tool designed for a specific workflow, and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus.

Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus.

If you must use Sass in your project, consider separating it out into a different CSS entry point, separate from Tailwind: https://stackblitz.com/edit/vitejs-vite-ghos6rtz