Can someone help me get JIT mode working with create-react-app?

[averybuehler]

I'm currently learning React and want to use Tailwindcss' JIT mode. I've looked through other discussions and issues, but none of the proposed solutions work for me. I currently have to rebuild the entire project to see my changes reflected, and variants do not seem to be working at all.

I have a create-react-app project with the following structure:
/src/
/src/components/
/src/components/citations/
with components inside each of these directories.

Here are some snippets of my project:

package.json:
"start": "craco start TAILWIND_MODE=watch",
"devDependencies": { "@tailwindcss/jit": "^0.1.18", "autoprefixer": "^9.8.6", "postcss": "^7.0.36", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4" }

/src/index.css:
@tailwind base; @tailwind components; @tailwind utilities; @tailwind variants;

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

I'm pretty sure my purge directories are correct, so I'm not sure why my changes aren't being reflected. Does anyone know what I'm doing wrong? I'm honestly considering porting to Next.js to use Trailwindcss' JIT mode, but since I'm new to the React ecosystem, I'd prefer not to.

Thank you in advance!

[adamwathan]

Try moving the env variable before the script:

TAILWIND_MODE=watch craco start

If that doesn't help, honestly if you can I would highly recommend switching to Vite, it's much more actively maintained, faster, and uses recent versions of all of its dependencies so you don't need to use the postcss7-compat build or the TAILWIND_MODE=watch workaround.

[anthtoonaing]

Have a look here.
https://devdojo.com/savio/set-up-tailwind-jit-in-react-the-fastest-way

[Raff-project10x]

This tutorial doesn't use Craco, does that make a difference?

[anthtoonaing]

Now I am using vite. Quite ok for react + tailwind jit.

[Sunnivanguyen]

How to setup using vite, I'm using vite and every tutorial is about create-react-app

[wongjn]

Consider checking the framework installation guide for Vite.