How to Set up Tailwind CSS Project for Beginners from Scratch

hello everyone in this tutorial I'm going to show you how to set up Tailwind development environment on Windows okay let's get started first of all I will talk about the software that you need to install on your computer so you have to install Visual Studio code on your computer I recommend you download this one and install it on your computer the next software that you need to install on your computer is node.js so you go to nostals.org and then you download this long term support version which is over here click download it and install it on your computer the installation is pretty simple just click neck next until it's done and the next step you need to know how to read Tailwind documentation you go to Tailwind css.com and then you click on get start it will tell you how to install Tailwind on your computer by using Tailwind CLI technique okay you have to run this command on Terminal okay let's create a new folder on desktop so I'm going to name is Tailwind starter I dropped this photo on Visual Studio code to open it okay you will see it's open Tailwind starter folder for me in Visual Studio code click on Terminal New terminal you have to make sure that your computer has been installed node.js you type node-b it will show node.js version over here if you have installed it on your computer completely next I want you to create package.json file by type npm init and hit enter enter and enter and enter enter into until it's done it will create package.json over here the next step you need to run this command copy this command and paste it over here it will download and install Tailwind on diff dependency for you you will see depth dependency over here and have Tailwind version 3 over here and you will see that nose module folder has been created over here The Next Step you need to run this command to create tailwind.config.js paste this over here hit enter you will see these files The Next Step you need to specify the path for HTML you can copy this one and put this over here for me I'm going to create HTML files in this folder instead of source folder I create this folder over here this and I create index over here index.html so instead of using Source folder I have to use this folder and I don't really need these Stars over here okay save it The Next Step that I have to do is to create input files and Source folder okay let's create Source folder over here Source folder and then create input.c address then I will copy this directive Tailwind paste is over here the next step you need to run this command to compiles input the CDs to get output.c address here you will get output the CSS all right enter okay I'll put the CSS has been created we can use output with our HTML so let me create HTML and let me import output.css over here let me import this one I'll put the CLS I'll put the CSS okay save it let's create our H1 hello Tailwind and put class over here BG red 400 if you need suggestion like this like this you see we have suggestion you need to install Tailwind intellison telling this one intellison you have to install it to get suggestion I can put 300 I go back to here the next step I want to run this with live server open with live server so I right click on index.html and then click on open with live server your computer won't have live server if you don't install live server I recommend you install this plugin so you can run index.html with live server okay let's run Express Live server see you will see Tailwinds works but when you stop servic control C and press y over here every time you run the project you need to run this command every every time you see you have to run this command if every time so it is hard to remember this command so how can you fix it so I will copy this command and I go to package.json over here I can type div and I just paste this command over here we don't really need npx over here because we run in pm okay save it so instead of run this command every time you want to compile the project you just type npm run div hit enter so it's work so let me change the background color to Green save is rebuild output files for me you will see we get green you can even change output the series to other names you go to package.json this is input right eyes is its input so input is this files so output is this file so we can change these two Style save and then we go back to index we have to import Style save see it will rebuild for me but you have to stop the service because you change package.json you change this one you have to stop it and start it again npm run div hit enter let me change this to Blue save see it's worked and you can delete outputs.cs over here because we use styles.c address in the future when this website is done you just upload these two files index.html and style.css into your host alright this is all about this video don't forget to click like comment and subscribe thank you so much for watching

Channel: Devtamin

Views: 113,712

Keywords: Tailwind, CSS, UI, UX Design, UX/UI, tailwind css, tailwindcss, install tailwind, set up tailwind, css framework, html, programming, web application, web development, tailwind cli, create tailwind project, set up tailwind project, Tailwind CSS for Beginners, Basic Tailwind CSS, Tailwind for Beginners

Id: arftp8kFBBg

Length: 7min 4sec (424 seconds)

Published: Tue Oct 04 2022