[JIT] unused CSS not eliminated in watch mode

[mainej]

What version of Tailwind CSS are you using?

2.1.1

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

postcss-cli 8.3.1

What version of Node.js are you using?

v14.7.0

What browser are you using?

Firefox

What operating system are you using?

macOS

Reproduction repository

https://github.com/mainej/tailwind-jit-dead-code

Describe your issue

In JIT watch mode, when the last instance of a class is removed from the source files, I would expect that the class would be removed from the compiled CSS. However, there must be some caching that keeps it around. See the README.md in the attached repository for steps to reproduce.

In most cases it isn't a problem to have extra style definitions in the compiled CSS, but it runs counter to the advertised property that with the JIT, your development CSS is exactly the same as your production CSS.

[adamwathan]

Hey! This is currently by design, see previous discussion here:

tailwindlabs/tailwindcss-jit#57

It's considerably faster and allows rebuilds in watch mode to be 5-10ms instead of several hundred ms. May change this eventually but right now it is deliberate — the types of dev vs production differences you would see from this are not real problems IMO, unlike the bg-${color}-500 type of bugs you can run into using regular Tailwind + purge.

[mainej]

Cool, thanks for the explanation and for keeping rebuilds fast. It's good to know that I can touch tailwind.config.js if I really want to bust the cache.

[adamwathan]

Yeah you can also just hit save in your main CSS file too 👍🏻

[harvanchik]

I thought this was a bug until I found this bug report. I didn't see this in the documentation of JIT. Maybe make this known on the JIT Page? I'm glad I found this answer though.