How to enable JIT(Just in time mode) with create react app?

Question

I tried setting up the JIT in create-react-app by myself but it doesn't seem to be working as in the styles are not getting updated. I am using craco to build the app with tailwind css and also added TAILWIND mode=WATCH as they suggested to make it work with most builds . Here are my configs:

tailwind.config.js

module.exports = {
mode: "jit",
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
darkMode: false, // or 'media' or 'class'
theme: {
    extend: {
        colors: {
            primary: "#ffa500",
            secondary: {
                100: "#E2E2D5",
                200: "#888883",
            },
        },
    },
},
variants: {
    extend: {
        opacity: ["disabled"],
    },
},
plugins: [],};

package.json scripts

    "scripts": {
    "start": " craco start",
    "build": "TAILWIND_MODE=watch craco build",
    "test": "craco test",
    "server": "nodemon ./server/server.js",
    "eject": "react-scripts eject"
},

package.json devDependencies

"devDependencies": {
    "autoprefixer": "^9.8.6",
    "postcss": "^7.0.36",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4"
},

I'll be glad if I could get any way to fix this .

Chatterer

it's good to mark the answer that was the solution as the answer or if you solved your problem in another way, write it down here and mark it as the answer, for others that had the same problem to know it. – Erlandson

Umm I wasn't able to figure it out yet,sorry ! – Chatterer

Answer 1

If you are on Windows (as I suspect you might be from your comment on @Ako's answer), then your setup is correct but you just need to install cross-env, then adjust your start script like so:

"start": "cross-env TAILWIND_MODE=watch craco start"

Jamille

I am using env-cmd instead of cross-env. How can I get it working with env-cmd? – Commorant

Answer 2

you must use TAILWIND_MODE=watch in your start script not build, and after you have developed what you want build it just with craco build script. so your package.json scripts must look like this:

  "scripts": {
    "start": "TAILWIND_MODE=watch craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
  },

also in purge prop inside the tailwind.config.css file you must add './src/components/*.{js,jsx}' so purge should look like this:

purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html', './src/components/*.{js,jsx}'],

and after you built your app you must serve the index.html file inside build folder.

clone this repo and after building the project use npm run servebuild and see if it works. https://github.com/ako-v/cra-tailwindcss-jit-craco

Erlandson

I changed the tailwind config and updated the react scripts but now I am getting 'TAILWIND_MODE' is not recognized as an internal or external command, – Chatterer

I don't know what is your project structure or other configurations, there maybe other problems that I can not find with just this information you provided, use the git repo that I provided and see if you have still the problem. – Erlandson

It didn't work for me until I added export, e.g. "start": "export TAILWIND_MODE=watch craco start". – Vandalize

Answer 3

So you have to watch your JSX, JS, HTML files using the ```--watch``` option provided in tailwindcss CLI,
So what you can do is open up a new terminal in the root of the react project and follow the command below

npx tailwindcss -o ./src/App.css --watch

• [-i] you can provide a input file also using this option.
  
• [-o] modify the output as per your folder structure.

This will make sure to rebuild the CSS file, Next step is to open up another terminal and do npm start and your development server is ready with JIT compiler.

(side note)
Also, I use tailwind with my default configuration of the package.json and it also works smoothly without craco (both JIT / default) and in production.

Smearcase

So should I remove craco and try this? – Chatterer

Not mandatorily, but if they work fine, then you can leave them. – Smearcase

Like when I do npm start it automatically does craco build so I did TAILWIND_MODE=watch flag so it automatically enables the flag variable but the style dont seem to get updated :( – Chatterer

then I suggest you remove the craco, and just go with JIT, Also with Tailwind v3 it is faster also. – Smearcase