Hot reload not working properly for Tailwind on WSL2 - tailwind-css

Question

o/
Just started a new personal project with Remix & TailwindCSS. Everything works fine with raw Remix install, but the css hot reload is broken when I add Tailwind. The first class added is applied, but not the next ones.
I think it must be related to WSL2 (Windows Subsystem for Linux), because it works fine on my linux laptop.
My config is exactly the one describe on Remix documentation.
Env
WSL2 with Ubuntu 20.04
node: v16.13.2 (also tried with v17.4.0)
npm: v8.4.0
app/root.tsx
...
import tailwindStylesUrl from "./tailwind.css";
export const links: LinksFunction = () => {
return [
{
rel: "stylesheet",
href: tailwindStylesUrl,
},
];
};
...
tailwind.config.js
module.exports = {
content: ["./app/**/*.{ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
package.json
...
"scripts": {
"build": "npm run build:css && remix build",
"build:css": "tailwindcss -o ./app/tailwind.css",
"dev": "concurrently \"npm run dev:css\" \"remix dev\"",
"dev:css": "tailwindcss -o ./app/tailwind.css --watch",
"postinstall": "remix setup node",
"start": "remix-serve build"
},
"dependencies": {
"#remix-run/react": "^1.1.3",
"#remix-run/serve": "^1.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"remix": "^1.1.3"
},
"devDependencies": {
"#remix-run/dev": "^1.1.3",
"#types/react": "^17.0.24",
"#types/react-dom": "^17.0.9",
"concurrently": "^7.0.0",
"tailwindcss": "^3.0.17",
"typescript": "^4.1.2"
},
...
console
$ npm run dev
> dev
> concurrently "npm run dev:css" "remix dev"
[0]
[0] > dev:css
[0] > tailwindcss -o ./app/tailwind.css --watch
[0]
[1] (node:16121) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
[1] (Use `node --trace-warnings ...` to show where the warning was created)
[1] (node:16121) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
[1] Watching Remix app in development mode...
[1] 💿 Built in 258ms
[1] Remix App Server started at http://xxx.xx.xxx.xx:3000
[0]
[0] Rebuilding...
[0] Done in 117ms.
[1] 💿 File changed: app/tailwind.css
[1] 💿 Rebuilding...
[1] 💿 Rebuilt in 48ms
[0]
[0] Rebuilding...
[0] Done in 14ms.
[1] 💿 File changed: app/root.tsx
[1] 💿 Rebuilding...
[1] 💿 Rebuilt in 51ms
Thanks for your help 🙏

Answer 1

For those that come across this, a likely reason (although, according to the comments, it wasn't for this particular user) for hot reload functionality not working in WSL2 is that the project is stored on a Windows drive, rather than in the WSL2 ext4 filesystem.
Currently, inotify, the Linux API used by hot reload, is not supported in WSL2 on 9P filesystem drives (e.g. Windows drives mounted into WSL2).
There are usually at least three solutions:
Move the project files into the ext4 filesystem in WSL2, for instance, /etc/home/<username>/src or /etc/home/<username>/projects. inotify is supported on this filesystem.
Use WSL1 -- Most web development does not require the native Linux kernel features of WSL2 and works just as well (sometimes better) under WSL1. You can switch from WSL2 to WSL1 by running wsl --set-version <distroname> 1, although I recommend a backup (via wsl --export) first, just in case there are issues with the conversion.
As the OP was doing in this case, access the project through VSCode and the "Remote - WSL" extension. Since it started working again for the OP once they corrected a problem with the "WSL - Remote" extension, I'm still suspecting that inotify may have been the root cause.

Answer 2

U can try it add it to tailwind.config:
{
safelist: process.env !== 'production' ? [
{
pattern: /.*?/,
},
] : [],
}

Answer 3

Not ideal, but I found a way out.
If I use tailwind as a postcss plugin, the files are correctly hot reloaded. 🤷‍♀️
Edit: I think I found out what the problem was. I didn't notice that my VSCode wasn't running the WSL remote anymore. Since I reactivated it, everything works fine.