Tailwind CSS Crash Course

[Music] this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev Mountain is a 12-week design and development boot camp intended to get you a full-time position in the industry to learn more visit dev mountain comm or click the link in the description below what's going on guys in this video we're gonna take a look at tailwind CSS which is a utility first utility based low-level CSS framework and we all know that there's a bunch of CSS frameworks out there bootstrap materialized and so on but there's a fundamental difference between tailwind and these other frameworks in that the other ones like bootstrap they're they're based on components pre-made predefined components like nav bars alerts cards all that stuff progress bars and you just kind of stick that in your website or user interface and the issue with that and not that I'm bashing bootstrap or any other framework I'm not saying it's you know better or worse or whatever but a lot of these sites look the same and you can tell right away that it uses bootstrap or it uses materialized what tailwind does is it doesn't give you predefined components like nav bars it gives you just a huge set of utilities utility classes to build your own components so your components are much more custom they don't look like everyone else's and of course you can customize bootstrap with sass and all that but tailwinds that the it's based on utilities rather than components and it's much lower level alright so we're gonna take a look at how to set it up how to kind of create that just as a little build process and look at some of the utilities create a couple UI pieces I guess a card and an alert stuff like that alright so one thing I wanted to show you is if we go down to core concepts and we go to utility first they give you this example this little box here we're actually gonna build something like this along with some other things but this is the traditional way of doing it you have some classes you have styling you know all your CSS for each class with tailwind you can actually create the same thing without writing any CSS just using utility classes and notice there's no card class or anything like that they don't use navbar alert classes it's just low-level stuff like you know max width or height margin so margin on you know X and y-axis flex you can use flexbox height and width so things like that text size and so on colors so we're gonna take a look at some of the utility classes and so on all right so to get set up if we go to installation we can install with NPM or yarn you can also integrate it with web pack with gulp even like laravel mix and there's also a CDN you can use but there is some limitations when it comes to like using directives and using plugins and so on and we're not going to get into that stuff it can get really complicated I just want to give you some examples of you know the utility classes and stuff alright so let's go back up here we're going to install it with NPM so I'm going to jump into vs code and I just have an empty folder here let's clear that up and let's do an NPM and NIT dash Y which will just give us a package dot jason and then let's install tailwind CSS so make sure you don't do tailwind and make sure you do tell and CSS it's a mistake I made early on so now that's installed let's let's go back to the documentation and we want to add these three lines to a CSS file basically our source CSS so I'm going to just copy those and I'm gonna create a folder called source and in source let's create a file you can call this whatever you want I'm just going to call it style.css and paste that and then save it now we need to run a build command to build out the CSS that we want to include in our HTML so I'm gonna create another folder called dist or public or whatever you want to call it and this is where we'll have our index.html and this is where we're gonna have our style sheet I'm just going to call this one style can call it output or something if you want alright now as far as the build process goes let's open up our package Jason and let's just add a script here we'll call it build build : CSS and what we want to run is tailwind build and then we want the source file which is source style dot CSS and then the output we want to do - oh the output is going to be the distal dur stylesheet so let's save that and let's go down here and let's run NPM run build CSS okay so that's going to build it out and if we go to our dist style CSS you can see that now we have a ton of stuff here basically these three lines these three lines are importing certain parts of the framework so we have base components utilities so basically the stuff you're seeing here is like is the base it's it's basically just like a normalized CSS and then if we scroll down you can see just a ton of utilities for margin padding you have utilities for certain screen sizes for hover and stuff like that which I'm gonna get into all right so let's close that stuff up and go into index.html and let's go ahead and add a link to style CSS which is the the compiled one and as far as a title I'm just gonna say business so it's just I'm gonna add a couple user interface components that that relate to like a business application and then here well for now we'll just say hello world and then we're gonna open this up I'm gonna use live server which is a vs code extension and there we go so now that CSS file is hooked in so now we're going to start to look at some of the utilities so first thing I want to look at is colors okay so if we go down or background colors so right here if I go to background color we have all these classes that give us all these different colors now you can have a config file in fact we're gonna create that in a little bit where you can set your own colors if you don't want to use these but you can see there's just a ton of different colors and shades that we can use by default so let's actually add a color to the body so we'll do class let's do BG - blue now we have different shades here I'm gonna use 700 and if that drop down there I believe it comes from an extension I'm using called HTML CSS support I believe that's that's where that comes from well let's go ahead and save that and check it out and now we have our blue background all right so let's let's create a component we'll create a simple button so in our HTML here let's go ahead and add a button tag and just going to use Emmet to add some classes here so for the color will do another blue but different shade let's do 500 and I want to add a color for the text so we can use text - and then a color I'm going to use white if we want to make it bold we can use font and bold okay so we have a ton of these utilities we can use to do just about anything as far as padding we can do py which is padding on the y-axis so top and bottom - - and I'll go over the you know what that means in a second and then on the x-axis so left and right padding px let's do 4 and then I also want it to be rounded so we can add the rounded class and then let's just say fine friends so we'll save that and take a look and now we have our button and notice there's no BTN class or anything like that like you would find in traditional frameworks it's me it's all made up of these low-level utility classes and what's really cool is if we want a hover effect we don't have to add any extra CSS or anything we can simply add a hover : and then whatever we want so for instance the color will do blue 400 and if I save that and we go back now you can see it has a hover effect okay so we can do things like that now let's see I'm gonna add a container there is a container class like there is and just about every framework and let's move the button into the container div here and if I save this and I go back notice that it's not pushed over by default like it is in most frameworks if we look at the CSS for the container it's just a max width there's no margin auto there's no padding it's very uh Nepean ated this the framework is very uh opinionated it doesn't assume that you want to push it into the middle all right and this size here this max width will change at certain breakpoints so there you can see it goes to 768 then it goes to 640 and then it goes to a hundred percent on small screens all right and you can change those breakpoints in the config file which I'm actually going to create in a second now if we want this to be margin auto and maybe add some padding we could add utility classes so we could do em X which is marginal on the x axis auto and for padding we could do px two and now if I save that we go back now it's in the middle okay now if you want it to be in the middle and have padding by default you can net you can do that within the config so let's create that config file if we go back to the install installation page here it shows us how to create a config we just run this npx tailwind in it so let's do that let's run NP x tailwind and knit and it creates this file for us and there's a whole bunch of stuff we can do in this file so if we look at let's see configuration right here you can see we can add you know font families we can extend color so we can add our own colors if you don't like the ones that are provided you can change the the that note the margin and padding numbers you can add to it you can change breakpoints so for instance if you want small screens to be on a different number of pixels you can change that so there's a lot you can do but what I want to do here is let's replace this with container and in here let's say we want Center to be true and padding will add to R M so now if I save this and go back to my container class I can remove these two utilities I don't need them because by default if we take a look now actually that didn't work because we have to rebuild the CSS so we have to run the build command again okay and then once we do that now you can see that by default the container is centered all right if we look where is it right here so now it has margin right and left auto padding right and left to ram by default all right so let's see next thing I want to do is show you how you can extend you can extend these utility classes within CSS if you want if you don't want to put it in your markup so for instance if I want to create a button I'll go right below it and if I wanted a button with you know traditional classes like BTN BTN - blue and we'll just say find groups if you want to do something like that you could go into the source stylesheet here and add those classes so BTN and you can use a directive here okay so there's a concept of directives and there's one called apply that allows you to apply the utility classes inside here so if we want font bold we can use that if we want py - we can use that px - for and rounded so I'm basically doing the same thing that we did for the other button only I'm doing it with with this apply directive in the CSS so button blue and we can say apply BG - blue would we do five hundred and let's do text - white and then let's do BTN blue hover and obviously this is this is more work than doing it the other way but I'm just showing you can do this so apply BG - let's do blue 400 for the hover so I'll save that and nevermind these errors here it's just because V s code doesn't know what the hell is going on I think there's a plug-in for this but this is all we're gonna do in this file now we do have to rebuild it okay and then if we go to our applicator or our page here you can see that we have the same exact button so he did the same thing only we use the apply directive and the CSS as opposed to putting the utilities right in the class in the HTML all right so that's that let's create an alert component actually before we do that I want to just show you about show you the margin and padding so if we go down to right here spacing padding you can see the conversions so basically p0p - anything is going to be padding all around so X and y-axis P one is going to be 0.25 Ram p2 which is 0.5 P 4 is 1 R M then you have py which is just the y-axis gives you the conversion here and then we have P X P T which is padding top P B padding-bottom PR PL and the same with margins okay so it's the same exact thing except it's M instead of P so really really nice you know utilities for for spacing and then for width for height and width we have W - and then whatever so W 1 W - 2 was 0.5 RAM and goes up to like W - 64 but again you can add add more in the config file or you can change these in the config file you also have min and max width which is just min W - so max width max W - SM which would be 24 m so you can see there's different utilities for height and width and max height and max width and then for flexbox so you can basically add a class of flex which will turn it into a flex box and then you have classes like flex row if you want it to be a row column flexwrap a line so if you want to align items we have items stretch and it gives you a nice example here of what the class of item stretch on the container would do if we do items start it'll put it to the top item center will Center it they also have justified content which will a lot align its horizontally so justify start justify center so you can do all this stuff with Flex box without having to act without having to do any CSS whatsoever and one thing that I think I meant to mention but I forgot is this is not a crutch you should not go from from learning HTML to something like this you need to learn CSS and learn flexbox first and then use this as a tool to to make to maybe build things quicker or in a more practical way but it's definitely not a crutch alright so back to the tutorial here let's go to close that up let's go to our index.html and let's create an alert component so I'm just gonna put a comment here so this is a button component and we'll stay within the container and let's build an alert component so we're gonna have a div so I'm gonna use Emmet here or have a class of BG - red - 100 as our background let's add a border let's add a border color so we can say border red I will do border red 400 make it a little darker and let's do text red text red 700 and add some padding so P X - 4 and let's do py - 3 and let's make it rounded and you can position it so we'll position it relative and then let's add a margin on the top and bottom so my - 5 okay we can give it a roll attribute of alert and then inside here we can put whatever text we want I'm actually going to add a strong tag here with the class of font bold and normally if you use an alert in bootstrap it just it defines all this stuff for you you have no control or what it looks like that's why it all looks the same I mean you can customize it but it's it's you know it's extra much extra work so in here let's just say alert and span let's do and here I want to show you something so I'm gonna say I'm gonna give it a class of block by default but we can use these utilities sm LG for large screens medium I'm gonna say for anything small and up I want this to be in line okay so basically we have like mobile or extra small than small and large are sorry small medium large and extra-large so what this means is any screen size is small and up are gonna be in line instead of block but by default it's gonna be blocked so in this case this on mobile screens it'll be block all right and let's just say like please update you password okay so let's save that and take a look and you can see we have a completely custom alert now so we don't have a premade class that gives us a certain amount of padding or a certain color or anything like that we define all that which is a little extra work but the upside is you have a custom you know component custom user interface so let's see let's let's create a little card component like the one I showed you earlier on the website so I'm gonna actually create inside my dist folder an image folder cuz I'm gonna have my logo in here so let me just grab that real quick and I'll have all the code for this and stuff in the description probably in a code pen but you can use any image here I'm just using my logo so let's go under the we'll go under the container as well because I'm gonna use one of the utilities for max-width and I'm gonna Center it so we don't even need the container so let's say this is a card component and I'm going to use max width small so basically it's gonna it so it's gonna gonna be I forget exact REM units but it's not that wide and let's move it to the middle so margin X margin on the x-axis Auto and I'm actually gonna use flex here I'm going to make this a Flex container or flex box let's do padding all around p6 let's make the background white let's make it rounded and we can do rounded - LG which will make it a little more rounded and then we can even use a box shadow class so we can do shadow - Excel all right and just doing that you can see what it gives us okay and if I did like max w LG it would be a little wider so let's add some content inside of here now I don't want the any of the content to shrink so we can actually use a flex - shrink - zero class here and I'm gonna have my image in here which is what is it yeah IMG / local only and then I'm gonna add a couple classes here so I'm gonna add in height and let's do H 12 and W 12 and to see the conversion for that if we go to over here let's see so right here H 12 is actually three REM and W 12 is three room alright so underneath the image so this is one flex item so these should be side by side by default since I use the class of flex here so next I'm gonna have another div with a class of ML because I want margin on the left let's do ml six and let's do PT one so padding top and we'll have an H 4 and so let's add some classes to h4 we're gonna do text - and you have all these two XL 3xl by default all the headings that they don't even have us any kind of font size it's just a regular font size but we have all these classes we can use I'm going to use Excel and let's make it grey you will say text gray let's do 900 and in here I'm just gonna say Travis new media and underneath that let's have a paragraph with the class of text base we have all these different tech classes we can use for things like spacing and stuff like that letter spacing let's do text gray we'll make this a little lighter 600 and in here little just say you have a new message all right so let's save that and take a look and there we go so we have our own little custom card component alright and it's not gonna look like everyone else's in let's say of course they use the same utility classes same padding and all that and colors but you know it's up to us on how we want this to look all right now I think the the rest of the stuff here I'm actually gonna paste in because I don't want to just type out all this HTML I'll just paste it in and then kind of show you you know what's going on so let's go under this card component and let's say card columns so basically just I want to have flexbox that has two cards within it with two images so I'm gonna paste this in and I'm gonna go over it and we close that up I do need two images and I'm gonna bring over again I'll have this code and the the image links in the description okay so basically what I'm we're starting right here and no I'm sorry we're starting right here so I'm creating another container I'm doing margin top five to push it down this MD flex what this is gonna do is make it responsive meaning that on medium screens and up it's gonna be flexbox so it's gonna it's gonna go horizontal these two cards that that I created all right but on smaller screens anything smaller than medium it's not going to be flex it's gonna be it's gonna go vertical okay and that's what we want so that's how you can create responsive layout says just add flex on specific screen sizes then we have a div here flex one is just going to make it even so there's two divs here with flex one so they're both gonna be the same width I just have some colors and text Center rounded so stuff we've already used and then here inside we're gonna have another flex on large screens because basically it's an image with some text next to it on large screens I want them to be side by side anything less than that then they'll be on top of each other okay and then we're going to Center them item Center on large screens so when we use flex so anything that has to do with flex here we're using LG to prefix it then we have our image so on large screens is going to be w 64 I forget what the conversion is on that and then anything that's under large screen it'll just be 100% because that's the default okay and then for this right here this did this this wraps the text so margin top right here we have upper case you have upper case lower case text in the ghost changing the color making it bold then we have a link here and we have like font semi bold or may saying on hover it should be underlined and then this is just the same thing just a different image and text alright so let's save that and let's take a look and there we go so we have these two flex items and remember we set it to medium flex so once I hit below medium which is right here I'm sorry not right there right here now they're stacked okay and it's completely responsive so that's medium and then large remember we had flex lodge on the inner boxes I almost just pointed to the screen like you guys can see that so when we hit large that's when this is flex right so it's they're side-by-side when we go under lodge then they're on top alright so you can get construct really cool responsive layouts using nothing but utility classes you don't have to add media queries or anything like that alright so let's see that's that now I'm going to do is I'm going to add a navbar component so I'm gonna go up to the top here and let's see we're gonna go above the container still within the body of course and let's say navbar component and of course there's no actual navbar component it's made up of all these utilities so I'm going to just grab this and paste it in and we'll go over it so we have a nav tag we're using flexor centering all the Flex items we're justifying between so basically all the remaining space goes in between we're using flex wrap and background gray padding six then we have this first div here which has the title or the logo whatever you want to call it which is centered and let's see right here we have W full and this is just basically with a hundred percent and then we're going to do flex on small screens to make this a responsive navbar all right let's see then we just have our links here so on small screens we're gonna set them to inline block I think that's pretty much it this is just a login button we have here that is gonna be on the right side so let's save this and see what this looks like actually let's add some some spacing right here so I'm gonna go to let's go to the container right here and just add an MT 5 and now we have spacing and it's a pretty nice-looking navbar you know and it's not like it's every navbar that uses tailwind is gonna look like this because you can create anything any kind of navbar you want so once I hit small which is right here there we go so we have a nice little responsive navbar alright then you could see the whole interface is responsive and we didn't write a line of CSS well we did so we did the the apply directive to create this button but that's just because I wanted to show you how to use it but I think that's it guys I'm not gonna go too much more into this because it will just be you know it'll be repetitive my goal for this crash course is to introduce you to tail wind to show you how to get it set up show you how to create a couple custom components using utility classes create a config file and that's that's pretty much what we did all right so thanks for watching guys if you like this video please leave a like and I will see you next time

Channel: Traversy Media

Views: 340,710

Rating: 4.9610252 out of 5

Keywords: tailwindcss, tailwind css, css framework, tailwinds css

Id: UBOj6rqRUME

Length: 30min 31sec (1831 seconds)

Published: Wed Jul 24 2019