JIT mode is not picking up changes unless I change tailwind.config.js file

[MohammadxAli]

What version of Tailwind CSS are you using?

v2.2.4

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

postcss-cli v8.3.1

What version of Node.js are you using?

v14.15.5

What browser are you using?

Firefox

What operating system are you using?

Windows

Reproduction repository

https://github.com/MohammadxAli/tailwind-test-repo

Describe your issue

Sometimes tailwind in jit mode is not adding classes to final CSS when I'm adding them to my HTML files unless I edit the tailwind.config.js file, I usually comment and uncomment some line in that file and all of sudden I see the class has been added to the CSS file, I had this very same issue on my Next.js project as well.

I made a new reproduction repository and tested things there, it was all good and working. Not really sure why it's not working on my own projects at some point. This may sound stupid but maybe tailwind is not picking up changes as the project get's more complicated?
I made this issue to know if anyone had some similar experience or not, so maybe someone can guide me on how to resolve this.

[moracabanas]

Not to bloat this thread but I have just the same Issue with the exact same specs. Hot reloading is working but on JIT mode changes on tailwind styling fails on document save until you modify and save tailwind.config.js (on every change)

[moracabanas]

I tried to downgrade to 2.2.0 and 2.1.4 but behaviour is the same.

[DevNvll]

Same. Happening in my nextjs and vite projects. Tried to downgrade already but no luck. Its happening in a brand new vite project and a 1 year old nextjs project.

[DevNvll]

It works for like 10 minutes and then stops generating classes.

[NickSdot]

It works for like 10 minutes and then stops generating classes.

Not 100% the same issue here, but similar so I think it's worth to add. HMR stops working and the page is fully reloaded on every change (might be related: #4970 and #4968). If I disable JIT and run npm run dev (vite) it is working. Then, when I activate JIT and run npm run dev again, it is working and stops again after a while. Already tried the TAILWIND_MODE=watch without success.

Setup as following. Everything on the very latest versions.

Tailwind:
v2.2.4

Build tool:
Vite v2.42 with Post Css 8.3.5

Node:
v16.5.0

Browser:
Chrome v91

Operating System:
macOS v11.4

Backend
Laravel v8.50 on PHP 8

[paraboul]

FWIW, there is a vite issue with how postcss registers all purgeable files as dependencies with dir-dependency :

vitejs/vite#4150

There is a PR incoming :

vitejs/vite#4267

[vesper8]

In my case HMR does not work at all when I make modifications to JIT classes unless I stop the yarn serve process entirely and start it up again. Not using vite

[moracabanas]

In my case HMR does not work at all when I make modifications to JIT classes unless I stop the yarn serve process entirely and start it up again. Not using vite

Can I ask you if you can reproduce this situation?

1. You serve your application make a change and save it on any class in JIT mode:
   -This brokes something in the render for example change bg-red-500 to bg-red-800 and color goes out.

2. You come back to bg-red-500, save it and it returns back. But no "new changes" are applying on JIT mode

[epitaphmike]

I am running into the same issue. I created a test repo from the NextJS with-tailwindcss example and it works fine, I see both red and green colors. As soon as I run it in my larger project HMR doesn't pick up changes. It sees the first group of colors hello-green in the extended theme, but not the second. The weird part is, if I delete hello-green and change hello-red to hello-green, I get all the text in red.

My larger project is typescript and NextJS.,

NextJS - v11
Tailwind - v2.2.4

module.exports = { mode: 'jit', purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], darkMode: false, // or 'media' or 'class' theme: { extend: { colors: { "hello-green": { 900: '#262E1F' }, "hello-red": { 900: '#351911' } } }, }, variants: {}, plugins: [], }

[vicurybin]

I downgrade vite to 2.3.8,tailwind to 2.1.4,it works

[pingustar]

same issue here on v2.2.4 with create-react-app -> using CRACO

Dev server needs to be stopped and started up again after every change.

[kungpaogao]

same issue here on v2.2.4 with create-react-app -> using CRACO

@pingustar try the solution from #4768

[bradlc]

@MohammadxAli I think I was able to reproduce this, but the classes do get picked up if I re-save the HTML file. Can you confirm whether this is the case for you?

[MohammadxAli]

@bradlc Yes that's true! I didn't realize that saving the same HTML files can also trigger picking up classes. But it's important to note that the contents of the file must be changed when re-saving, otherwise the classes won't be added.

I am now using tailwindcss with jit mode in a Laravel based project which I'm changing .blade.php files, the issue still exists. If classes are not added I need to change the contents of the same file which I used the new class in it or tailwind.config.js file.

[jvrsolis]

