Vite: Changes are not adopted during development.

[deleonio]

The initial build ist okay, but after that all code changes are not adopted.

FYI: With webpack everythink is fine.

[adamwathan]

Can you provide a repository that reproduces? Things seem to work as expected when I set up a Vite project locally.

[adamwathan]

Here's an example of a Vite project that seems to work as expected for me:

https://github.com/adamwathan/tailwind-jit-vite-example

[deleonio]

Hi, yes here a repo:

https://github.com/leanupjs/tailwindcss-jit

You can compare the behavior like this:

npm start # vite
npm run webpack:start # webpack

[deleonio]

Here's an example of a Vite project that seems to work as expected for me:

https://github.com/adamwathan/tailwind-jit-vite-example

It works with vue.

[adamwathan]

Any chance you can provide a minimal reproduction? Going to take a lot for me to figure out what's actually happening here. Could be the imported Vite config, Sass, Preact, some weird build config somewhere, not sure.

Spent 10 minutes on it now but just feels like I'm throwing effort in random places — a minimal reproduction from an empty Vite project would help a lot.

[adamwathan]

Alright I have it reproduced in a vanilla Vite app with Preact and Typescript. Will try and figure out what's happening.

I had a typo in my purge config, works as expected in a vanilla Vite app with Preact and Typescript:

https://github.com/adamwathan/jit-vite-preact

@deleonio are you able to reproduce by making some minimal set of changes to my working demo above?

[deleonio]

Hello @adamwathan,

I have forked your repo and break it: adamwathan/jit-vite-preact#1

[adamwathan]

Was able to solve this, the problem is when you use a custom PostCSS config through your vite.config.js file, for some reason Vite does not provide PostCSS with the default NODE_ENV variable, so NODE_ENV is undefined and it needs to be development (or you have to set TAILWIND_MODE=watch).

As long as you explicitly set one of those two environment variables on the command line in your development script everything works 👍🏻

[deleonio]

Thank you @adamwathan

[ShookLyngs]

Was able to solve this, the problem is when you use a custom PostCSS config through your vite.config.js file, for some reason Vite does not provide PostCSS with the default NODE_ENV variable, so NODE_ENV is undefined and it needs to be development (or you have to set TAILWIND_MODE=watch).

Hi, how do I set TAILWIND_MODE=watch in Vite2?

[ShookLyngs]

Was able to solve this, the problem is when you use a custom PostCSS config through your vite.config.js file, for some reason Vite does not provide PostCSS with the default NODE_ENV variable, so NODE_ENV is undefined and it needs to be development (or you have to set TAILWIND_MODE=watch).

For context, I had changed tailwind.config.js and postcss.config.js to ESModule, so I can use export default and import from syntax to deal with things.
For that reason I have to import postcss.config.js to vite.config.js, to replace the default css.postcss in vite config.