Vite watcher has issues with .scss files with @use

[mar0yan]

Describe the bug

I have an index.scss files that imports other .scss files with @use.
When i run vite with HMR and it's watcher, a change inside an imported .scss file is detected, but the css is not being correctly injected.
When i edit the index.scss directly, the change is injected instantly.
When i edit an imported.scss file and then save the index.scss (without changing it), the css is injected correctly aswell.
When i just run vite build, the css is built correctly.

Reproduction

https://github.com/mar0yan/vite-build-scss-issue-demo

Steps to reproduce

Clone repo

yarn install
yarn dev

• Edit the css inside "src/sass/components/_simple-test.scss" and save.
  • vite will detect the change but will not build the css.
• Edit the css inside "src/sass/index.scss" directly
  • vite correctly rebuilds and injects the css.
• Change the "src/sass/components/_simple-test.scss" and then save the index.scss once (without changing it)
  • vite correctly injects the css

System Info

System:
    OS: macOS 15.1
    CPU: (8) arm64 Apple M3
    Memory: 911.83 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
  Browsers:
    Chrome: 133.0.6943.142
    Safari: 18.1
  npmPackages:
    vite: ^6.1.0 => 6.2.0

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[yedhink]

@mar0yan Unfortunately, Tailwind V4 preprocessors don't play well with Sass/SCSS: https://tailwindcss.com/docs/compatibility#sass-less-and-stylus

There are compatibility issues, which probably got fixed in insider(latest) version. Please refer: tailwindlabs/tailwindcss#16636 (comment)

You can comment out the import of tailwindcss in your scss file and see HMR do its magic.

Also, as far as I understand, you don't have to include tailwind as part of vite plugins in the vite config if you are using Tailwind Postcss: https://tailwindcss.com/docs/installation/using-postcss

Please try using tailwind@insiders and see if that fixes the issue.