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

[GrygrFlzr]

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:
vitejs/vite@6eaec3a 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 👍

[techniq]

@GrygrFlzr Windows fix might have just been checked in - vitejs/vite@41b193c

[babichjacob]

Putting

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

in svelte.config.js (or svelte.config.cjs for people using non-SvelteKit Vite) fixes it.

Use TAILWIND_MODE=watch env var, which is ugly and not cross-platform without cross-env, and apparently doesn't trigger HMR

Is that a Windows or WSL thing? I have always had working HMR (or at least what I think is HMR) with Tailwind JIT.

[babichjacob]

Also note that due to svelte-add/tailwindcss#58, this project currently isn't able to produce a JIT Tailwind setup because svelte-add doesn't have an argument parser to detect that --jit is even being passed (and implementing this is harder than it sounds which is why it hasn't happened yet). An empty JIT config can be found here: https://github.com/svelte-add/tailwindcss/blob/76a390563f3b9d34938178b44c2b1a3c4f2d3eeb/__run.js#L38-L50

[babichjacob]

Alternatively, sveltejs/kit#1715

[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)

[babichjacob]

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)

svelte-add still includes this code for that reason

[wiesson]

Ah ok, I somehow assumed that vite 2.4 should fix it 🙈