tailwindcss: [JIT] Tailwind does not update classes after saving in NextJS

I had the same issue, yesterday and today.

And my way to fix it was:

1. Stop dev server
2. Comment out mode: ‘jit’ line in tailwind.config.js
3. Start dev server
4. Stop dev server
5. Uncomment mode: ‘jit’

✨ And it works ✨ Follow me for more “Restart tutorials” 🤣 jk

Creating a .env file and setting TAILWIND_MODE=watch fixed this for me. I’m not sure why this should be required, but I can at least move forward for now…

This seems to be an issue with webpack 5. I reverted to v4 in next.config.js and it works flawlessly so far.

future: {
    webpack5: false,
},

@adamwathan Hi Adam, can you please keep this issue (re)opened? A few of us are still having this issue, including me.

For reference, I’m developing on a Windows 10 machine and using both a .env.development file with

NODE_ENV=development
TAILWIND_MODE=watch

as well as running

$env:NODE_ENV="development"
$env:TAILWIND_MODE="watch"

in PowerShell before I start up the development server with yarn dev. So there should be no way that the development server is not picking up these env vars.

But even with the above configuration, this issue will still intermittently happen at random, requiring me to switch off jit mode, re-run yarn dev, then switch it back on. I believe this is still a valid inconvenience in developer experience that warrants a further investigation.

Thanks for looking into this!

Here’s what I’m using now for Webpack 5 with Next.js on Windows 10: package.json

"dev": "env TAILWIND_MODE=watch NODE_ENV=development next dev",

or env TAILWIND_MODE=watch NODE_ENV=development npx next dev

npm run dev

In a lot of development environments NODE_ENV is not explicitly set for development, and set to production for production building.

I updated but still having issues. I have to reset de dev server a lot. For example know I had to reset it 3 times commenting the jit mode line. It is not adding the classes.

@aswinmohanme I believe the consensus has been that that was required as a workaround to make sure tailwindcss is processing correctly again, but I think we should open a new issue collectively to look into a real fix, because the workaround doesn’t fix the root of the problem.

@adamwathan it is exactly as @simonedelmann says, it is unpredictably, it doesn’t seem to have a trigger.

Thank you!

Just cloned down the reproduction — to get it working I needed to add TAILWIND_MODE=watch to the start script. Internally Tailwind will do this automatically if NODE_ENV=development so I guess for whatever reason with this setup NODE_ENV isn’t set by default.

Going to close as resolved but if anyone else is having issues feel free to open new issues with your own reproduction. Eventually we will make all this TAILWIND_MODE stuff less clunky — unfortunately really no easy way to detect if the user is running a watch process or just doing a one-off build though so I suspect it will always require some kind of configuration if we can’t depend on NODE_ENV.

Had this issue until an npm audit fix fixed it somehow. I’m on ("tailwindcss": "^2.1.2").

Significant changes in the lock file:

     "tailwindcss": {
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.0.tgz",

and

-        "@fullhuman/postcss-purgecss": "^3.1.3",
+        "@fullhuman/postcss-purgecss": "^4.0.3",

Same here! 🤚 (Next 10.2 with Webpack 5) Seems only occur with Webpack 5 for me.

In my case, the problem is temporarily solved by changing the file tailwind.config.js after starting the project.