Tailwind CSS with Vue

hey developers today we're gonna look at tailwind CSS we're gonna take a look at adding tailwind CSS to a view j/s project we're gonna get that set up and then we're gonna look at some of the utility classes that tailwind CSS offers so let's begin hey if you don't know my name is Eric I'm a full-stack software developer I'm also a big fan of UJS angular react and if you guys like these type of videos make sure you click that subscribe button okay so tailwind CSS it describes it sells itself as a utility first CSS framework for rapidly building custom designs and you can even see right here they have this little custom little sum this little snippet of code right here and the creating a card and if you have been watching my previous videos I mentioned that a lot of these these other material design frameworks these view UI component frameworks a lot of them offer some sort of utility classes and I always say if you really want the best utility class library out there then I would look at tail end CSS now this isn't the same thing as a view UI component library so you're not going to see ways of creating just adding in one bit of piece of code to add in a whole card know this is adding a bunch of utility classes which is pretty neat so we're gonna get in into that and I'll show you how that works you can see right here this is a little example of some of the code that she'll be looking at when you install tail and CSS so I went ahead and created a brand new project this is a view app there's nothing in it I just typed in view crate and then I typed in view tailwind YouTube live and then I just chose the default options and it created so to get started we're gonna follow the documentation so if you look at the documentation there's the installation so it's easy as doing an NPM tailwind CSS so I'll go ahead and install it there alright cool it's installed so we do need to do a little bit of configuration to get this working as well as you can see here it mentions adding in this tailwind base components and utilities so what we can do is in our sources assets folder I'm going to create a new folder called CSS and then inside that folder McRib new file called tailwind CSS and I'm just gonna paste it in by the way my linter gives me a little bit of an error there's a way you can fix this I saw a I Stack Overflow article about it but I'm not gonna worry about it right now basically we're gonna use this tail in CSS it and then in my app view actually in my main view I can then import it in import assets CSS 2 and CSS so just want to make sure we import it in as soon as the app loads however we need to do a few other things since we are installing tailwind CSS we need to add a config file so as I mentioned here you can do npx tailwind in it so make sure you do that in the root directory of your project so let me make this a little bit bigger me hide this and pix tailwind in it now you can actually do an it - - full which I'll show you guys later but shows you every single option and tailwind but I'm just going to do the default - tailwind in it and you can see here it created the tailwind config J's file so that's this one right here and you can see this is where we can extend the functionality we can add our own classes that hook into the tailwind CSS system we can also override things we can add plugins if you don't know tailwind has a whole ecosystem there's actually tail awesome I found this github repository called awesome tailwind CSS that lists a bunch of the plugins out there so it adds things like transformations and you can even add grid and elevation a bunch of things that's not in the default tailwind universe which is really neat and you also have this variance which I'm not going to get into today because you can change the way basically the way tailwind works them so there's also the the tailwind CLI which you can kind of take Taillow in for a spin by you just if you had some of these classes that you wanted to use you can put it in your normal CSS file then run the tailwind CLI and you can output some CSS that would work in your project what we really need to do though to get this fully working is we need to use post CSS and that's what that that's what view is using under the covers so to do that we will need to create a new file called post CSS config dot J s so let's do that so we're gonna click new file and we're gonna call it post CSS config KS and I'm just gonna copy and paste this from the official documentation delete this delete this save it and what this will do is it'll make sure that as R we're running the development environment and then when we build that it's the Tailwind CSS libraries correctly inside our inside our app now one thing to also keep in mind is that and I if you look at the official documentation there's a whole video section and Adam laughs that actually does a few examples in view so I'll make sure to include that in the link in the description below but if you are running this in production you'll notice that tailwind CSS if you just run it it'll add every single class and those classes you probably don't want them all you only want the ones that you're using and there's a really cool plugin called purge CSS so if you look in the official documentation I think it's controlling file size you can see here tailwind original size 785 gzipped it's 78 kilobytes which is a little bit bigger quite a bit bigger than bootstrap and Bulma and some of the other ones however you can remove a bunch of unused CSS pretty easily using purged CSS so I'm gonna show you how to do that real quickly before we jump in so I mean want to run this command we're going to run this command and this will go ahead and install the post CSS plugin cool so now it says to add this in here so we can just copy this file this function in here and all this is is just kind of setup if I can paste it right and it says use all the paths so HTML and I me JSX file so I suppose it could delete that and then it's then inside your module exports you can add in this dot dot prep process E and V dot node and what this does is it means it'll only run if you're running it for paste it there there we go this will only run if you're running it for production so that way if you're running in development mode it doesn't try to do this because this would be some extra post-processing that we don't need cool so what this is doing is what this is saying is you definitely have to have if nothing else you always have to have this required tail and CSS and autoprefixer just so that it works but if you want to go above and beyond and actually reduce the size of your CSS bundle after it's built then you want to install this post CSS purge CSS I just think that's a quick tip if you guys don't know about it also another real quick tip I'm using this extension called tailwind CSS intellisense I would highly highly highly recommend installing this of using Visual Studio code it adds this nice little drop-down with all the different CSS classes that tailmon offers otherwise you're literally not going to know what they all are I'll stop your head I mean it's pretty I mean you get used to it really quickly but I would use this because it just makes me so much easier cool so I think we have this all set up now we have our post CSS config file which we have to have we have our tailwind config file which just defaults nothing we have our CSS file which we it'll recommends and the official documentation distilling base components in utilities and then we also have it importing in in our main file so since we have it all running let's see if it works so I'm gonna run p.m. run serve and that is going to go ahead and start the server and I'm gonna see if I see any errors and that's what I always do some localhost 8080 it cool came up and good so I'm gonna create I'm gonna go in just delete out some of the starting cruft that always appears I'm going to make this really small so here's the two routes home and about and then opens up the router view and if we look at the routes we know that the home is the component home so if we look at the home component it's running it's showing the view logo and the hello world component which we don't care about cuz we're not gonna use it but we are going to start doing this we're gonna put stuff in here okay now we have an empty page except the home and about which let's let's go back to the app view and for right now we'll just comment this out because we don't care about it we go back okay we have a big empty blank space page perfect so first thing we want to do is let's see if we can change the background of this and you can see it does come up with some default styles I'm just gonna delete them all I don't care about any of them oops I found a bug I actually had the post CSS config file in the source folder and it should be in the root folder so if I move this down okay so we have a blank screen here so let's see if everything's working I can add some classes to this so if I do class you see here now I have I can add backgrounds if I wanted to so let's see why I do a background I don't know 900 I save it I don't see anything but maybe because I don't have any width or height so I'm gonna do W that's for width and you could see here in the right hand side it tells me what it's doing so W full is with a hundred percent and then I can do height I don't know let's see if we want it for the full screen which is a hundred VH cool so now we have a big black background which obviously we wouldn't want but maybe we want I don't know a little off gray well two hundred there makes it a little different ok so now we have our background but let's go and look at our home component we don't have anything in here right now just add this class home which doesn't have anything in it so let's say we wanted to make let's let's play around with this let's make a title here so we'll do h1 welcome ok there's a big welcome it's in the top left hand corner but obviously well let's do this we can app view we can add margins and things like this so if we didn't want everything to be like in the top left hand corner we can let's add some padding so if we do P dash you can see yeah this p 0 64 these are different this is 16 R M so this is basically adding 16 Renn padding 16 R M so if I do something like this now our welcome is all the way down here I hope so that's a lot I don't know maybe we do I don't know maybe P let's see here P - 12 C here 12 oh yeah it's a little bit over to the left well for now that's fine we just kind of wanted to move it away from the the top left hand corner so I'm gonna go back to the home let's see what else we can do here so let's say we wanted to use flex well first let's make this a little bit bigger and add a class to this and we have text and we have all these text options we can make it text white X black there's text large I think just extra large let's see text large what does that do alright made it a little bit bigger I think there's even more Texas sizes than that let's see here we got text black so you can do red yellow green teal indigo purple here it is so we have XL to XL v XL let's see what does v XL look like okay so now it's big and in and right here it's pretty big let's say I wanted to justify it content display center do all the Flex things if you want so I can make it flex here I don't know I want to believe it's justify content so I can do justify Center okay so now it's in the middle of the screen it's pretty good and let's say I wanted to create a div now and I'm gonna have some I'm gonna have an image in this div and since we I sort of like to use any kind of of placeholder sites out there I think let me see if I think unsplash would work here so let me remember the URL it's HTTP source dot unsplash.com slash random and then under there we'll have a I don't know some image text so we'll have h5 some image information I don't know maybe a paragraph with lorem ipsum text let's there 20 C lorem c2 0 always forget the hot keys for this lorem that's fine so got some lorem text ok so now it's big old picture here with some lorem text at the bottom which is obviously kind of crazy here so first I don't want it to be justified centered I want it to actually wrap so there is flex wrap so now we have text at the top big see here this is sort of not lined up correctly so I don't want to add in and items I believe it's item Center that's the same as lying item Center so that's a little reason so let's give it a let's let's try to make this a little bit more manageable so I'm at a class to the image and I'm gonna put a height of I don't know 64 see what happens there okay so now it's you see here the image height is is 64 so let's add a width to it - lets do a width of 64 okay I see what I did here so I also need to add in a class here of flex and we'll add the same thing we'll do justify well we'll do flex instead of flexwrap I want to do flex believe it's flex column flex call okay so now it's showing up as a column and I want to item Center this and now since this is in a column and the items are centered we have this welcome at the top but this right here in this div we have this flex but we want flex column instead cool and now we want to add in the item Center cool so now we have the name and then we have this div right here with some information in it so we want to set I want to do this I'm going to set the background of this to gray I don't know 400 you see now I have this box around it and I'm gonna set a height and let's say a height of mmm I don't know I can do 10 that's really small let's do height of 24 still pretty small let's leave the hide alone let's change the width to 1/3 okay I think that looks better now so now we have this 1/3 of this image here this card that I'm creating and it has to welcome at the top the card in here let's add some padding to it so I'll just do padding I don't know 6/10 let's see what teddington looks like okay so now we have this padding ten around it we can also kind of mess around with the image let's say we wanted to have this be fully rounded so we're going to come back here and we can add rounded and we can do full and now it's a complete circle you can see here it's a complete circle if i refresh it it'll put a new one in there and you can see here that these this I have very sharp corners on this card so let's add let's change the card border border radius for it so to do that I can come back up here and add in rounded but I don't want it completely circular but I can do rounded I know let's let's try large let's you can also do it just different edges let's do rounded large here cool so now we have a little nicer rounded edges and then to make a pop I can actually add a shadow to it too so I can do a shadow I don't know let's do large okay now you can see it pops off the screen a little bit I want to pop it a little bit more so instead of doing shadow large I can do shadow I don't know extra large okay that's a little bit more you can see it's popping out a little bit more from the page as the sir information now this text looks not so great so let's say here we wanted to make some of this text look a little different I don't know let's let's just add text small for now if you wanted it make it small that's a little smaller let's make it bold I believe we can make it semi font semi bold see what that looks like okay now it's a little bit bolder and I know the small is probably not right how about let's see we can make it I think it's two XL let's see what two XL looks like okay now it kind of pops a little bit more and then this paragraph right here I can make him maybe DM feh and de-emphasize it a little bit first I want to align text online I think it's tech center yeah let's let's see if we Center the text and now it's all centered in the middle maybe I want to add a little margin top to the top margin top of for and by the way I am kind of stealing some inspiration from Adam Latins video and when he did something similar and created a card yeah okay so now we have we have a little bit more padding at the top or margin at the top which looks so good we can also maybe want different color on this so let's say we want this lorem ipsum here we're gonna want to put this in a span and now i want to put in this one I'm gonna make this text color text let's see here let's say I want to make it teal so it stands out a little bit more so can't even see it at all cuz it's really light on a kind of dark background but let's say we pump this up to 900 okay you see a little bit good maybe that's not the best color what else do we have like we have text teal maybe a darker maybe indigo would work better or purple let's say we do purple 900 wonder what that looks like okay so now it's a purple 900 and let's make it and a bold font let's see we can do font extra bold does that look like okay now we have an extra bold font right there which I think makes it stand out more so you can see what I'm doing here it's just really easy to to add these utility classes wherever I need to I mean just this after like five ten minutes you know I made a decent looking card you know now doesn't look completely ugly but it's you know what works we could also instead text Center maybe you do text left right here now it's all left aligned yeah so you could do all sorts of things there's so many utility classes things like that this also this picture right here we might have it might be a little not aligned correctly because of the height and width restrictions we put on it we could do something like this so where the class is H 64 there's object so I can do object cover and that might make it kind of position it a little bit better if we think we don't have a position correctly we can even do something like this let's say we want to at the top we want to create another image and we'll use the unsplash image again random and this time I want I'm gonna use another class here I want the width which I can push W to be full and I'll give it a hundred percent width okay and I'm going to delete the welcome up here so I just kind of want it near the top and now you can see here this width is a hundred percent let's make the height a little less I don't know let's do the height of can I do one half I don't think I can do that I think I can just do a height one and I know 48 okay that's way too small 64 okay that's the height of 64 obviously it's all sorted so maybe this time we use something like object cover on it object let's see object cover okay so now it's just cutting it off the top there now let's say I wanted to push this card up a little bit at the top right here so we can do that so what we can do is we can use negative margins and that's another class inside here so this div controls pretty much everything in here so I can do on negative em which is negative margin I can do negative I don't know 24 and now you can see it pushed it on top of the picture which is what we wanted and if we refresh it and get two new pictures are they're gonna be the same because just the way it works but now the picture is pushed on top and this didn't take too much work or effort to create a pretty basic design here but you know works cool so one I guess I could show you one other thing is we kind of hinted at you can make changes to everything so if I go this post of this tail-end config I have this extend right here and I can add in my own classes or my own margins and things like that that it doesn't exist so more examples that is maybe I want to add a different color so I'm going to add a color called let's call it Eric we're gonna color Eric and we're gonna make it some I don't know CD BFF oops I have a typo and you put s in here so now should be able to add air except ago BG - Eric and save it cool now I got my my blueish background for Eric because I added it in there so you can see you can definitely go through here and just change all the different values that you want one thing you can do too if you want to kind of take a look at them all is you can run MPX tailwind and knit - - full and what that'll do is it'll well it says it's already exists so I won't do it but if I let's say I delete this file just fine I don't really haven't done anything and I run this again in the root folder it creates this tail and config file file but you could see it now it's it has every single value I'm gonna save it let's see here there we go so it has every single value in in the whole template so I see all the different screen sizes all the different colors the gray red orange yellow or green teal blue I can change any of these values that I want and I kind of get an idea of how it all works of course I don't recommend doing this because you don't really know what you changed I rather just have the other file where you can just change one thing at a time so if I go back here and I delete it and then I run till in CSS without the - - full then I just get the normal tailwind config file which looks like this which is good for me and by the way since now I got rid of Eric if i refresh it it's gonna be I'm actually have to start the server again you'll be back to white because the Eric one doesn't work anymore so I'm gonna change this back to gray 200 makes a year um it's back again let's let's see here let's see let's see here if we go gray now let's do I know let's do green 300 okay now we got a little bit of green background so one thing one really important feature that I haven't hit on of tail and CSS is that it has these looking at documentation and look at this layout container you have these different screen sizes small medium large or extra large and usually the way you can basically basically do a mobile-first layout when you're working with CSS with tailwind CS so like for example you can see here if I make it to smaller screen size it looks kind of weird it just squishes everything together but what happens if I wanted to let's say get rid of this picture up top on smaller screens so we can do that by going into our home component again and this is the image in the class so if we put hidden here you see here it just disappears but I could do it something like this where maybe on small screens so you just put SM and you put colon or you do and do all different screen sizes so either do SM : MD LG and these are different breakpoints so let's say I do it's hidden by default but on when you get to large screens it turns into block so now you see it on the large screen but if we reduce the size it disappears when we go to that threshold so if we look here and we start changing playing around with the size see it's 12 15 12 okay as soon as it gets below this large 1024 it it disappears so this kind of opens up a bunch of things you can do now that you can basically do the mobile first layout and then have it change so so you can play around with this and mess around with what you want have happening on different sizes by just using this MD or LG and with a colon and you can do all sorts of fun things let's see here I wonder if I want to do this text right here this span let's say on small screens I'm going to have the text be purple 900 but on larger medium screens I want the text to be I know teal 200 so what happens if we do something like that so now you can see it's teal 200 on these larger screens but if we get smaller it's a certain point it turns into teal purple 900 so that's that's that's just an easy way of changing things around alright I think that's all I'm gonna cover today I would love to hear what you guys think of tailwind I know we just went through a bunch of different concepts let me know when I comment below I appreciate it thanks

Channel: Program With Erik

Views: 40,232

Keywords: tailwind css with vue cli 3, tailwind css, tailwind, tailwind css vue, tailwind vue, tailwind vue cli, vue cli tailwind, vue cli 3, vue cli 3 tailwind, vue tailwind, drehimself, vue with tailwind, tailwind with vue, tailwind css vue cli, EriK Hanchett, Program With Erik, Vue setup, Vue starter tailwind, How to setup tailwind with vue, tailwind css tutorial

Id: ZAjUGkhqUP4

Length: 31min 16sec (1876 seconds)

Published: Mon Dec 09 2019