DEV Community

Cover image for Setup create-react-app with Tailwind CSS

Setup create-react-app with Tailwind CSS

Nards Paragas on April 07, 2019

Recently, I've been having fun with writing front-end code using utility-first CSS frameworks instead of full-blown toolkit ones like Bootstrap and...
Collapse
 
bbixler profile image
Brenden Bixler

As of tailwind 1.0, you'll need to make a minor change in tailwind.css:

@tailwind preflight; -> @tailwind base;

Collapse
 
nards_paragas profile image
Nards Paragas

Updated the post according to the changes you suggested Brenden, thanks a lot!

Collapse
 
ptmdmusique profile image
ptmdmusique

Hi Nards, thank you very much for the great post!
I tried to follow the instruction above and it works perfectly fine with the className stuff. However, I couldn't figure out how to make directives such as @apply to work with both CSS and SASS files (I got unknown property when I inspect the elements with Chrome Inspector).
Have you ever made those directives work before?

Collapse
 
nards_paragas profile image
Nards Paragas • Edited

Thanks for the feedback!

I haven't tried using directives to extent yet but I'm assuming this one's related to PostCSS. Sorry I have no solid answer now but I'll try to look and get back into this once I'm free.

Collapse
 
ptmdmusique profile image
ptmdmusique • Edited

Hi Nards,

Thanks for the quick reply! Apparently, I had to override webpack config (not really recommended) using react-app-rewired and customize-cra with some PostCSS config.
The very short tutorial I use is : medium.com/@harryhedger/quick-how-...

If possible, please test this and (maybe?) note this for users who use create-react-app with Tailwind directives so that they don't have to look everywhere like me anymore! Thanks :D

Thread Thread
 
nards_paragas profile image
Nards Paragas

Thanks for this! Will pin this one on the post itself later. Sorry for the late response!

Collapse
 
jmberon profile image
Jhoan Beron • Edited

Hi Nards, thanks for writing this post. Just a minor thing I noticed the class .bg-blue does nothing, you may want to do something like

Hello World! instead. I had everything in order but I coulnt see the blue background applied lol. Thanks again.
Collapse
 
nards_paragas profile image
Nards Paragas

Hey Jhoan! Thanks for the catch, it seems like they updated the background color class names. I've applied a change on the previous class name to keep the post updated. πŸ˜„

Collapse
 
kylegalbraith profile image
Kyle Galbraith

Awesome blog post Nards! This is exactly what I was looking for and you got me unblocked with this, thank you.

Collapse
 
nards_paragas profile image
Nards Paragas

I'm glad that I was able to help you Kyle! I'll make sure to do more config/setup posts like this in the future. πŸ˜„

Collapse
 
argonauta profile image
Riccardo Tartaglia

Looking for a React UI Kit powered by Tailwind? πŸŒͺ️πŸ”₯πŸ‘¨β€πŸ’»

Look this:
windy-docs.vercel.app

Collapse
 
jsmccrumb profile image
Jacob McCrumb

Thanks for the write-up, and nice tip about npm-run-all. Keeps it nice and simple!

Collapse
 
nards_paragas profile image
Nards Paragas

Thanks for the positive feedback, I'll try my best to keep this updated.

Collapse
 
krampusnuggets profile image
Brandon Williams

Great work. Helped a bunchπŸ‘πŸ½

Collapse
 
nards_paragas profile image
Nards Paragas

Thanks!