Hot reload not working properly for Tailwind on WSL2

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 🙏

Impiety

Is your project located under /mnt/c (or any other Windows drive by any chance? – Untinged

No, all my project files are directly in wsl. – Impiety

@Untinged I'm having this issue, and VS Code is connected to WSL. My project is also in /mnt/c/Users/MyUsername/project – Coati

@Coati In that case, you are probably seeing the same root cause as this answer. VSCode may not trigger it for Tailwind; I'm just not sure. At least options #2 (move the project) or #4 (use WSL1) in that answer should work. – Untinged

@Untinged That was it! Perhaps you should add this as an answer for the next guy – Coati

@Coati Fair enough - I didn't originally since it didn't seem to match this particular question, but it does make sense to have it here for discoverability. – Untinged

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.

Untinged

Wow after a long search, this was the only reasonable explanation as to why hot reload doesnt work on WSL. Thank you for your simple solution! – Mercurialize

Tried converting WSL2 to WSL1 and it surprisingly worked for me! – Profundity

Thank you so much for this answer! I somehow didn't pin my issues with Hot Reload on WSL 2, possibly because it worked in WSL 1 and I never connected the timelines for my issues and upgrading to WSL 2.... – Foliole

Answer 2

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.

Impiety

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Durnan

Answer 3

U can try it add it to tailwind.config:

{
safelist: process.env !== 'production' ? [
   {
     pattern: /.*?/,
   },
 ] : [],
}

Presidentship

Thanks for your answer. It seems that the problem was caused by my VSCode setup (WSL remote wasn't enabled). – Impiety