[Vite] TailwindCSS 2.2 JIT no longer tracks updated Svelte files

Since 2.2 (tailwindlabs/tailwindcss#4514) the JIT engine switches to using the “tracking” context by default instead of “watching” context, which requires support in Vite. There’s an issue about this filed at tailwindlabs/tailwindcss#4683 but I figure it’s good to track this here as well.

Current workarounds:

• Use TAILWIND_MODE=watch env var, which is ugly and not cross-platform without cross-env, and apparently doesn’t trigger HMR
• Start a separate tailwind process with npm-run-all
• Downgrade tailwind to 2.1

Proper Fix: https://github.com/vitejs/vite/commit/6eaec3ab74d126310d93f8a93f8577bed1c3f474 should in theory fix this, although I can confirm that the CI failing tests on Windows is not a fluke, I can replicate it on my machine.

[maxmellen]

Can confirm I’m running into this issue as well. The TAILWIND_MODE=watch trick is a lifesaver though 👍

[wiesson]

Putting

const mode = process.env.NODE_ENV;
const dev = mode === "development";
process.env.TAILWIND_MODE = dev ? "watch" : "build";

I just want to mention that with vite 2.4+, tw JIT does not properly work without the mentioned code above. (Freshly installed sveltekit example with tailwind)