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 .

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 .

• javascript
• reactjs
• tailwind-css
• craco

• 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. – Ako Commented Aug 6, 2021 at 9:36
• Umm I wasn't able to figure it out yet,sorry ! – Ameya Jangam Commented Aug 6, 2021 at 12:17

3 Answers 3

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"

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

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.