How to use Tailwind CSS in React with Vite | Install TailwindCSS in React with ViteJS for Beginners

In this video, I will show you how to install Tailwind CSS in a React with Vite project. This is a step-by-step tutorial for beginners.
★★★ More Related Videos★★★
How to create a React project with Vite - • Create React Project w...

[@vadak_]

Three minutes video solved my 20hrs issue. Thanks a lot bro!

[@_isosa_]

Useful and straight to the point!! Thanks a lot, subscribed!

[@Devtamin]

Thx

[@lukasknap1679]

Thanks for this video! Very useful.

[@BosseM-er5wf]

Just the video i was looking for. Great job

[@Devtamin]

Awesome, thank you!

[@2brosmemes449]

Thanks i got your video helpful! 😊

[@wailazzo]

THANK U BRO GOOD LUCK IN UR LIFE

[@user-wm7rf1dl3n]

thenk you so much bro💕💕💕
you saved my big problem in a short video ,

[@anime_gen875]

thank you for making it so simple bro it helped a lot

[@akshat2808]

Worked Well!!

[@deepakchhantyal7569]

thank you , very useful

[@okkaraung9512]

appreciate it. short to teh point explanation. keep up the good work brother.

[@Devtamin]

Thank you for a comment

[@sandyrose77]

Thank you man❤️✨

[@Gilbert-hk8ho]

i have tried but the styles doesn't reflect on my vite app

[@varunupadhyay2488]

very useful..straight to the point

[@Devtamin]

Thank you for a comment

[@aakashsaini7352]

Thanks. Really helpful.

[@Devtamin]

Glad it was helpful!

[@tinanguyen1072]

This helped a lot thank you!

[@Devtamin]

Glad to hear!

[@sivasankarmutyala1077]

Very Useful, thanks a lot🤗🤗

[@Devtamin]

You're welcome 😊

[@yuthcambo3712]

Thank is useful

[@subirdas6508]

thanks, I got it

[@patrickm5656]

Thanks for the help!

[@Devtamin]

Happy to help!

[@raveenraj294]

Thanks Boss

[@marislaradev]

Thanks! It helps me a lot ❤

[@Devtamin]

I'm glad!

[@mareq_111]

Thanks for helpful video 🔥

[@Devtamin]

No problem 👍

[@muhammadtayyab6077]

Nice Bro! very helpful video

[@Devtamin]

Glad you liked it

[@tishycs8187]

Thank you so much for this video

[@Devtamin]

Most welcome 😊

[@truuta9168]

it worked, thank you!

[@Devtamin]

You're welcome!

[@ingridoliveira1065]

very good, thanks : )

[@Devtamin]

Glad you liked it!

[@shankargurung1335]

really awesome thanks a lot bro

[@Devtamin]

Always welcome

[@quvomiddinkamalov3292]

Thank you!

[@Devtamin]

Welcome!

[@user-fl5yo6yx5v]

ty

[@YouDoStyling]

great 👍🏻

[@Devtamin]

Thank you 👍

[@Awakened_Pot]

Thanks mate!

[@Devtamin]

Glad it helped

[@sameerahmad-lu1gn]

hey i tried the same but when iam copy pasting those three @tailwind thing in index.css then it appear as a wavy yellow underline how do i solve it???

[@SachinYadav-pg2bv]

Thanks bro❤

[@Devtamin]

Welcome 😊

[@melissachavana1222]

thank you!

[@Devtamin]

Welcome!

[@giorgikiladze1151]

thank you

[@Devtamin]

You're welcome

[@shinthantkaung]

Thanks bud!

[@Devtamin]

No problem!

[@nipunjayasinghe1880]

Thanks bro!

[@Devtamin]

No problem!

[@mctribals]

Gracias buen video...

[@Devtamin]

You're welcome

[@ayonbit6186]

But there is a warining in the compiler . How to fix the warning ?

[@franogugic654]

THANKKKK YOUUUU MANNNNNNNNNNNNNNNNNNN

[@Devtamin]

you're welcome

[@user-mv3sz9gk1d]

hii in my case tailwind intelissance isnt working

[@arnab_d9]

thanks ❤

[@Devtamin]

You're welcome 😊

[@vohncena]

What is your vs code theme i really want this one

[@JasurHaydarovChannel]

thanks

[@Devtamin]

Welcome

[@zero3281]

thx

[@davidbutler2391]

good

[@Saske443]

Thanks Champ

