How to use TailWind CSS in React JS 🔥| Install Tailwind CSS in React App from Scratch

T CSS is a very helpful tool when you use it with reactjs now today we're going to learn how to use T CSS with react JS now I see many people struggle with that they think that is something difficult but believe me that is super duper easy so let's started so I already created a project empty project obviously and my project is also running now our goal is we need to go to the tailin css.com and our goal is we need to bring the tailin CSS on our react project so how to do that came to the website click on the get started and now here you have so many options tailin C Port CSS flamework guides play CDN we want to go for the flamework guides click on the flamework guides now we can see all the framework available for Tailwind but we are interested on create react app so click on the create react app and now there is only like six steps I am going to blindly follow the steps just blindly follow the step but don't worry I'm going to explain you what I'm doing fine so let's get to the step number one and I can make it little big uh yeah it is looking nice more no yeah so my so the first step is it say npx create react app and the app name we already done we already create a app second thing is say go to under the app directory we already under the app directory and we run our servers so first step is clear if you don't create a app please create a app and go to your directory now it says Second Step install tailin CSS fine then we can do that it's a npx install minus D tailin CSS so in this command is doing nothing just simply installing the TN CSS so I can just copy I can came to my project I need to stop my server and my server stop yep clean the terminal and now I can just run the command npm inst install tailin CSS and it going to install tailin CSS for me fine and yeah my tailin CSS is installed now the thing is it's a npx tailin CSS in it so also we can just run the command what the command does this command basically create a tail. config do file in here and you can manually create the file also but I like to follow the documentation I can just hit enter and something going to happened come on come on yep see one file is generated for us I can just make it little here now one T.C config.js file is generated and some code is written correct don't worry about the code you're going to know that fine so our step two is successfully done and I hope still now it is not difficult correct third step says configure your template path what that mean don't need to worry that you just need to understand copy and paste that that's it I can just copy the entire thing I can came here T.C config.js and I can paste the entire thing done getting in now the third step say go to the T me uh T.C config.js and put all the code so we came to T.C config.js and put all the codes now there is another thing I just love to explain you this thing it's a Content Source something something say JS jsx TS TSX what it basically says uh like support those files whoever file has ajs extension jsx extension support that file getting it so done nothing more nothing else and we are done now we are done with the third step now we need to came to the fourth step what fourth step does like fourth step says add the Tailwind directive to your CSS what is tailn direct if you know very good if you don't know just forget that only thing you need to know you need to create a index CSS file and paste all the code under the index. CSS file done getting it so I can do that I can just create a index. CSS file where under the source under the source I can create a index. CSS file okay I already have the file uh index do yeah this one and I don't need this code by the way this code is okay this code is scaming by the react when you create a react project react by default generat the index. CSS file so I can just remove all the index. CSS code and I can just copy this code and paste it here and again if you don't getting it what is adate tvin don't need to worry only you need to worry you need to have the thing means you need to put the code under the index. CSS done and now we are almost done still the fourth step is the main step in the fifth step say run new server we can do that and in the sixth step say you can start using Del okay we can also do that so we can came here we can I can run my server npm start and come on and then we need to put some tailin CSS code to see I can just copy this line I can just copy the H1 came here my server is still starting in the manual time so in that time I can just cut those files I need my app.js this one yep and come on yeah server started please and I I don't need that much of the thing I just need cut and I need this guy I just need the heading and come on bro just start please uh I can just form a document a little and I want to show another thing you can install a extension of tail vnd means go to this extension Tab and search for tailwind and you will see extension you need to install the extension what benefit this guy you need to install this extension what benefit you get by that you get I sorry you get suggestions for that I I installed the extension I came here now if I type in tailin thing if I type Flex so see I'm getting suggestion so where the Su coming from for that extension fine so I think my codee my thing is done I can came here refresh the page and I I think yeah the Tailwind is there I hope so yeah the Tailwind is there or I can do know one thing I can make a text red uh I think 600 is nice and I can make a front bolt now yeah front bolt is fine I can came here refresh and see that text rate is applied meaning my Tailwind is working fine so I hope you're getting it it is not difficult to use T CSS you just need to blindly follow the step and still the fourth step that is the thing you need to worried about fifth step and sixth step is nothing fifth step mean need to say start your server sixth steps meaning to say start like start using the Tailwind so I hope you're getting I hope this thing is working if you get any error or any issue please comment down below I love to answer you I love to like reply and help you so yep I think that's it for today and we'll see you in the next video I'm

Channel: codeWithGeek

Views: 278

Keywords: react, reactjs, tailwindcss, html, css, javascript, learnreact, tailwindcsswithreact, learntailwindcss, reactjstutorial, tailwindcsstutorial

Id: 5icEVitBc20

Length: 7min 33sec (453 seconds)

Published: Fri Feb 09 2024