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

hello everyone in this video I'm going to teach you how to install Tailwind CLS in react with v project okay you will see a video configuration over here in my react project if you don't know how to set up react with beat I recommend you watch my previous video I will put the link in the description alright let's get started first of all I want you to go to Tailwind website Tailwind css.com hit enter Then go to get start and then click on framework guides over here you will see many framework and but you don't see react with veed this is create react app so we just use feed over here we just follow this guy live so you just copy this command and then you go to here and paste the command in the terminal over here okay The Next Step copy this command and paste this over here you will see Tailwind configuration files over here okay next you just copy the content over here and then go here and paste this over here okay the next step you just copy this uh Tailwind directive copy it and go to index.cs this is default series that come with react projects I will remove them all and paste the Tailwind directive over here okay The Next Step you just run npm run div to start react project npm run Dev okay press Ctrl and click over here to open the project you will see everything change over here let me go to app.jsx let me remove this all and let me try our first Tailwind crss class H1 hello CSS with react B okay and I can remove this one and this one this is the default it's coming with react project okay then let's put class name over here and put some Tailwind CSS classes over here for example I can put text Dash l x and then fun bow text red 500. save and let's go back here you will see this tag is red and the font is still in fun all right this is all about this video If you like this video don't forget to click like subscribe and comment down below thank you so much

Channel: Devtamin

Views: 33,066

Keywords: programming, code, coding, coding tutorial, programming tutorial, web development, tailwind, Tailwind, TailwindCSS, Tailwind CSS, Tailwind React Vite, Install Tailwind in React, React Tailwind CSS, Install Tailwind in React with Vite, TailwindCSS React Vite, React Vite Tailwind, TailwindCSS React ViteJS, React Vite, How to Install Tailwind in React, How to install Tailwind in React with Vite, Vite React Tailwind, Set up Tailwind, use Tailwind in React Vite, use Tailwind CSS in React

Id: fUXQXafPF1A

Length: 3min 4sec (184 seconds)

Published: Thu Jun 08 2023