[@Devtamin]

You're welcome

[@AnjaliSingh-hn8ff]

whenever i run npm run dev after tailwind it says - missing script:"dev"

[@7days280]

thankyoiu

[@Devtamin]

You’re welcome

[@Judd2000]

Thank you, I was not following the Vite specific framework guide.

[@Devtamin]

Glad it was helpful!

[@Explore_new_game]

Hello sir,
When is paste data in index.css file it's showing a unknown error.
Please help sir 🙏

[@AtikshaSharma-k5d]

Talwind is not applying what to do please help

[@pebblesmoker565]

for some reason am only getting tailwindcss.config.js and not getting postcss.config file can someone say why???

[@omomaighawosa570]

Please what tailwind vscode extension are you using ?
Great video btw

[@rishabh2k01]

tailwind intelligents

[@Devtamin]

thank you for a comment

[@azonsongdigital]

What I want to know is after run it for the first time usin' ```npm run div``` how can it again once I close my terminal... Because of i use nom run dive again the page comes out blank, the server runs but all my work just disappears... Any help? Anyone?

[@ahmadbasyouni9173]

what theme do u use on vscode?

[@Devtamin]

Material Icon Theme

[@simohamedlaarmani6789]

You end up with a lot of css properties. Hoq can you sort them sfter in a react app using prettier-plugin ?

[@ryostyles9904]

Thanks, so the postcssconfig file was missing and that's the reason it wasn't working. I had installed only tailwindcss. Thanks for the help.

[@Devtamin]

Glad I could help

[@invinciblevikas9553]

I have followed the same step don't know why my css does't work

[@aryanmaskey9147]

i already have extension installed but i need to hit ctrl+space for suggestions. isnt there a solution for this?

[@stellaeneh8357]

Co-ask

[@raffph]

why my tailwind cant show the recommend style example when i type text-green-100 the 100 cant show the option

[@LOLUMAAAD]

Was wondering this myself but found the solution and was to download extension in VSC called "Tailwind CSS IntelliSense"

[@Devtamin]

Let's install this extension Tailwind CSS IntelliSense. If it doesn't show any recommends, that means tailwind has been implemented improperly

[@onlineviral7518]

My vite app is not working with tailwind css what should i do

[@Devtamin]

Which JavaScript frameworks are you using?

[@ilyamiller4131]

Spent hours at work figuring out why my tailwind keeps getting ignored in vite… I feel like such an idiot now. Thanks a lot for the helpful video!

[@Devtamin]

You're welcome

[@ablecj4481]

I have done it in the same way as you shown but my tailwind css is not applying

[@darrenhutchinson8018]

you might have missed saving the app.jsx file

[@fintech-rh8de]

same problem with me. i didn't miss any thing.my autosved enabled.

[@yousub6220]

I think, you should restart the project once, stop the localhost server and run again, just type ctrl + c and then npm run dev

[@brooklyninja]

@@yousub6220 This worked for me lmao, thank you

[@theycallmejatin]

Let's forget about tailwind for a sec ,
default css is showing black screen & white text in react app
How to make it normal like any web page

[@Devtamin]

Sorry about that. Did you install react properly? Check this out th-cam.com/video/8vh5dmBaVQw/w-d-xo.html

[@theycallmejatin]

@@Devtamin i made both the default css files empty and it was enough to solve problem

[@redeemasuquo]

Hi, av been encountering this problem 'the content option in your Tailwind CSS configuration is missing or empty, configure your content sources or your generated CSS will be missing styles. Can anyone help me?

[@69_anonymous._]

Same. Have you found the solution? If so pls help me

[@redeemasuquo]

@@69_anonymous._ nope, I haven't found d solution

[@ACEmmanuel]

This is because the so-called file you copied and pasted from the Tailwind site is not present in your React project.
I mean the file name

[@redeemasuquo]

@@ACEmmanuel how do I resolve d error

[@ACEmmanuel]

@@redeemasuquo are you using vite for this?

[@quotespower9911]

Not working

[@ramunasgirdziusas9636]

Need to add tailwindcss() to vite.config.js which is not shown in vite's homepage!

[@FalcoAMV]

didnt worked

[@jujutsungaming1086]

Same problem bro

[@abjeetsingh207]

thank you

[@Devtamin]

Not a big deal

[@diwakardayal954]

thanks

[@Devtamin]

You're welcome!

[@truewisdom1123]

thank you

[@Devtamin]

You're welcome