Build a Website with Tailwind CSS Tutorial

[Music] yo what is going on everyone so today i want to show you how i created this super simple website using tailwind css so this right here is super beginner friendly nothing fancy but here's a little home page and there's a little navigation and then i just add this little mobile drop down so if i click it and then just go like that fairly basic simple nothing too fancy so without further ado let me show you how i made this alright so before we get started you're going to want to make sure you have a good understanding of html and css if you do not have that much knowledge of css it's going to be very difficult to visualize what's going on because tailwind is essentially making it easier for you to create your css without having to add it all in individually so just keep that in mind and without further ado here i have vs code opened up so if you want to make sure you have the exact screen that i have then go ahead and make sure you're using vs code and if you're not then you'll have to just adjust to whatever i do so for this example i'm going to make it my entire project straight from the terminal so i'm going to use code right here you can do this on your actual terminal too it doesn't matter but here let me do command j and that's gonna open up my terminal here and let me just bring this up if you've never done this before it's it's too much for you to understand you could literally just create your own project from scratch too but uh and just drag it in but for here let's just do this i'm going to cd into my projects folder so that's on my desktop it's called a cd so let's see cd desktop you're just going to most likely be in a different place but let me just do mine here so cd desktop and then i have another folder on desktop called project so now you should just navigate into wherever you're going to create your project so whether it's desktop documents or whatever it's at and now what i want to do is make a directory so a new project so i'm going to call this so i'll do mkdir and i'll just call this one tail when css sites and let's put v1 and then i'll just press enter so now nothing happened because we have to actually navigate into there some say cd tailwind css site dash v1 so now i'm inside of this new folder essentially project we just made so in order to open it up with vs code if you're on just your regular terminal you just say code dot and it'll open up vs code but since i'm actually using vs code right now i want to open it within the same window so i just say code.r and it basically just opens it up like this so i did just code that i think it would just open up another window which wouldn't make much sense so here we are and let's get started so let's go back open the terminal again and let's go and install tailwind but first let's do this let's do npm init and then i'll just say dash y so it just answers all the questions so i just press enter and then we got a little package json right here and this is what we got so far and then what i'm going to do is we could go to the docs so like i'll show you right here like here's the actual docs and i just went to the quick start i think or the installation section and you can just go here and just copy this line here since we're just doing html css i mean some of the stuff wasn't i'll say it doesn't really matter but if you end up using like react asp view et cetera then some things might have to you'd have to look into but here i can just copy this line here and you could i'll just paste this also you guys do npm install tailwind css i think it should work too unless they make any updates but now you can see we have this right here and then what i want to do next is i need to create my folder so let's do this on the root of your actual project if you did everything right by the way you should have the node modules and then these two files here but now let's create our actual folder so i'll just create a new folder make sure on the root and i'll just call this one public and then in the public folder this will put all of our code so let's just do this let's do new file undo index.html and then we'll do a new file again let's do styles.css and i'll have an images folder too so let's just say images and then let's do new file app.js for the remote menu and then after that we need to create another folder so outside back on the route so click on this section here and just change or folder icon src and then here in the src we'll just do a new file just call this one styles.css now on tailwind they have this little section of code we may go down scroll down here and we're already here so we can actually do this but uh yeah let's just do that right now and this just creates a config file so i do mpx tailwind css init i'll press enter and then this little file should pop up right here now this is meant to add like additional styles in your own custom but we're not going to be using this but just i just have it here just in case you want to add like your own custom colors and everything but this this website's super basic so i don't need that but that's just here in case you need it now in the docs we scroll continue to scroll and it's gonna have this thing right here telling you to include this in your css file so just go ahead and copy these three lines or you can just type them out i'm gonna copy these and i'm gonna go into my styles of cs from the src and i'll just paste these in here and i'll hit save and then we'll add additional things here too but uh right now let's do this let's go to package.json and then i want to add this this little code in my script so go here back on the scripts tag and just delete this line inside of it and then we'll just say bill dash css then colon and then codes will say tailwind css build and before i finish this let me show you what happened so right now if we go to the public styles.css like it's empty right and then src has like these right here so when i when i write this code you'll see so let's go back package.json we'll write out this line tailwind css build and then we're going to go in the src folder and look for the styles dot css make sure i put the s on both okay yeah and then space will do dash o and then we're going to look at oh i put zero hold on like that dash oh make sure you put the letter o and i'm going to say public slash style.css so now we're going to look into this public.style that says this so i'll save it here and in order for this to actually update the file we're going to say mpm run and then this little code we have right here so i said build css so then i press enter and now while that is loading up now if i go to my public folder and click on style.css now we see all of these stylings right here so it can go it goes on for like infinity and now you can see all of these fancy styles that we already have for us which is awesome and now we are ready to start styling our website so make sure here let me get you off these let's get rid of this we only need to go in as html so i'll just do shift one exclamation why is it not doing it for today here okay and then let's just make sure we link this so let's say link stop.css and before i forget let's make sure i have my app.js with the app.js here and let me just save these and before we start make sure you have some extensions installed so that you can actually see so let's do make sure you have live server so let's see live server here and then also let's see tailwind css and oh it will happen and have this tailwind css intellisense so this is just like a little helper to show you like colors and stuff so you don't need this but if you want to make sure you have the same uh visual as me then make sure you have that there and i think that's all i have for now and then let's go here and start adding in our code so let's first off let's just test this out really quick and let's do h1 and i'll be like yo so i'll save this here let's close the terminal and then i'll open with the live server and once that loads up we'll see that we have our yo right there so now if you've never seen tailwind then it's pretty much you just add class and then you say whatever you want to add and turn to the styling so pretty much like for instance we can say text dash and let's just do red dash 500 and you can see that auto like gives me auto options so i can like just go down and choose them but let me just save this really quick it automatically turns the text red so we know that everything's working so if that's not working for you you must have messed something up so let me know in the comments below or i think you should be able to figure out the docs but uh like here if you want to type in let's just say like color actually let me try this let's just say text and then just click on any of these things for now and you pretty much see an entire document also if i drag this out it's probably easier so like uh like here's the tailwind css value and then here's like what actually would be in normal css and like here you can see like flex box for instance all these properties so that's flex itself but um like flex roll flex column flex wrap flex shrink etc grid you get the point so pretty much anything you need you can find it here and i believe there's a cheat sheet that uh has like all of these in an easy way you can just clean drag drag and drop them or i mean uh drop down so i'm sure you can uh just go do that too but for this one these are pretty basic so let's go here and let's just start coding this out so let me delete this h1 and let's have a basic now so let's say nav and then let's add the uh the classes after we we uh code out the like html because you won't be able to see what's going on and here let me just add role equals navigation and i'm just gonna do this list so i'm just gonna have a tags here and then let's say a and it's gonna have an idea of logo for now and then uh actually i think we could be yeah we should be fine we don't need an id let me just keep that for now let's do this and then let's do dots pl six and press tab and then here let's put uh index.html for the link so pl is essentially padding left and it's value six so if i go here and just say like padding click padding you can go down and you'll see there's like all these p do whatever number here and then there's p y there's p top p x p t p r and let's see if i can find pl so pl 6 is basically padding lab 1.5 ram so that's literally what this value is so now if i this is the main dock you see this is little padding here so if i go to new site if i just type in like serve right here save it now we've got some padding so if i delete this or if i change it to like let's say 10 you can see it changes it and then like two and that's pretty much like that's basically it you just add in the classes and style it out so it's not that complicated so here let's go and make sure i have inside so what did i put yeah sometimes i pre-i don't know why it's messing up where i like it um it auto saves on like wrong lines but oh well we'll fix that later but here this is going to be let's do this let's create a div and so with uh this i don't have to do anything just put dot and then i'll just say let's do px-4 dot cursor dash pointer dot and i'll show you this one so this one essentially actually i'll show the after because it's not gonna make any sense right now so let's do that and then let's do hashtag let's say bars and i press tab so essentially gave us two classes so we got px4 and then we got cursor pointer so now we go here let's do command f px dash four you can see padding left and then padding right so actually i should have put um i should just put pr but let's just say this right now let's just say bars yeah it's fine right there we can adjust this later and we're going to add another class too but this is essentially the hamburger menu so before we do that i want to add the additional nav links because uh we're gonna add a custom icon from this website that is built by the same guys as tail and css so that you can just automatically copy and paste the icons but let's finish this up so let's do another div this time it's going to be class hidden so the class hidden essentially it hides it and then we're going to say dot md colon block and then we'll press hash tag and then we'll have the idea of menu so right now we have these two classes hidden and then md block so basically what happens is if like you go here and let's see if i can type here maybe it shows yeah so there's overflow hidden overflow x and it's not really showing the one i want to see let me see if it um let's do mini creators for now and where is the breakpoints yeah so here they have small so sm md lg xl 2xl etc so basically md is saying i think that's like tablet once it's 768 i want it to be displayed block which means like right now it's hidden this the menus but once i drag it out to here now it's displaying the the map menus as block especially on a line so that's basically this line of code so now it's hidden block just like that so that's what we're creating right here and so inside the div we'll just pass it in our our link so let's say a and then we'll have dot p dash four press tab h ahrefs index.html and then he would say home so then i hold shift or down arrow two times i'm going to say about and then we'll say contact and here let's just keep them let's just say about just you can see like the page change we're not actually going to make new pages but when i make the movement you'll make more sense so i'll save that now and uh it's hidden right now so when i go like this you can see it let's actually do this let's take let's get rid of this hidden for now because it's not going to make any sense if you can't see everything so let's go and actually start designing this so for you here in the nav i don't have any classes so first things first i want to put all these on the same line some say class equals quotes let me do command b to close out my my tab on the left and here i'm going to say flex so this essentially is like flexbox where you save it so everything's on the same line next i want to space these evenly so i'll say justify oh what happened just defy dash between so this kind of like justified content space between so i'll save it here so now we've got some spacing next i'm gonna say items center and then we'll have the height to be 16 so i'll save it like this and let's do this let's do the background so the order out of the background be bg dash and i'm gonna add a gradient just to be fancy you can see it already tells me one so i can say bg gradient dash two dash r and then i'll say from dash purple dash 700 to then space and say 2 dash purple 600 so these these values right here are just pretty much colors and it's like two from into basically a gradient and it's saying put these two colors here and then i'm going to say text white and this is how you change the color text so i say text dash the color so text white i want to say text red text blue you get the point so i'll say text white and then i'll just say relative here so i'll add a position absolute but if not we can keep it later but uh let's just save it now and have a little nav bar so pretty much here this is a basic flexbox spacing between centering the items height is 16 so if i go here and just type in um height and also i'm going to go through every single thing but like for the first part i'm just gonna do it but i can see here for rem there and then you can increase decreases it and then there's a gradient so let's do that say gradient and pretty much if i scroll all the way down because right now on desktop you can see like it's a bg gradient dash 2r from green to blue like that's literally what we did beauty graded to our base step i just changed the color to purple and then text is white and then just relative and that's pretty much that's basically telling css so now let's just continue adding some more styles to this so next thing is here let's do this i want to show you the hidden part first now because now we have this visual done so now for the nav menu let's do this let's say hidden now and that's right here with the uh this div here so add hidden to this next md block so now it's there now we have bars now for the bars i want to actually show hamburger many bars let me show you this cool website so here on this website called heroicons.dev and you can see the guy that made it and pretty much this is compatible with css so you literally can search whatever icon you want so the one i want here is just let me just say menu and i mean you can change whatever one you want to well let's just click this one and right now since i didn't change anything defaultage copies the svg code so that can go in here and they have like custom things if you need like react stuff for jsx but now we can go to the bars delete this here let's press enter and then i'll just straight up copy this svg code so now you can see it looks like this so when i save it now you can see we have bars right there so i actually increase this so now go inside the svg changes to like eight width and height so it's a little bigger and then let me check the classes on the actual div so now we have px for creative pointer and let's do this let's do there's a problem right now if i scroll to desktop like it's chilling so what i want to do is say on the bigger screen size of 768 i'll say md and i'll just say hit save it so now when it reaches tablet view it just disappears now it shows the the now links so the menus there that's pretty much it so let's finish up the hero section and then i'll add the javascript to show you like the drop down and then we can end this off so let's go here under nav let's press enter i'll do command slash make a comment i'll just say hero section here i'll press enter and let's just create a div so let's say dots and then here let's do this first because it's not gonna make any sense let me press tab first and then let's just say hero save it and now we need to get an image so you can go to any website that you want but i just pretty much let me show you real quick i'll just drag my image over just to save some time so let me just do this command b and then let's go here and let's drag this image into images and this one just called img.uh jpg it's just this pick right here you can go to unsplash pixabay there's another other one called pexels.com any any picture it doesn't matter but uh once you get the image you can go in and for telling css this is one way to add a background url so here instead of doing class you say style equal quotes and we'll say background dash image colon then url parentheses parentheses and inside the parentheses will pass in the actual file so let's say quotes dot slash images slash image.jpg so now if i save it we got a little image so right now there's no height set so the way to set a height is you say h dash green and this sets a 100 viewport height so command b and now you can see we have this black screen so the problem right now is not centering or positioning our image properly so let me just go back here so now let's add the classes to position so bg dash center and again if you're like one of these magic codes i'm just typing literally if you need to look it up just go in here and type in uh like bg dash center and it'll show you like the background positioning you can see here so here we go bg center and then uh let's do bg dash cover and then let's just say center here so i'll save it and now we got our image right there okay so now let's go inside the div now so right by the hero just delete this word and then let's create another div so i'll say dots then i'm going to say text dash center so i want this out of center text and then i say dot font dash bold so i want bold font press tab and then in here we'll have an h1 so i'll say h1 and then we'll say dot and then we'll say text dash for excel and then i'm going to have another class called mb-10 so margin bottom 10 so that i have some spacing on the bottom of this text then i want to have it to be purple so i'll say text dash purple dash 600 and then also when i hover it i want to say dot hover colon text dash white and then i want to have dots duration dash 300 so press tab here we'll save it and nothing is going to happen because we haven't actually added code so let's just say choose your colors inside of the h1 and there we have it so the text is kind of small you're like i don't like this so what we can do here let's do this we'll say large because again if i go back look up media queries it's not really large lg but uh pretty much is 10 24 pixels so i'm going to say four where's it at each one here you'll say lg colon i want the text to be dash 9xl size and then on the tablet i want to say small colon or small um margins so i think 640 will say text not more that mean midi query we'll say text dax 6xl and then we'll have text for excel so now right now it's shrinked and then it'll close or slowly grow like that that's just the way i did it i mean there's probably a hundred ways to make it different but feel free to let me know in the comments and pretty much here we can do uh let's do this i think i'm not sure why it's not uh i'm not saying right now so we'll fix that let's add up the code first and see why it's not centered but uh under the h1 let's create an eight tag and this is basically just a little like button so let's say a dot text dash white and then we'll say text xl dot center and then we have dot trans form and then we have another cloud dot hover colon scale dash one one zero so that's again that's how you create hovers and then you have the property then we have dots duration dash 300 so i'll press tab we'll have the just put a little hashtag for now and then a table say explore and i'll just save it for now so that's what we got and let me see [Music] for some reason the uh not sure why let me see let's do comment share c console let's refresh yeah so i don't know why it's not uh let's add the svg really quick first and then i'll try to figure out what happened but let's go here and let me just type in arrow and i think i picked yeah this look the same yeah i need this one right here so arrow narrow right just click it and then like right after the e and the explorer word but we're still inside the closing a tag we'll just paste this svg so save it now and then for the uh let's see yeah the height the width and i'll say what you know i need to add um where is it at so i realized that the issue right now is the value center isn't actually a value from tell when i just made that up and i'll see why in just a second but right now let's go back to this right first div above or below the hero session comment let's say flex and then i'll save let's do this flex justify center and then we'll say items dash center so i'll save that that brings it to the center and let's copy this exact line and let's just replace this right here so now we got it like this and then also i want to add a uh on the svg i'll put margin left to go spacing action so now the transition is working and that's why i was not able to get it work earlier so now let's show you what happened and why did i actually put the word center instead of this code originally the command b so cool thing with uh tailwinds you can actually make these classes where it's essentially like a one word or whatever word you end up making and then it essentially can be applied to any style so if you notice you repeat particular code over and over like this example is kind of uh i'd say they're very separate but if you've had like a cards component where it's like 10 cards you'd most likely have the same class every time it'll just be a pain you know adding it in manually so for here you want to go to your src styles.css that's right we have all these tailwind lines and then here you call your class whatever you want to name it so i'll just call this one dot center curly braces and then you'll say at apply and then you'll pass in the values for the class that you want this dot center class to have so i'll say flex justify center and then items dash center which is essentially like a line item center they'll have a semicolon we'll save it here and now i'll go back to nshml i can go in so we have flex right here for the svg explorer we have flex and then we have justify center and then we have item center so delete highlight those delete them so i'll save it for now just to show you so now you see the arrows like all messed up and i'll just say center and now if i save it it doesn't work again so that's another thing too then you go do command j and we just got to make sure we um do npm run and then build css and that should fix it so now we see that it is working here and then we can go to where's it at right here delete flag just by content and item center and then just pass it in center save it here and it's back to normal so now when we go refresh it is just like this so now the last thing we want to do is create the mobile menu because right now it's kind of useless and then you can build upon it and you know get fancy with it so for now let's make sure i have uh the actual code or the id so let's see go back to the top this is this is the section right here the nav now so let me see i got id bars okay we need id bars and then i want to have menu so i think where'd i put it yeah id menus here okay perfect so now we go to app.js and this is basic javascript again you can refactor this make it uh cleaner but uh this is like the most straightforward easiest way i'd say to just get started so i'm gonna say cons bars and we're gonna say equal to document dot query select tour and we're going to target the bars id i'll do shift alt down arrow now i want to target the menu id and i want to change that to menu so let's go here and then let's add an event listener bar so i'm gonna say bars dot add event listener we're gonna pass in a click event and then pass in the callback function here and essentially we're going to say if menu dot classlist dot contains the class hidden then i want to also check and if the window dot inner width so make sure it's a capital w width is less than 768. outside this i want to say menu.class list dot remove hit it so save it now and right now if this worked we click it and now you can see that it displays his block so what happened is it's essentially hidden and only displays block on tablet or bigger size screens so when i clicked it it removed the hitting class so now it's essentially display block now the issue is it's not looking like the mobile menu so what we need to do is say menu dot class list dot add and this is the way i did it again there's probably a bunch of ways to refactor this so feel free to comment down below and here i'm just gonna add in a bunch of classes so the way you do it for this is you say quotes flex and then comma and then next line you'll say the next class or flex dash column comma and then we'll say the next one will be text center comma the next line will be bd-purple-600 comma and then we'll have width to be full so it spans the full width of the screen and then i want to have this position absolute so now we're actually going to utilize this and then we'll just have it top dash 16 so it's essentially the same height as in the navi 16 h-16 so it's gonna start like right below it so i save this now i did everything right now we got a little design so again you can edit these these values and you know refactor them make it look cooler but that's just like the most simple way that i made it and then outside of this curly brace we'll just put else uh hold on yeah else curly brace we'll just say menu.class this dot add hidden and now the issue is one when we scroll back like watch as i go here and then i shrink it back it's like retaining the classes that we added and it just doesn't look good it doesn't make sense so we need to do and this is one way i did it feel free to let me know alternatives i just looked at the window and i added an event listener oh come on event listener and basically i'm just looking for the resize event and i'll pass in the arrow function and then pretty much we're going to say if window.enter with is greater than 768 pixels then i want to say menu.classlist dot add hidden and then i'm going to say menu well yeah let's do that let's copy this entire media classes add part copy it here and then just change that to remove so save it now so now if i open it and then i drag it over it it changes and the last thing is right now if i click if i click on something like it went to the next page we didn't create the about page but like this is just i put that link there the problem is like if i click on home you'll see it's there but uh like about it's basically not there so one thing you could do again it looks like it's working but if you wanted to you can just say another menu dot uh add event listener and we're just passing a click and pretty much whenever we'll do the arrow function again whenever we click on it we'll just say menu.classlist dot add or just hide it again so here and basically it looks like that so this was just a super simple website with tailwind css so if you enjoyed this hit that thumbs up button subscribe if you're new to the channel comment down below if you wanted me to make one with react or making more complex website which is html css let me know in the comments below what you think any cool ways to refactor this code and aside from that i'll see you in the next one peace

Channel: Brian Design

Views: 15,527

Keywords: tailwind css, tailwind css tutorial, tailwind, tailwind ui, tailwind course, tailwind css website, tailwind css landing page, how to code a website, how to make a website, tailwind css animation, tailwind css navbar, tailwind css crash course, tailwind css 2.0, tailwind css vs bootstrap, install tailwind css, html, css, javascript, html css website, how to make a website with css, css framework, best css framework, best css framework for developers, tailwind css github

Id: Awl-CPXgpGs

Length: 35min 24sec (2124 seconds)

Published: Tue Dec 29 2020