How to use tailwindcss/jit library with create-react-app?

Question

I followed this installation step to configure tailwindcss in create-react-app. It works, but after adding tailwindcss/jit, app is not working. I think that it happens because create-react-app doesn't support PostCSS 8, but it seems that tailwindcss/jit requires PostCSS 8.

Any idea?

Stuffed

For an update, keep an eye on this issue github.com/facebook/create-react-app/issues/11920 – Stuffed

Answer 1

jit is now included in the v2.1.0 build so you just need to upgrade. Easiest way is to just uninstall the dependencies and reinstall.

It's working in my app...but not all classes are being output so that will be something I need to figure out.

npm uninstall tailwindcss
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat

Lungi

I ran into the classes not being rendered randomly and after some fiddling I believe users of create react app using tailwind JIT need to set "TAILWIND_MODE=watch" tailwindcss.com/docs/… – Dannydannye

Answer 2

at the minute docs here https://tailwindcss.com/docs/guides/create-react-app are for tailwind stable (2.0.3) and requesting you to use postcss 7 as stable release does not support postcss 8.

tailwindcss jit has postcss 8 support, so steps relating to postcss 7 (and craco) are redundant for jit version.

create-react-app supports postcss 8.

Bordeaux

"Create React App doesn't support PostCSS 8 yet so you need to install the Tailwind CSS v2.0 PostCSS 7 compatibility build for now as we've shown above." - Found this on tailwind documentation. – Pinnace

The question is not about if PostCSS 8 is supported or not, but if there is a work-around. – Clockwise