DEV Community

Cover image for How to set up tailwindcss with create-react-app + jit feature

How to set up tailwindcss with create-react-app + jit feature

Ako on June 27, 2021

If you used create react app + tailwindcss before, probably you noticed that website is slow to load in development mode or when you want to use in...
Collapse
 
jengaa profile image
ameyajangam22 • • Edited

What do I have to do differently with craco ? I have enabled mode:"jit" in tailwind.config.js . How should I write the build script for that? Here is my current build script . What should I add?

dev-to-uploads.s3.amazonaws.com/up...

Collapse
 
akov profile image
Ako • • Edited

hm! it seems to work fine for me, I just created a repository and using craco instead of react-scripts, you can try and see if it works for you.
github.com/ako-v/cra-tailwindcss-j...
after building, serve the build folder using npm run servebuild and open http://localhost:3000 in your browser.

Collapse
 
pak11273 profile image
Isaac Pak •

I get error:

Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
github.com/postcss/postcss/wiki/Po...

Collapse
 
akov profile image
Ako •

probably you have not appended @latest at the end of packages. reinstall them with this exact command:
npm install -D tailwindcss@latest postcss@latest postcss-cli@latest autoprefixer@latest

Collapse
 
pak11273 profile image
Isaac Pak •

I copy/pasted everything. It would be nice if you had an example repo where we could just clone/install and ensure that it works.

Thread Thread
 
akov profile image
Ako •

Oh! Sorry, I didn't think it would be necessary. here it is:
github.com/ako-v/cra-tailwind-jit
I will also add it into the post itself.

Thread Thread
 
pak11273 profile image
Isaac Pak • • Edited

Thanks for adding the repo! It's working now but I for me I had to install postcss@latest and I also had to add start": "react-scripts start back into package.json file. Kudos!

Collapse
 
akov profile image
Ako •

I also realized the postcss package is not necessary at all, the postcss-cli is enough.

Collapse
 
mohammadhassani profile image
mohammad hassani •

and if you use craco in package.json is better

Collapse
 
akov profile image
Ako •

If you want to override some configurations, yes, you have to use craco.

Collapse
 
cannon303 profile image
cannon303 •

I followed exactly but I dont get a blue screen, just an unstyled "JIT mode is cool" Lorem... page and none of the tailwind styles work. Any ideas?

Collapse
 
akov profile image
Ako • • Edited

install postcss-cli using npm i -D postcss-cli@latest, then run your app using npm run dev.
Sorry I forgot to include postcss-cli in installation part.

Collapse
 
hectorlopezv profile image
hector vinicio lopez •

it works!! thanksss live saverr

Thread Thread
 
akov profile image
Ako •

Your welcome 😃

Collapse
 
mizanmahi profile image
Mizan Mahi • • Edited

Getting this error while running npm start

npm start

cra-tailwindcss-jit-craco@0.1.0 start
TAILWIND_MODE=watch craco start

'TAILWIND_MODE' is not recognized as an internal or external command,
operable program or batch file.

Collapse
 
akov profile image
Ako •

sorry for late response, I think you are on windows. just install cross-env and change the start script in package.json to this:
"start": "cross-env TAILWIND_MODE=watch craco start"