[Bug]: TailwindCSS HMR not work with rspack.CssExtractRspackPlugin.loader

[childrentime]

System Info

System:
OS: macOS 14.1
CPU: (8) arm64 Apple M3
Memory: 97.64 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
Yarn: 1.22.21 - ~/.nvm/versions/node/v18.12.1/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
pnpm: 8.15.5 - ~/.nvm/versions/node/v18.12.1/bin/pnpm
Watchman: 2024.04.15.00 - /opt/homebrew/bin/watchman
Browsers:
Chrome: 124.0.6367.92
Edge: 124.0.2478.67
Safari: 17.1
npmPackages:
@rspack/cli: 0.6.3 => 0.6.3
@rspack/core: 0.6.3 => 0.6.3
@rspack/plugin-react-refresh: 0.6.3 => 0.6.3

Details

I am trying to use the extract loader instead of raw CSS to use Tailwind because I have a related migration that requires this loader. I have created a minimal reproduction, and there are no issues at startup. However, when you try to add a text-red-600 to the className, Hot Module Replacement (HMR) does not take effect. You have to use ctrl+c to restart the rspack dev server for it to take effect.

Reproduce link

https://github.com/childrentime/rspack-tailwindcss

Reproduce Steps

npm i
npm run dev

add text-red-600 in src/App.tsx

[chenjiahan]

@JSerFeng can you share some progress for this issue~