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 .

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"

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

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.