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

[mwarger]

What version of Tailwind CSS are you using?

2.1

What build tool (or framework if it abstracts the build tool) are you using?

"next": "10.1.3", 

What version of Node.js are you using?

v14.15.1

What browser are you using?

chrome

What operating system are you using?

macOS for M1

Reproduction repository

https://github.com/mwarger/next-tailwind-jit-repro

Describe your issue

I've also put reproduction instructions in the repro repo.

It seems that changes made while in jit mode are not being picked up. As it stands now, with jit mode enabled, only initial styles are applied, and kept. Any changes or additions result in loss of styles. Please advise. Thanks!

[kanidjar]

See #4073

Same issue.

[mwarger]

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...

[DoctorDerek]

I can confirm having this bug in NextJS intermittently with no way to tell if it's going to occur or not. (Apparently unrelated to #4073).

It does occur (without any visible error) if I include a Tailwind plugin that is missing or PostCSS configuration file that is invalid. But it also occurs for no apparent reason, and with no obvious output that's different.

JIT not working -- no JIT message, webpack warning:

JIT working -- JIT message, no webpack warning:

These are the same project with npm run dev (next start).

Windows 10 x64, tailwindcss 2.1.1, next 10.1.3 using webpack 5 option
(I updated tailwind to 2.1.2@latest yesterday to monitor the issue further, it could have been fixed)
(I'm also going to update to next 10.2 today)

The error will come & go while working in Next.js -- seems to be working fine, then suddenly JIT fails without any visible output. Restarting the next dev server will generally produce the right styles one time but is no guarantee JIT will start working.

---

Here's the list of everything I tried, but nothing seemed to make a difference:

• Remove all Tailwind plugins from tailwind.config.js
• Add variants: ["responsive"] to tailwind.config.js
• Turn it off & turn it back on (this one works! lol)
• Create .env file with TAILWIND_MODE=watch per @mwarger
• Swap npm run dev from next dev to env TAILWIND_MODE=watch NODE_ENV=development next dev

I think @danon is on the right track with there being some type of a race condition (see #4073). Nice job with that research! 👍

Environment: node v15.14.0 windows x64 chrome latest stable

[PainteR]

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

[DoctorDerek]

Interesting, thanks for the tip! For me, it also works normally with webpack 4, i.e. turning off the webpack 5 option in next.config.js

…

On Sun, May 2, 2021, 10:38 AM Ivan Reshetnikov ***@***.***> wrote: In my case, the problem is temporarily solved by changing the file tailwind.config.js after starting the project. [image: tailwind-trigger] <https://user-images.githubusercontent.com/17311456/116818714-67724f00-ab75-11eb-8e63-595c3c2845a3.png> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#4081 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFZ3D2VONYMFNNGQXJOFYTTLVWXXANCNFSM427P472A> .

[uncvrd]

Dropping in to also comment how JIT will intermittently stop working when using NextJS. Just started a new project today, Tailwind with JIT was working flawlessly, then all of a sudden my new css classes weren't being applied. Restarting the dev server and restarting VSCode did not fix the problem either

EDIT: I can also confirm that changing text in tailwind.config.js also temporarily fixes the problem

[simonedelmann]

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

[sct]

Same problem here (Next 10.1.3 and Next 10.2). The problem occurs with both Webpack 4 and 5 for me and none of the above suggestions like the watch mode environment variables have helped.

[Akryum]

Had to do this to make JIT work:

TAILWIND_MODE=watch webpack serve

[Akryum]

Maybe watch mode should be enabled if NODE_ENV !== 'production'? It's common to not specify NODE_ENV=development

[DoctorDerek]

Reverting to webpack 4 improves but doesn't fix the reliability issue for me. I haven't tried the edit config file when it stops working suggestion. Guillaume, could you elaborate? You're using webpack serve instead of next dev?

[Akryum]

I was having the same issue of JIT not updating the CSS classes with barebone webpack 5.

[BButner]

I've also had this happen to me seemingly randomly in my Nextjs project (Webpack5 and I believe Webpack 4 as well). Saving changes just won't update CSS. For instance, I applied w-32 and h-32, and started changing those values and was real confused why it wasn't working. I disabled JIT, everything started working, then re-enabled JIT and it was fine.

[eddsaura]

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

[adamwathan]

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.

[Akryum]

Maybe it would be a NODE_ENV !== 'production' so that it works if NODE_ENV isn't set?

[Akryum]

And then it can print out a warning message like

Tailwind JIT is in watch mode because NODE_ENV environment variable isn't set.

[Akryum]

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

[DoctorDerek]

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

[eddsaura]

I still have this problem once or twice a day.

But my config is mega simple, I have nothing changed, it is out-of-the-box with nextjs.

But yeah, from time to time I just have to comment the line mode: 'jit' and reset dev server. It is strange.

[DoctorDerek]

@eddsaura Same here. Putting on the development mode flags didn't seem to make much difference. But typically changing tailwind.config.js will work. And it is a pretty rare thing still.

[kvnxiao]

@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.

[adamwathan]

Hey! If it's an issue for you still the best thing to do is open a new issue with your own reproduction and we can figure it out there. We generally aren't notified of activity on closed issues.

[adamwathan]

@Akryum Great suggestion on the console stuff, I've added a message that shows any time we're running in a watch mode with a link to the docs explaining it 👍🏻

[simonedelmann]

Same issue still occasionally occurs here. (Latest versions of Next+Tailwind, no special configuration)

To fix it I didn't even had to restart the development server. Changing a single character (e.g. in a comment) in tailwind.config.js makes jit work again.

The problem is that I cannot reproduce the issue on purpose. It just unpredictably happens sometimes...

[eddsaura]

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

Thank you!

[simonedelmann]

I've played with different tailwind projects now, just to see if the issue occurs.

I took two projects, a big one and a fresh next.js instance, populated with a few components from TailwindUI. Then I tried different combinations of restarting dev server, restarting the browser, clearing browser cache, deleting .next folder and other random things, just to see if I can reproduce that issue.

It happened twice in the big project and never in the small one that jit entirely stopped working. Jit just didn't change the generated css anymore then. (Jit didn't add any new classes and also jit didn't remove unused classes.)

What is interesting: When jit gets stuck, restarting next dev (and with that restarting jit) does not fix that. But forcing jit to restart via changing tailwind.config.js does fix it. (I wonder what happens if we delete .next folder when jit is stuck.)

After changing tailwind.config.js I did exactly the same steps I did before (as far as I can tell) and it didn't happen again. I've also unsuccessfully tried if loading localhost:3000 and changing files while next dev is not ready yet to see if the timing matters.

[aswinmohanme]

I manage to fix it with the following steps

• While the dev server is running delete the mode: "jit" line and save
• After webpack has finished compiling, readd the mode: "jit" line and it works again

[kvnxiao]

@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.

[eddsaura]

@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.

yes, lets do it, I am not too experienced to open a good issue, also because idk how to explain the error, I didn't get the reason yet.

[krsilas]

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,
},

[amithm7]

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",

[kvnxiao]

@amithm7 Guess that means it was fixed in tailwindcss 2.2.0+, since your semantic versioning is set to ^2.1.2. An advice for everyone to upgrade to 2.2.X.

[eddsaura]

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.

[lowvisiondave]

I am still experiencing this issue on the latest "tailwindcss": "^2.2.2"

[adamwathan]

Please open a new issue with a new reproduction, there's no easy way for us to keep track of closed issues.