DEV Community

Cover image for Set Up Tailwind In React - The fastest way! 🚀

Set Up Tailwind In React - The fastest way! 🚀

Savio Martin on April 21, 2021

Hello Folks 👋 This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps wit...
Collapse
 
myrlandnu profile image
Jørn André Myrland

Well written post 👏 This is a "no-hassle" way of setting up tailwind with CRA 👍

However, I feel I have to point out one major drawback to this approach; the output css includes ALL the styles of tailwind 😢 Ideally, you would like postcss to purge all unused utility-classes, so you end up with a really slim CSS file.

A way around this is to setup CRA with craco, but this comes with a bit more hassle 😐

I would love to see a JIT implementation working with CRA, but as far as I understand, this will not be possible until CRA internally updates the PostCSS dependency 🤔

Collapse
 
akov profile image
Ako

what if we upgrade postcss manually?

Collapse
 
myrlandnu profile image
Jørn André Myrland

I don't think it is possible, due to a constraint in CRA (even with craco). If this however has changed, please let me know!

Thread Thread
 
akov profile image
Ako

yeah, CRA does not let us to do that, but after some hours I found (created) a way to use jit feature alongside react.and it feels so good using it.

Thread Thread
 
cindyeme profile image
Emerenini Cynthia Ngozi

Hello.

How did you achieve that?

Thread Thread
 
akov profile image
Ako

Actually I wrote a blog post about it. Here it is:
dev.to/akov/how-to-set-up-tailwind...

Thread Thread
 
cindyeme profile image
Emerenini Cynthia Ngozi

Thanks Ako. Let me check it out.

Collapse
 
ngmisl profile image
ngmisl

doesn't work with current settings... might need an update

warn - The purge/content options have changed in Tailwind CSS v3.0.
warn - Update your configuration file to eliminate this warning.
warn - tailwindcss.com/docs/upgrade-guide...

warn - The content option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - tailwindcss.com/docs/content-confi...
/bin/sh: 1: react-scripts: not found

Collapse
 
imervinc profile image
👺Mervyn

You should have included JIT, since it is where TailwindCSS is heading anyways. And the new features are freaking awesome!

Collapse
 
saviomartin profile image
Savio Martin

Yeah, Setting up tailwind jit is coming on the next blog!

Collapse
 
chaygo profile image
Aygozel Chariyeva

I have got error like this:
warn - The content option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - tailwindcss.com/docs/content-confi...

and my doesnt work :(

Collapse
 
divyaxavier profile image
divyaxavier

This is really amazing! It is working! Thanks, it is a life saver!

Collapse
 
tarekhassan410 profile image
Tarek Hassan

Worked, thank you :)