Just to add an example from Tailwind UI, if you go to https://tailwindui.com/components/marketing/sections/heroes change the "Hero Section" title to "text-red-400" instead of text-grey-400 and the color goes blank (if you change the css class on the webpage not the code). Change it to another color and it also goes blank. Not sure if thats the intended affect.

Locally i can change the code and once i refresh the page itll change the color. But if i dont refresh the page, the css will change on the html automatically but the color wont show it, which kind of breaks local development with HMR.

[Kostia-K]

I'm facing the same issue using Vite.

When creating an example to reproduce the issue, I noticed that it only happens when I set the base path in Vite. I need this option to integrate with Django.

I created a repo that demonstrates my observation https://github.com/Kostia-K/vite-tailwind-jit-issue

[type1fool]

Hey all. I too was stumped by this issue while working on a Phoenix project last night. After finding this issue, I dug around a bit, and I have a workaround for Webpack pipelines.

As it turns out, Phoenix 1.5.9 uses webpack@4, which is incompatible with the latest versions of postcss-loader.

You need webpack v5 to use the latest version. For Webpack v4, you have to install postcss-loader v4.

https://webpack.js.org/loaders/postcss-loader/

Installing postcss-loader@4.3.0 resolved the issue in my project, and once again I can gleefully write Tailwind utils and see the changes in the browser quickly thanks to the JIT.

[phifa]

having the same issue, on nextjs 11.

[type1fool]

Installing postcss-loader@4.3.0 resolved the issue in my project, and once again I can gleefully write Tailwind utils and see the changes in the browser quickly thanks to the JIT.

Update: This only worked temporarily and I'm stumped.

[ElMassimo]

As @Kostia-K mentioned, problems in Vite.js seem to be related to the usage of the base configuration option.

Related: ElMassimo/vite_ruby#115

Downgrading vite to 2.4.2 as mentioned before seems to fix the problem.

It seems like the problem started happening in vite@2.4.3, after this change: vitejs/vite@89e3160#diff-2cfbd4f4d8c32727cd8e1a561cffbde0b384a3ce0789340440e144f9d64c10f6L194-R204

A potential fix here: vitejs/vite#4592.

[sebastiaanluca]

Same here, but slightly different scenario: with JIT mode and hot reload enabled, using a class that's not been used yet, it'll add the class to the div but Tailwind won't generate the CSS for the class. If I refresh the page, the CSS class has been added to the styles and it works. Just not when using hot reload.

Tried a few variations like adding the Node env variables or changing the Tailwind config file, but nothing fixes it.

Firefox Developer Edition
@tailwindcss/forms@0.3.3
@tailwindcss/typography@0.3.1
@vue/compiler-sfc@3.2.6
autoprefixer@10.3.3
browser-sync@2.27.5
browser-sync-webpack-plugin@2.3.0
laravel-mix@6.0.28
postcss@8.3.6
postcss-import@14.0.2
tailwindcss@2.2.8
vue@3.2.6
vue-loader@16.5.0

[masterkain]

I have the same problem as @sebastiaanluca but maybe it's vite + pug vitejs/vite#4588

[adamwathan]

@MohammadxAli I was able to reproduce in your repo but it seemed to stem from build configuration issues. I've opened a PR to your repo that fixes it by just fixing the configuration problems:

MohammadxAli/tailwind-laravel-mix-starter#1

Going to close this one only because everyone here I think has slightly different issues, and the issue for the OP is resolved with that PR. It's hard to keep track of multiple problems/conversations in a single issue, so instead I would ask that you please open a new issue if you are experiencing a problem that brought you to this issue and include a minimal reproduction so we can figure out what the specific issue is for your particular situation. Happy to help, not closing to be dismissive, just need to keep things on topic and organized if we want any hope of actually helping people, thanks!

[sebastiaanluca]

For those of you using Laravel Mix and HMR (mix watch hot), please try the example from the repository in the issue below and let me know if it works or not. I was able to reproduce the bug in one situation, but maybe it's just my quirky system.

Issue: #5477
Repository: https://github.com/sebastiaanluca/tailwind-hmr-bug

[yuwanlin]

I downgrade vite to 2.3.8,tailwind to 2.1.4,it works

I use webpack v5, downgrade tailwind from 3.2.7 to 2.1.4, it works.

[bcastillo-2022474]

I know this is an old thread, but Im having troubles with this too, with Astro, the styles at some point are no longer applied, I need to comment a line of my tailwind.config.mjs and then uncomment it to make tailwindcss catch the change and apply the changes. really annoying, idk if this has something to do with vite, tailwindcss, or the fact that im using SSR. is there a fix??