Tailwind CSS Installation - How to Install Tailwind CSS in React, Vite & VS Code

hello everyone so in this video we will learn how we can install Tailwind CSS in our project so this is very simple so let we let me start okay so right now we are in tailin CSS official website so we will go to docs and now in docs there is installation section so we will go to installation then there are multiple options for installation ta tailin CLI using post CSS and framework guides and play edn so there are basically there are two ways to install Tailwind CSS one way is to uh you know just for learning purpose that is play CDN and another way is to you know install properly for production uh purpose so first we will learn uh the easiest way okay so we will go for play cedan so in this play CDN this is just a CDN link so you have to put the CDN Link in your HTML and that's it guys so you will be able to use T CS right away so let me try so uh here so this is my HTML page basically okay and this is the HTML page right here uh this is the HTML page hello is written here so inside this HTML page I will just add this uh script like this so This Is The Script I just need to add this script and now I'm able to use any of the tailin Cs classes here so let me show you so if I refresh this page nothing will change right now but I will be able to use uh tailin says classes here let me show you how we can do it so if we say class and I use uh inline inline block okay there's a class inline block okay and then uh width 32 and width sorry height also 32 okay and uh uh BG background color red BG red 400 okay so if I use this one so these are the classes defined inside TN CSS okay so if I use this and then uh refresh the page then you you you can see uh the T CSS classes are getting applied here okay so so this is the easiest way to install so you can while you are learning T CSS you can easily just use CDN link and just start using these uh classes for TCS to for the learning purpose only but it says when you say the play CN is designed for development purpose only and this is not best choice for production so when you you just learning Tait CS then you can use it directly but for the production or you know full-fledged projects you you are not recommended uh to use this playn link so for that we have to properly install tailin CSS in our project so uh in next step I will show you how we can do that okay so U okay so now we will see we will U there are there are multiple options for for that tail CS tail CLI and post using post CSS and framework guides Okay so so we will use most famous framework uh that that is react or next we can say so this is the V okay V is very much popular uh bundler right now and uh so we will use Ved to start our local server so we will select Ved here and uh okay in inside the Ved there are three options to select what is one is for react other is for view third one is for uh svet so we will select react because most people are using react right now so there these are the steps to follow to install tail CSS okay so we will do one by one so let me copy this one and uh we will go inside our folder uh to create a new project okay basically uh okay so it is saying npm create V latest and my project so my project will be the name of the project okay so uh we will run this okay now we are uh it has created my project with the default settings okay so let me open this my project in in vs code okay so let me open it okay so my project is the name so I will open this project okay now uh okay now we will follow the next steps okay so it is saying CD my project so we are already inside my project now npm install and npm run Dev okay so now we we will see npm install npm install okay it will install all the related package for V1 react so far we have not done anything for Tailwind CSS we are just setting up setting up a V1 react project as of now so it will install all the npm modules for V react Okay so modules are there okay node modules now we will see we will try to run npm run devb okay so it will start our local server okay so it is saying on this path you can see our local server running okay so I will open this URL yeah so our V1 react project is running locally so it is uh successful so now we will we will do uh to install and Tailwind CS basically so now for third step we will go for this one so we have to install Tailwind CSS post CSS and auto prefixer okay so we will uh copy this command and then uh run here let me stop this first okay now we will install this also so we are installing tail CSS post CS out of prefixer okay these got installed now we will go for next thing so this is npx Tailwind CS in it so it will create it will basically create a Tailwind configuration file so as you can see there is no configuration file as as of now in our project for Tailwind CSS basically but it will create a new Tailwind CSS config file you will see yeah here okay so this is the Tailwind config file with the default setting okay it got created now we have to just change the the content of uh this configuration file okay this is the content and content is blank as of now but we will replace with this code okay it is simply saying that we have to apply tailin CSS for uh uh all the files inside SRC folder and outside as SRC there's index.html we have to apply there also so it is saying simply saying this this thing so now we will go for next step for Next Step basically we have to copy these directives so these are the directives for uh tailin CSS and we have to paste this directive inside our uh ins index CSS okay now top of the file we will we will use this index sorry Tailwind sa directives okay these are the base directives basically and now we will again run npm run da okay so npm run Dev okay it is again running the local server uh okay so okay this is the local server running okay so let me make some changes inside this this is our app.js jsx file let me try some okay so now it is saying in tutorial it is saying that you are done for the installation and you can you can use classes of tailin CSS directly so we will now try to use the classes here okay let me simplify it little bit okay so here okay so let me simplify it okay so we have to remove this also we don't need this and we don't need these uh these things also so we will also remove this okay so simple simple as that so now we will try to use uh uh some tailin CSS classes okay so now I will create a div okay and class name will be okay so before before going to that guys so there is a cool uh tail CS extension that can uh that can help you to you know suggest you all the classes for T because there are multiple classes and you you know nobody can remember all those classes so there is a cool extension I already have installed so I just showing to you so if you go for extensions so there's a Tailwind CSS yeah so this is the Tailwind CSS intelligence okay I already installed this one so if you install this in your vs code so your vs code will suggest all the Tailwind classes automatically uh okay so let me try some classes so uh this when is BG okay it is saying BG color B red okay BG red 400 okay it is already suggesting us now we will say inline so it is already suggesting you inline block and it is also saying giving you suggestions what what will uh uh what will be the impact of that classes okay display in line so every class you can uh check out here using that extension so without that extension you will not be able to you know find all the classes but if you install that extension uh vs code automatically suggest you all the classes okay so we will select inline block okay then um we can say uh width width you can choose anyone so 32 okay now height also 32 okay now um okay everything is done so I think let me check okay this is the this is our uh D okay let me see here it will it it will automatically get refreshed and guys you can see uh we can uh we can use TN CSS uh classes here so it is perfectly installed in our project if I copy this and you know paste paste it right like this and if I say red then blue okay then uh green so it will apply on this these divs and you know you can see these are the different different divs and different with the different uh different color background color okay so it means we are able to use Tailwind CSS we we installed perfectly okay so and one more thing guys so if you can see this is the beauty of tailin CSS if you if you see I have used uh 400 color theme here okay so if you use 400 or you know any any the same uh same number of background color or font color anything so it will give you a symmetry in your uh in your UI all over your website so if I just assume if I randomly use any red color or anything okay so 900 or something so it will be uh you know it will not look good with other colors you know you can see this is the dark this is dark one green is very very much dark as compared to these thing these two so Tailwind give you a standard way of using UI components okay so here you are you are able to use DNS properly so this I think this was the um agenda for this tutorial and we we are now able to use tailin CS in our project and uh that's it for the video guys and if you have any problem installing uh tailin CSS in your project you can write down in the comments and I would like to give you two suggestions uh if you face uh any uh problem in installing then you can follow Two Steps either you can in upgrade your node version okay and second one is you have to restart your vs code okay after installing tailin CS sometime it it may work for most of the people Okay so so that's it for the video and if you face any difficulty you can write down in the comments and I will try to solve your problem thank you so much for this video and I will see you in my next video thank you guys bye

Channel: Thank Code

Views: 596

Keywords: tailwind css, tailwind css tutorial, tailwind, tailwind css tutorial for beginners, tailwind css for beginners, tailwind css installation, tailwind css project, tailwind css react, tailwind tutorial, tailwind react, tailwind project, tailwind css in react js, how to install tailwind css in react, how to install tailwind css in vs code, tailwindcss crash course, tailwind css 3, tailwind css ui components, tailwind daisyui, daisyui react, daisyui, thankcode

Id: kV80vURfYL4

Length: 12min 11sec (731 seconds)

Published: Sun Jan 21 2024