JIT mode doesn't load classes

[xxSkyy]

What version of Tailwind CSS are you using?

2.2.7

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

vite 2.4.4

What version of Node.js are you using?

14.17.3

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction repository

https://codesandbox.io/s/hello-vite-forked-l4tu2

Describe your issue

In JIT mode new classes styles dont update when it's new attributes in classes, using postcss @apply bg-red-500 style works without problems. It persist no matter html pug preprocessor.

If you change class and reload page there are no styling. When you'll restart process it'll load up classes.

I tested it on vite with vue, and vite with vue and ruby on rails

[adamwathan]

Hey! Can you provide an actual reproduction repo? CodeSandbox has its own quirks so it's not the best place to reproduce these types of issues.

I copied your project to a local Vite project and everything is working as expected:

Screen.Recording.2021-08-02.at.8.24.12.AM.mov

[hta218]

I have the same problem after upgrading to v2.2.7, some classes are just not loaded (after editing)

Eg:

// 'yarn start' - this work fine
<div class="mx-10"></div>

// Edit the markup 'mx-10' => 'mx-20'
<div class="mx-20"></div>

// 'mx-20' css not loaded
// I have to 'yarn start' again

// Now mx-20 work
// Edit the markup again 'mx-20' => 'mx-24'
<div class="mx-24"></div>

// 'mx-24' css not loaded
// I have to 'yarn start' again

Really frustrated! Please help to fix @adamwathan

[simonswiss]

@hta218 may I suggest you have a read through the troubleshooting section of the docs, particularly this section:

https://tailwindcss.com/docs/just-in-time-mode#styles-don-t-update-when-saving-content-files

If you're confident the problem comes from the JIT engine itself, please open an issue with a code repro.

Also, please don't get frustrated with a feature that is still in preview mode 🙏

[hta218]

Hey @simonswiss

Thank you so much, TAILWIND_MODE=watch works for me 😍. I'll go for it now until the above issue resolve.

Anw, I just love the framework, :D

[phoenecke]

I had this issue after upgrading from 2.1.4 to 2.2.7.

Here is a repo: https://github.com/phoenecke/tailwind-jit-test

Downgrading to 2.1.4 fixed it for me.

macOS - node v14.15.3

[KojoEnch]

After fighting a while with that issue, I simply updated both tailwind and postcss to latest (now "postcss": "^8.3.6" / "tailwindcss": "^2.2.6") and so far it's working as expected. Updating tailwind alone is not enough.

Amazing feature, thanks for the great job !

[phoenecke]

So, it seems like the problem might be that create-react-app is stuck on postcss~7.

[xxSkyy]

Hey! Can you provide an actual reproduction repo? CodeSandbox has its own quirks so it's not the best place to reproduce these types of issues.

I copied your project to a local Vite project and everything is working as expected:
Screen.Recording.2021-08-02.at.8.24.12.AM.mov

But on codesandbox it works in same way as on my machine, it does update classes but doesn't styles.

Screen.Recording.2021-08-05.at.22.08.50.mov

Seems like TAILWIND_MODE=watch fixes the thing on codesandbox but can't confirm in develeopment as this project uses vite_ruby that has problem getting any variable/property from command.

[dannote]

I confirm this issue on the same configuration (Ruby on Rails + Vite + Vue.js on macOS). I tried upgrading Tailwind CSS and PostCSS to the most recent versions as @KojoEnch did a couple of weeks ago, too, and it helped for a while, but then the issue reappeared. Today I tried to upgrade Tailwind CSS and PostCSS once again, but that didn’t help.

[DAVIDCIOCOIUSIMVENTURE]

I am still facing this issue. To be clear I use react in a rails app with the help of the webpack gem. Have you found a fix for this? :)

[dannote]

To be clear, it worked from the start but stopped working at some point for an unknown reason.

[xxSkyy]

To be clear, it worked from the start but stopped working at some point for an unknown reason.

It's working unless you won't use class that doesn't exist in project already (aren't loaded). Like it loads on init and then stop updating list of used classes.
Also TAILWIND_MODE=watch aren't that good and it's much more suitable just to use normal mode right now.

[rajdeep-ghosh]

@phoenecke I was finnaly able to overcome the problem because of your help. Thank you so much!!

[pedrofsantoscom]

It's working unless you won't use class that doesn't exist in project already (aren't loaded). Like it loads on init and then stop updating list of used classes.

This is the issue i was having from at least 2.2.7 - 2.2.15

I had this issue after upgrading from 2.1.4 to 2.2.7.

Here is a repo: https://github.com/phoenecke/tailwind-jit-test

Downgrading to 2.1.4 fixed it for me.

macOS - node v14.15.3

Downgrading to 2.1.4 also fixed for me. Thank you @phoenecke

Windows 10, node v15.8.0

[igorcd]

I having the same problem
Downgrading to 2.1.4 aso worked for me

[RobinMalfait]

The main reason why downgrading to 2.1.4 works is because we don't have JIT mode in that version yet, so there you will use the old (slow) AOT mode (even if you defined a mode in your tailwind.config.js file, because in that version it is ignored).

The repro provided by @phoenecke uses an old react-scripts version where the TAILWIND_MODE=watch environment variable is required. This is because react-scripts currently ships with PostCSS 7 instead of PostCSS 8.

The good news is that there is an alpha version for react-scripts currently at ^5.0.0-next.47. The bad news is that this version is currently not compatible with @craco/craco.

If you are using Create React App, then here are a few solutions you can use:

• Don't use @craco/craco, but use our CLI in a separate process: https://tailwindcss.com/docs/installation#using-tailwind-cli
• Keep using @craco/craco and the PostCSS 7 compat mode that you currently use. In this case you will need TAILWIND_MODE=watch as an environment variable. NOTE: We will not have a PostCSS 7 compat version in Tailwind v3.
• Downgrade to 2.1.4, this is the version before we introduced JIT mode. This is slower and lacks features, but if it works for you project than this is a valid option as well.
• You can also try to switch to a more modern / up-to-date tool like Vite or Next.js

[metaturso]

This is still a problem with Tailwind 3 running with Vite on Windows. Classes aren't picked up by the JIT compiler and they only show up after a full build.

Setting $Env:TAILWIND_MODE = "watch" is not a solution.

Has anybody got suggestions on how to work around this problem? I wouldn't mind investigating for a root cause and making a proper bug report, if you can tell me where to start.