tailwindcss: JIT mode doesn't load classes

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

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 5
Comments: 15 (3 by maintainers)

Most upvoted comments

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.

https://user-images.githubusercontent.com/16470866/128415275-20e01bfe-190d-43f3-9d42-8fc088ba03fd.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.

xxSkyy on Aug 5, 2021

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

simonswiss on Aug 3, 2021

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

phoenecke on Aug 3, 2021

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

pedrofsantoscom on Sep 29, 2021

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

phoenecke on Aug 4, 2021

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

hta218 on Aug 3, 2021