How to Setup Tailwind CSS in VS Code | TAILWIND CSS TUTORIALS

welcome developers to Ivy Mr your favorite channel on how to grow from becoming a beginner to giving a developing I'll be showing you a simple tutorial on how to set up challenge inside VSS code so without so remember make sure that you've got node.js installed inside your inside your computer as well as your age of CD so my interface this video see the code so first of all I'm going to start off by creating a folder I'll be doing everything on my desktop let me come and say Let me give it a title name of YouTube this is the name of the vid of the folder that we shall be using then inside this folder this is file that you have selected the next thing that you're going to do we're going to open a terminal once we have our terminal open make sure that this folder is AMT by just typing listing we're going to create a basic a new file a file called index.html then after this one we're going to we're going to use a command to install telling CSS so get below inside your terminal if I can let me just go check it up then I'll type in pm install wind chill in CSS make sure that you have saved everything correctly and press enter this will install our Tailwind CSS yes this output makes it depicts that our telling CSS files has been created successfully now is the time to we are now going to configuring our Italian CSS file to do that we're going to use a new command that is called ntx till till wind till in CSS in it this this command will create a config file after configuring telling CSS so as you can see the last command that they're saying created telling config file this one now we're going to configure the the Italian config file as you can see all the content value it is empty but we are going to fill it within with new content so we're going to fill it with the with the coordinate value index.html file that we created so the change is by pressing Ctrl s to make sure that all your changes have been saved now is the time to now the next step is to create a file called style.css inside the same code the same folder I'm going to create a file.css file and then I'm going to type these commands at trailwind base then the next one is at Tailwind components then the next one is at Tailwind utilities above code will include best Styles pre-designed components and utilities for for telling CSS make sure that you type your con you would type you save by Ctrl s on your keyboard now the next step that we're going to do we're going to build a CSS file called detailing style CSS so this one we're going to go inside or again our terminal and then in our terminal I'm going to type npx Tailwind CSS Dash I that specifies the input and see you said the file style CSS dot CSS and then Dash o which specify the output file to save the compiled CSS to new file to be created code Tailwind Tailwind Tau dot CSS make sure that you're typing you're following out the code and then we need a Double Dash for once which which tells telling ccs to watch for changes in the input file then if everything goes okay you tap this code just press enter yeah as you can see we have got we have if you see this command winning what it means that a command is done it means that everything has been done successfully and then this output show you a new file like this one so what what we are now going to do is make sure that we link up inside of inside our file index was HTML I'm just going to say Doc to get a boilerplate then let's save let's link up to Arcade and you delete the last created file called telling CSS just call it this Tailwind getting the style CSS link it up to this one so we are now going to create a boiler coding to test our to test everything to preview our code okay I'm just going to use H1 takes S2 TX yeah and some pattern too and some pattern takes for for testing pattern so let me use my name I've been Mesa then subscribe subscribe then okay inside this file we are going to use boiler coding and let me use let's say text Ember is 900. and then let's clutch in the text to six times six exhale large that you can see if Enlighten the text let's also style our pattern for the button I'm going to say text let me put it to okay okay let me save let me see page background Ember 700 then let's make our text small because small let's make the font size font let's make it font let's make it thin and then let me put the text to White okay there you can see the coding for our button subscribe so this was it depends on how to set up challenge CSS inside your official pseudocode if you like my corner make sure you subscribe and press on the notification button thank you

Channel: Irvine Mesa

Views: 361

Keywords:

Id: OWGxkmIo_GA

Length: 8min 19sec (499 seconds)

Published: Wed Aug 23 2023