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

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.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 23
Comments: 26 (2 by maintainers)

Commits related to this issue

fix: CSS dependencies are tracked incorrectly when base is set The change in https://github.com/vitejs/vite/pull/4267 caused all CSS dependencies of files that are not CSS (Tailwind CSS JIT deps) to ... — committed to ElMassimo/vite by ElMassimo 3 years ago

Most upvoted comments

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.

pingustar on Jul 20, 2021

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 on Jul 16, 2021

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

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: https://github.com/vitejs/vite/commit/89e3160d86bc8c27d6d33b82adec7c44016c3fc3#diff-2cfbd4f4d8c32727cd8e1a561cffbde0b384a3ce0789340440e144f9d64c10f6L194-R204

A potential fix here: https://github.com/vitejs/vite/pull/4592.

ElMassimo on Aug 12, 2021

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

vicurybin on Jul 20, 2021

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

Kostia-K on Aug 1, 2021

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

bradlc on Jul 23, 2021

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

@pingustar try the solution from #4768

kungpaogao on Jul 23, 2021

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

https://github.com/vitejs/vite/issues/4150

There is a PR incoming :

https://github.com/vitejs/vite/pull/4267

paraboul on Jul 18, 2021