Visual Studio code - compile on save with Tailwind JIT CSS

Question

I'm building a website with Reactjs app, using Tailwind JIT CSS, and using Visual Studio code editor. I meet a problem with "compiling on save" with VScode. When I make a change for CSS in a file, ex: className="ml-6" in App.js file, and then saving that file. Then VScode will auto compile and run, but nothing change when I check the browser for effect. I think VScode only recompile for the modified files. So the Tailwind JIT CSS isn't compiled. (Notice that Tailwind JIT must be recompiled for updating CSS.) I can fix the issue by made an any change in tailwind.config.js file and saved it. Then VScode will recompile the Tailwind jit CSS, and the web in browser is updated for css. But this will slow down coding and debug. Could you please help me to recompile on save for CSS without make a change in tailwind.config.js file? Thanks a lot.

Answer 1

I would recommend that you use JIT mode after you are fully familiar with TailwindCSS usage. Unless you have a specific reason to use JIT mode, then just delete it as general usage.

JIT mode generates your styles on-demand as you author your templates instead of generating everything in advance at initial build time.

So if you work with wrong or missed custom settings in tailwind.config.js, then it will not make as you intended.

Nevertheless, want to use JIT, then carefully check this Doc.

I didn't found any other reason why your code didn't working. I hope your success! :)

ps.. please delete your ./src/assets/css/src folder and files ^^