How to Setup Tailwind CSS in VS Code?

hey guys this is ritisha in this video I'll show you the step-by-step process on how you can install Tailwind CSS to your project so let's get started so you need to have node.js and visual studio code installed in your machine so if you don't have them already don't worry I'll give the links in the description box down below you can download from there now let's head on to our project so I've created an empty project in here with the name Tailwind CSS installation so let's open up the VS code terminal as the first step we need to initialize this project so I will write the command npm init hyphen y this will create our package.json file so we also need to create a public folder wherein we will be storing our index.html annivers CSS file as well so let's create our index.html file we can write the command exclamation and hit enter this will create a boilerplate HTML code for us you can give the title whatever you want so I will give the title as Tailwind CSS installation and save it now let's install tablebin CSS to our project so we are going to refer to the documentation for the installation so here you can go within docs and go with an installation since we are going to install Tailwind via CLI so I'm going to refer to this portion of the installation process so as the first step we need to install Tailwind CSS via npm so I'll copy this line paste it over here so now after installation if we have a look at this package.json file our Tailwind CSS is installed as a Dev dependency with the version 3.3.3 now let's Head On To The Next Step so as the next step we need to initialize Tailwind CSS so that this tailwind.config.js file is created so I'll copy this and paste it over here okay so our tailwind.config.js file is created as a next step we need to configure our template path so what does that mean so we need to specify in which all files in folder we are going to use Tailwind so for that we have to write the location of our files and folders within content so I'll copy this and paste it within content so as I've told previously also that we are going to store our index.html file where we will be primarily using Tailwind CSS utilities so I will write public here instead of source the star star specifies that if there are any subfolders within the public folder it will find for HTML and JS files in there as well but since we don't have any JS file I can remove this from here and I don't have any subfolders as well so I'm going to remove this as well and Save so before proceeding with the next step let me explain you how Tailwind CSS Works under the hood so first we create an input file where we import all the Tailwind Styles and here we can also write our custom CSS as well then what Tailwind does is it process this input file using a Tailwind script convert the Tailwind Styles into vanilla CSS and stores this in an output file so that output file is being used in our index.html file so whenever we make any change in our input file or use any of the Tailwind utility classes in our index.html file we have to run this Tailwind script to process and reflect those changes in our style.css file so now as the next step we'll create that input.css file so I'll copy these three lines from here go back to my project create a new folder let's call it Source within it I'll create a new file input dot CSS and paste those three lines you know what these three lines are doing so this add the red Tailwind is nothing but a directive which is telling the CSS processor to insert the Tailwinds base components and utility Styles into our CSS now it's time to create our actual output.css file for that I'll have to write the command npx Tailwind CSS and as the input I want it to take the file that is stored in my source and the name is input.css and as the output I want it to generate a new file which will then be stored in our public folder let's call it style.css and hit enter now you can see I'm C of style.css file is created but as I've told previously also if whenever we make any changes to our input.css file or say add any table and utility classes in our index.html file we have to rerun this script again and again so for that what we can do is we can instead add a watch flag so that whenever we make any changes to our input.css file or say add in utility classes we don't have to write the script again and again this watch flag is going to look out for changes and rerun this Tailwind script again automatically so you can let it run in the background also there is one more thing for example you open up this project again then you will have to write this long line again so instead of that what we can do I can copy this from here go back to my package.json file and here write a script instead let's call it build you can call it whatever you want and paste this in here now the next time I'll open up this project so instead of writing this big line I can simply write npm run build so this will let this script run in the background so you can see this style.css file got generated and within it it has injected the base styles that are that is also called PreFlight and after that whatever components we are going to Define in our input.css file that will get reflected and post that whatever utilities we are going to use in our index.html file that will get reflected posted so the last thing that is left is to link our index.html file with our CSS file that got generated so I will add that as well now we are good to go we can add Tailwind CSS utility classes in our project now let's quickly try if our installation is done properly but before that I would highly recommend you to install two of the visual studio code plugin one is Tailwind CSS intellisense this is provided by Tailwind uh Labs so this provide Advanced features such as autocomplete syntax highlighting and lighting so this is a really good tool to have in your Visual Studio code apart from that you can also install this live server by which you would be able to open up this project so let's add a background color to our body BG yellow you can see this drop down because you have installed a table in CSS entire sense let's take bglo 500 and within it we can give it a heading let's call it Tailwind CSS installation and we can give it a class as well let's give a text color to it so let me give it say black and save so if you have that live server installed and you right click you get this option of open with live server so I'll click on it and yes we can see that our background is turned yellow and our text is written in Black that is Tailwind CSS installation so that's all for this video I hope now you have successfully installed Tailwind CSS to your project and if you are using any Frameworks say react.js next.js or any other the steps remains almost the same but there is some slight difference so if you want I can make a separate video on that do let me know in the comments and if you like this video do hit the like button down below and subscribe to this channel for more such content in future see you in the next one [Music] foreign foreign [Music]

Channel: Etisha Garg

Views: 38,371

Keywords: tailwind css, tailwind css tutorial, install tailwind, tailwind, tailwindcss, set up tailwind, tailwind cli, create tailwind project, set up tailwind project, tailwind css for beginners, basic tailwind css, how to install tailwind css, how to setup tailwind css, how to install and config tailwind css via npm, how to install and setup tailwind css latest version, how to install tailwind css npm, how to install tailwind css via npm easily, how to install tailwind css with npm

Id: SPr-1cwVn1k

Length: 7min 47sec (467 seconds)

Published: Mon Aug 14 2023