Configure React to use TailwindCSS - The right way - 5 Minute Tutorial

❗️ You’re probably here because you can’t get tailwind CSS to work with your create react app project. It’s because you haven’t configured it properly. Today we’ll learn how to quickly get tailwind configured and verify it works.
🧠 Tailwind is like bootstrap on steroids. If you can’t get it to work, stick with it, it’s well worth the effort once it’s set up!
TailwindCSS: tailwindcss.com/
TailwindUI: tailwindui.com/
---
WHO AM I: I'm Dylan, a Cloud Engineer living in Bend, Oregon. I use my background in tech to make videos about technology that enables and grows businesses.
---
🌍 My website / blog -
dylanalbertazzi.com/

[@AhmedAli-sr4pb]

Love you bro. You are awesome. Nice, simple and short.

[@dylanalbertazzi]

Thank you so much 😀

[@YOUdudex]

worked thanks, now need to learn how to use tailwind lol, subscribed

[@dylanalbertazzi]

Glad I could help

[@Krishnamultiverse4016]

Sir I am struck at Craco idk y everything else runs fine.. but when I copy paste craco it shows so many errors ..plz help.. and for tailwindcsss v3.0 I manged to install it in react app.but then when I start to code in app.js the component doesn't import at all ..is there any craco for tailwind 3 ? Plz check it out and help me 🙏

[@preethamm.s6095]

Thanks for this video. A new subscriber added to your channel xD

[@dylanalbertazzi]

Welcome aboard!

[@rayahmed2202]

nicely done. thanks friend.

[@dylanalbertazzi]

So glad it helped!

[@khandoor7228]

good stuff DA

[@dylanalbertazzi]

I'm so glad you enjoyed it!

[@codeaperture]

New version doesn't need this craco, right?

[@ezeobisochima9944]

Hi Dylan, great tutorial over there, but sadly my styles didn't apply, I am also using daisy ui and both the daisy and the tailwind isn't working. what can I do?

[@abcdfgabcdfg6096]

Hey ! Did you find the solution cuz Im having the same problem here...

[@samimaher2880]

Hey thanks for the video , I've followed all the steps mentionned in the documentation but still not working . I don"t get any error but the css is not applied , I am using nodeJs 16

[@dylanalbertazzi]

Oh no! It's tough to tell what's wrong just by your node version / your version shouldn't make a difference. Did you ever get it to work?

[@NathanielScottYT]

dude can you pls make a tutorial on getting tailwind css intellisense working I can't find any working tutorial

[@dylanalbertazzi]

Noted, I'll add it to the list!

[@kyulol3235]

Did you try with JIT ? I am struggling with JIt and react ;s

[@dylanalbertazzi]

I haven't :/

[@abhishek.rathore]

Great vid dude. One question though, will it work just as smoothly (like without hassle) if I use typescript template for create-react-app?

[@dylanalbertazzi]

thanks! I don't see any issues with that... give it a try!

[@abhishek.rathore]

@@dylanalbertazzi Yess I tried and it worked. A had to do a little hack. When I was using craco.config.ts it wasnt working but after making it just JavaScript it started working. Thanks a lot.

[@dylanalbertazzi]

@@abhishek.rathore Boom, great work!

[@rahulanand6015]

followed every single stwp but it didn't worked for me as it is showing an issue with the autoprefixer

[@dylanalbertazzi]

I'm sorry to hear that. Did you ever figure it out?

[@rahulanand6015]

@@dylanalbertazzi recently i got the solution by reinstalling everything and running some commands. I have searched for it a lot and stack overflow helped me out in finding the solution. Anyways a big thanks to you mate.

[@AltheaSchutte]

Have you tried getting tailwind to work with react storybook?

[@dylanalbertazzi]

I haven’t!

[@mithileshkumbhar1347]

how do i connect with you ? just had doubt's. Thanks Mate!

[@dylanalbertazzi]

Hey! shoot me an email at [e-mail]

[@alwinvillero4404]

What are the benefits of using tailwind?

[@dylanalbertazzi]

consistency across your projects and faster development speed 🏎

[@janosmarta8258]

I didnt learned so much about copy and paste than in this video.:) If you want a real problem solving, solve the vite+react+tailwind how to configurate problem.

[@dylanalbertazzi]

yep, nothing too fancy here. just helping those new to the platform get up and running! I’ve never used vite. what are its advantages?

[@janosmarta8258]

@@dylanalbertazzi I watched Evan You interview by Brian Doulas on github youtube, very messmerizing if I can say so.:) Its advantages the esbuild bundler speed what is almost 100 times faster than webpack or parcel, than hot module replacement and static live server amongst its other features.

[@ezeobisochima9944]

And also the craco didn't work.

[@lawrencemotions8720]

{: "Unknown at rule @tailwind", }

[@softwareengineerlife6252]

you just need to tell .. follow tailwind doc , no need to create video on it

[@dylanalbertazzi]

Hi Akash, This video is targeted at beginners who are still learning to read the documentation. I could've put a disclaimer at the beginning... next time it will be there! Thanks for being part of the learning process with me:)

[@mapardo84]

Hey Dylan, I've got this error after doing the exact same steps you showed. Unknown at rule @tailwindcss(unknownAtRules). Hope you can help me. Thanks in advance

[@dylanalbertazzi]

Hey, thanks for watching! This looks like it will solve your problem! ...let me know :) stackoverflow.com/questions/47607602/how-to-add-a-tailwind-css-rule-to-css-checker