1

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. enter image description here

Biet Khong
  • 21
  • 4
  • 2
    Hi, and welcome to SFSE! I realize that you're looking for help, but I think you might be in the wrong place. While we do use VS Code, and we can use React in Salesforce, I'm not sure we're the best resource for you. We're intended to answer questions about Salesforce technology, and your question, as written, doesn't meet that criteria. I'm going to request that this be moved to [so], which is well-suited for your question. You should get an answer pretty quickly there. If you ever do have a Salesforce-specific question, though, we'll be glad to help! – sfdcfox Jul 08 '21 at 03:03
  • Yes, I'm sorry. Thanks a lot for your support. – Biet Khong Jul 08 '21 at 03:07
  • 1
    No need to apologize, it happens a lot more frequently than you'd think. It would just be a disservice to keep you waiting here when you could get your answer elsewhere. – sfdcfox Jul 08 '21 at 03:09
  • @BietKhong, let me show your `tailwind.config.js` – JsWizard Jul 08 '21 at 08:15
  • @JsWizard Yes, of course: `module.exports = { mode: 'jit', purge: [ './public/**/*.html', './src/**/*.{js,jsx,ts,tsx,vue}', ], darkMode: false, // or 'media' or 'class' theme: { extend: { screens: { 'md-992px':'992px', 'lg-1200px':'1200px', }, }, }, variants: { extend: {}, }, plugins: [], }` – Biet Khong Jul 08 '21 at 09:08
  • @JsWizard you can check everything follow github: https://github.com/La-Quang-Vu/tourist-web/tree/master – Biet Khong Jul 08 '21 at 09:10

1 Answers1

0

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 ^^

JsWizard
  • 1,663
  • 3
  • 21
  • 48
  • My code could work correctly. But when I made a modify with css, ex `className="md:w-[90px]"`, VScode compiler doesn't compile css after I saved my change. I had to make a small change in `tailwind.config.js`, ex: add a space " " at the end any line, then saved it. – Biet Khong Jul 09 '21 at 03:46
  • So my problem is with compiler, not entirely with css. I want my css can compiled after saving. – Biet Khong Jul 09 '21 at 03:57