Create Modals With Tailwind CSS and Vue Is Super Easy!

hey developers today we are going to create a modal using tailwind CSS I'm gonna show you guys how to get started with using it with view and yeah we're gonna have fun and we're gonna take a look at what it offers so here's a quick example if you click this open modal button you can see the background darkens we have this hi from a modal this nice window here we can click close or save and it disappears again so real simple modal but you see this was really easy to create in tailwind so I want to show you guys how to do it and yeah so let's get begin oh yeah before we start let's have a quick word from our sponsor I just want to take a moment and thank our sponsor dot tech domains now if you're anything like me you probably love domain names and you love to buy ones that are short and relevant but also most importantly available and that's what's really cool about dot tech domains there's a ton of really cool domains available and the dot tech domain is broad enough that you can kind of understand that this is technology related as well a lot of really cool sites are using dot tech domains like Hollywood Tech Viacom detect even personal sites like Austin Evans Tech so if you guys are interested and you want to search for a really cool domain name go to go dot tech slash Eric and then search for your domain name if you end up buying it you actually get up to 80% off and one year in five year domains so go to go tech slash Eric and go ahead and pick up that domain name thanks alrighty so we are going to take a look at tailwind CSS with view J s and if you don't know what tailwind CSS is it's basically a CSS library that has all these utility functions that you can add to your classes so instead of having to write them out in a separate file or or inline them you have all these really nice utility classes like MB might it stands for like margin bottom and M X is for your X access or you can do padding you can do a ton of things there's a basically everything you can do in CSS they have these little utility functions use some add them to any of your classes and you can then work really quickly and what I really like about it's really easy to quickly prototype things out and yeah it just works really well I know some CSS purists don't like it that much because you're essentially writing all your CSS in your classes in your HTML and it becomes pretty bloated after a while but you know I think it's fine especially for a lot of different projects and also also it has some criticism too because you may not end up reusing in nice thing about CSS is it's cascading and its style sheets and it's great for reuse and you can make classes that you can reuse in multiple places you can't do that in tailwind we're not gonna look at that but it's not as clear how you set that up at the beginning and like I said it I think it's just great for prototyping all right so here is what we're gonna create today and here is my app I heard you have it running but to get started let's take a look here I already have a directory here make sure obviously you have note installed because we don't have note installed you're going to be in trouble but if you have note installed by the way you can just go to node so just Google nodejs install it make sure you have view seal I installed as of this recording I'm using view CLI 4.3 dot 1 if you don't know how to install that do NPM install tak G @ view slash CLI and that will go ahead and install it for you and then you just do view create and we can call it whatever we want it's called tailwind test and then it's gonna ask you some questions and you can either do default or manually I just go through here and I would just go through here and just select some defaults like if you want view X a router and if you want history mode error prevention lint on save and then you hit here for dedicated config files and it'll go ahead and install the app for you so I'm not going to do that because I already did it but after the app is installed all you need to do is change directories to where the app is installed and to add tailwind you just do view add tailwind and that's pretty much it and it'll go ahead and install everything for you you don't the latest version I believe of this recording it's 1.2 so it'll do everything for you don't get confused there's actually a few tailwind libraries basically these are plugins for view j/s there's one called tailwind CSS which is an older one if you install that you will have problems because that is really old and not the latest version and that hasn't been maintained but if you do view add tailwind it works great and it'll ask you during the installation it'll ask you if you want to do I'll show you here if you do view add tailwind so still proceed yes it'll go ahead and install for you and it's gonna ask us a question how we want to do our configuration it's can ask us full minimal or none usually I like to do minimal and I hit enter here and you want to replace it we're going to say no and it basically runs this generator does everything for us now if we look at our code and look right here and we're going to our package.json you see it installed the plug-in and now we have in here if I look for tail-end yep it's 1.2.0 this is actually the latest version of tail end as well this this tail end plugin is really corresponds to the version tailwind as well which is perfect and it also creates this file right here called tailwind config j/s so this is where you can add your own colors you can kind of add some variants and plugins and things like that we're not gonna look at at this in this video but there's from a pretty good documentation if you go to the tailwind site if you wanted to add in extra colors it actually comes with quite a few also during this video we're gonna look at this extension that I installed it's called tailwind intellisense or CSS intellisense this makes things really really easy to when you're inside vs code to actually pull up these utility classes because unless you memorize them all you're going to have to look them up but you can see here you can type it BG red and it kind of tells you what you can do there which is really nice cool also on one of my videos someone asked like they said this isn't working for them this table at CSS intelligence make sure if to to make it work make sure you have the post config j/s receives me the Tailwind config j/s file in the root folder so if you put none during that installation i noticed that sometimes the intellisense doesn't know that you're in a tailwind project and doesn't work so make sure you have that tailwind config file there at least an empty one like this so that really helps ok so I already created the modal here but let's take it with step by step let's take a look at how to create the button and I'm going to could just go ahead and comment this out ok so I went ahead and deleted everything here and I will start from scratch to show you how this works so first we want a way to toggle things off and on so of course we can create a new return model here so basically this is an empty view project I just created it from the command line and I just deleted everything out of the home dot view file that way we can kind of start from scratch but I can do on a node toggle modal and have it false and then I want to create a button here open modal and just to get some of the view stuff out of the way we're gonna have a click Handler on here and it's gonna actually open it's gonna take this this toggle modal and it's gonna equal not toggle modal so it should toggle that off and on and if we look at it toggle modal see what it takes it looks like so obviously we don't have anything no graphic this hasn't been style at all but if you do it you see true-false true-false so it's definitely working as we expected ok cool so now we actually want to kind of give this some look and feel so it's not just this ugly box here so we do class and remember I have the intellisense so obviously all of a sudden it's already telling me I can add stuff to it so I want the text to be white and I want to rounded some what kind of what the button looked a little rounded and I want the background color to be pink and then I can also what's nice about this is I can put different different layer layers here like 100 is kind of a light pink but nine hundreds of really dark pink so I don't know I'll do 500 so right away you can see yeah it's looking a little better maybe I'll do some padding so I'll do padding on the x-axis I don't know three and then why I don't know four let's see what that looks like okay so it's looking a little bit better let's see here if I put let's do X a little bit more let's you know what I'm just gonna dance Ted breaking out between x and y I'm just gonna do padding let's do what 10 okay now it's made it really big let's do padding X I know six does it look like that okay I'm padding Y 4 okay that's really big I kind of like that I can put I think I can put a different font maybe I wants on sands and I believe I can do font semi bold - okay I kind of like that a little better I can add a little shadow so I can add shadow let's put a large shadow underneath it okay you can't really see but it has a little bit more shadow now if you're wondering what it's doing here I'm just gonna click here click on open modal you can see here it has my text white here's this box shadow added it here's the left and right pixel six it adds one point for our am y11 rem font semi bold so you can see everything I added here had the border radius so it's a little bit more has a little bit more of a border the color so cool it's like doing everything for us we didn't have to type that all out it's all in these utility classes alright so I think for a button this is good I guess I could be a little bit more fancy if I wanted to add in a hover effect I guess I can make the pink and I'm I don't let's see if I make a little darker what it looks like so now okay now that's a little too dark let's do 200 let's see what it looks like if I go a little lighter yeah let's do 400 okay yeah that looks a little nicer I also have this outline I can try to get rid of the outline I think it's outline:none okay but it still it still shows it when you click on it so maybe on the active so I just do active outline:none that's it okay let's add it to the focus to outline:none did I spell that right probably not let's see here okay so there you go so now I don't have any outline anymore on it obviously this isn't great for accessibility we probably want maybe some sort of outline but just for this demo you could also see it's kind of cool to add in hover effects active effects focus all you have to do is just put focus I can also if I wanted to do different break points I can have small medium large that's this s/m medium/large so SM I don't know I could have like it do something on smaller screens obviously in a button one makes sense okay let's see if we can click this button that the background darkens a little bit okay let's see there so I'm going to add in a new div I'm going to only have it be there when toggle modal is true basically and now we can add some classes to it so what we want to do is I can make it absolutely positioned I can also make it there's a few few things I can do let's see here maybe I'll make an absolute positioned and then I'll have Z I'll make it on the z axis for T so it brand I would do different z axis is here in a second and then we're going to put in in set zero and what this does you see it puts top right zero bottom zero left zero which is great I'm gonna put a pasady 25 whoops and I want that let's see here I want to opacity of 25 and then I want to put the background color of let's see here black ok so now we have a button here and all it does is make the background darker that's fine but we actually kind of want to do something magic we actually want to show something so let's create another div here and I'm going to do a V if and it should only show up if this toggle modal is true basically but we want to add some classes to it so we're going to make this we're gonna make we did this one absolute before we can do another absolute but I kind of want to do fixed kind of depends I'm gonna try fixed here and then I'm gonna do some overflow I'm gonna do overflow X Auto overflow why auto actually I'm do ever floor X hidden so because I've stayed on the x-axis I don't want it to keep moving over I just want it to cut off why do I want to actually if you do auto we could if you have tons of content there a lot of scroll bar that's fine I'm do the inset zero again so it's kind of in them it's y 0 0 0 then you know I think that's going to be it I'm gonna kind of play around with this to see how I like it and then I'm gonna create another div tag and then this one I'm gonna have the class equal relative so I was gonna be relative to the fixed div that's above it and I kind of want you know actually also make sure everything in here is flex and I'll justify Center and I'll do the item center too and I still do relative here and I want to sort of try to get it in the middle some 2mx Otto I'm going to do a width Otto and I'm gonna do the max see I think it's called max width to XL which is 42 mm and now I'm gonna save this and now I'm going to create I don't know a background here I'm going to have it be white so I guess I'll do let's see background white and I'll have a width of 20 I'm gonna put some lorem ipsum here to see if it even shows alright so here it is it's not quite right it looks like it's covering the full front here but let's see here if we go through here I want to make sure this modal 2 is higher so I'm to put it on Z 50 okay so now I got white text here looks like it's not the width isn't enough somebody was full here okay all right looks a little bit more like a modal cool cool and it can also if I wanted to add a close button so let's see here I get a bunch of text here let's just put a span here and put the alarm in here and then underneath the span I'm going to add a close button so let's add a button here call it close and you know I'll make the class let's make it rounded background let's make it green I think that makes a little nicer I'll have the text be white I'll add some padding I don't know it's matte some margin - let's just mess around with this and see what it looks like we'll make this for okay okay here's our big ugly close button let's see if we can at least get the clothes to do something so I don't want that big but I can add a click handler to it and I'll just do toggle modal equals false let's see if that closes it alright yeah so I'm closing it all so I kind of want this to be rounded and I want that I want a shadow on it to shadow let's do two XL see what it looks like and I can't you can't really see too much but I guess it's a little bit more rounded also this button looks kind of weird because we're just all this text is kind of running together in this div block here so I could make this flex and then I don't know let's do we want it more of a column so I think that's this is where I'm trying to remember flex column okay so now that the close buttons all the way at the bottom full width well maybe I can play around with that a little bit more so could I make max width of this to be I don't know medium let's see what that looks like okay so now it's still pretty big I don't know let's make it extra small let's see what it looks like there so still quite big I can also do I think I could just do with here and make it um one in a 112 okay now it's really small let's do this three twelve okay now it's on the left hand side if you want to get we could probably do a margin auto yes and now it's in the middle and let's say I wanted to add in some padding so I can even do mb4 margin bottom I don't know at ten it gets way too much six okay no it's a little better and I know for three okay yeah that looks a little bit better I know I don't love this text right here I could go in and add a like a header or something to the top right here header text and then maybe wrap this all in another div or a flex but to have this in here so let's see here if I want this to be like extra-large text I can do - two XL I think you could do font bold now but hello from modal okay so I have a hello from modal once if I wanted so yeah this is all being flexed through and then centered here but I definitely could go in and and try to move this to the left I can add some extra buttons but I think for right now I that's all I'm gonna do so you can see here just a really simple modal I can definitely mess around with this change the text size also I can add a little X bun like it did but I think I'm gonna leave it like this just to keep the the video pretty sure you can see I was able to really quickly add in all these utility classes create the modal doesn't look too bad obviously it's just very simple but you know it was really easy to do I'd love to hear what you guys think leave a comment below I appreciate it later [Music]

Channel: Program With Erik

Views: 13,592

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, andre madarang, drehimself, vue with tailwind, tailwind with vue, tailwind css vue cli, Program WIth Erik, Program With Eric, Erik Hanchett

Id: MNkjaPCY7NA

Length: 22min 47sec (1367 seconds)

Published: Fri Apr 17 2020