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
 
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"

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 😃