Tailwind CSS Tutorial with Next.js and Typescript | Part 2 - Usage and JIT Mode

hey guys and welcome to part two of my quick tailwind uh introduction tutorial with uh next js and in part one we kind of looked at how to set it up and in this part we're actually gonna look at how to use the library as well as uh different uh utilities and how to set up just in time mode so let's do it [Music] and a quick note before we get started if you are kind of just jumping into part two as opposed to uh starting off with part one because you're just cool like that um one i did announce that i did create a discord server so if you are interested in joining that it's in my youtube header banner there should be a link to the discord it's just a discord channel to kind of just talk about programming concepts different questions um just kind of just hang out in there so if you're interested in that uh feel free to come join and so now let's actually look at how to use this library so the first thing that we're going to do is we're going to actually go ahead and create a components folder and within this components folder i'm going to split it up into three different ways so what i want to show you guys really quick is their documentation and so if i go to tail with css and you click in their documentation here you can see that it's it's pretty good looking obviously it's a css framework but let's go to their documentation here and then um within here you can see you have a you have access to a bunch of different things and so some of the core concepts that i'm going to cover in this video are these three i'm going to cover the utility first concept the responsive design concept as well as uh different states that you're able to access as well as setting up just in time mode but as you can see that there's a bunch of different documentation here for like variants plug-ins spacing colors if you keep going there's like flexbox and grid all the different css properties and how to use it so the documentation um i found is really really uh useful so just wanted to kind of show you guys that and i'm just kind of gonna go uh over some documentation that's pretty similar and kind of just explain what's going on um but just through our application with you guys so now that we've seen that if we go back to here we have created this components folder and within this components folder i am going to actually go ahead and create a utility first folder and so the way i'm going to do that is just utility first and this is just more so like if you're going to look at the github later on and you kind of want to split up um the different types of ways to use or just see different examples with tailwind um this might help that out so what i'm going to do is i'm going to create this utility first folder and then i'm going to actually create a css notification.tsx component but before we actually define that component i'm going to create um the uh styles for this component and so if you're familiar with uh next.js we can actually create a cssnotification.module.css file here and we're going to go ahead and actually paste in um this the usual style of how to use css with uh tailwind so we pretty much just have this chat notification class we have this logo wrapper class and we're just defining like display make it flex set the max width to different ram values we have a chat notification so we're pretty much defining a bunch of different classes that we're then going to be able to use within our utility first component so now that we've kind of created that we can actually go ahead and copy that here and as you can see this is kind of how you would go ahead and create a regular using regular css create a component um so as you can see we're going to import styles from that module and then we're just going to go ahead and we have to kind of define that class name so styles.chat notification chat notification logo wrapper which are all defined within the styles and that's just kind of like the bread and butter of how to do css with nexjs using the module style if you're not using like a library like i we've covered quite a bit of material ui in this uh on this channel but and so yeah so um it's pretty useful but it's one thing that i kind of personally don't really like using the module style is that i don't really like having to jump between files when working with different components so what i mean by that is for example if i'm going ahead and i'm kind of creating this uh css notification and let's go ahead and before i kind of talk about this let's actually start the dev server but what i mean i don't really like jumping around files is that like for me while i'm creating this component and i want to make sure that it's looking correct i don't want to keep having to jump from okay i've defined it here and then now i have to jump to the css file and then i have to jump back and have them like side by side and like changing values and things like that it kind of personally this is just my opinion i don't really like doing that and that's kind of why i think i enjoy using tailwind because uh you kind of eliminate the need for the css file as you're doing it all in in place so let's just quickly go to our index tsx and just show what that's actually doing um and so what i'm gonna do is i'm going to remove that um that button that we had created before and i'm just gonna import css notification and now if we go to our next app here um and we refresh it you can see well yeah so as you can see uh we have this new kind of message up here this little chit chat message with the versailles logo just because that's the one that i have within our next.js project so as you can see it works it looks good like it's everything is fine but we can actually build the exact same component with uh tailwind css and the way that we do that is we go to let's go to our utility first again let's just create a tailwind css notification tsx uh file here and then within this we're going to actually go ahead and paste our uh tailwind code and as you can see here it's pretty much very similar to the css notification in terms of like the divs and everything like that here we're using a bunch of class names but as opposed to actually having this uh kind of obfuscated from us we have to go to the module class to actually see what it is we just have an idea of what it is right out the gate so we can see here that we pretty much have this wrapper and this wrapper is going to use a bunch of the utility first uh css properties that come with tailwind so we pretty much just defined this is going to be a flex we add the flex property for display we're going to have uh pretty much just some control padding we're going to make the max width of small we're going to pretty much just uh center it horizontally make the background white make it rounded give it some shadow center the items within the component just add just kind of like this um just this wrapper uh using the utilities from css and then we're gonna have like another one so like flex shrink zero and so like again if you it's just like pretty much like so instead of having this chat notification logo wrapper of flex shrink zero we just define it directly within the div so it's just flex strength zero that's what this is going to be using then we have the image here we're gonna set the height and the width we're going to set the source again just things very similar it's pretty much all the same here see height with 3 ram so we're pretty much just defining this but within the html of the component so this is kind of where the one of the drawbacks comes in that it kind of does get a little bit ugly and a little difficult to read if you're not used to the tailwind css library and that's because you start defining your class names in place with just by adding a bunch of all of the different css properties that that specific html might be using but it is kind of nice because you don't really need to define or invent class names you don't have to remember what these classes are actually defined as making changes to your component is actually sometimes it feels safer because it could be in large projects you do have a bunch of different uh components that might be utilizing a single module.css if that might be something that's happening i'm not really sure if a lot of projects do that but just a thought that came to my mind if that's let's say for example i have multiple different components using the same css file it kind of scares me a little bit like am i okay to actually change the css for this one specific component because it just i don't know what what other parts of the code might be using it so it does kind of add a little bit of safety in that regard um but yeah so let's actually go ahead and change the index.tsx to instead of using the css notification let's actually use that new tailwind css notification and so if we go back here we refresh the page you can see it's exactly the same so nothing's changed we're able to create that either through direct css or using tailwind and you might be thinking like isn't that just direct inline styles like why would you not just use inline styles with your components and in a way it pretty much is very similar to that but writing with tailwind does give you some different advantages that writing inline styles might not give you and some of those are you pretty much you have a predefined system meaning that you kind of have some structure of how to actually go about your design meaning you have these pre-designed built-in classes that you can kind of utilize to create that design for you so it's not just like a wild wild west of just creating random stuff you also do have advantage of the responsive so you have access to media queries so media queries are something that are actually not available in line and if you're not familiar with a media query it's pretty much just a way that allows you to kind of define different style rules based on different uh media types and these things are like the width and height of the uh viewport the width and height of the device maybe what uh orientation it is what resolution it's using so as you can see here you can kind of uh create different i actually don't think there's an example here but we will go over uh the responsive examples of how you can actually utilize these different media queries uh just directly within these uh utilities which is uh actually makes it really nice and then another one is that you can actually target different states and we'll also cover that a little bit later in the video and so these states include things like hovered uh disabled um active all of these different states that you might want to utilize within your components you can actually also directly uh influence them within these classes and let's actually start looking at these responsive designs so to get a little bit of a better idea what that actually means with the medi the media query so what i can do is i'm going to create a another folder here just responsive design and just to create some components to kind of show what responsive design uh really means and so within here i'm going to create a media responsive image and what this component is going to do is pretty much it's going to show an image but it's going to change how big the image is depending on the size of the uh the browser so what that means is like here it kind of shows the example that how you can actually override different media queries so what i mean by that is here you can see we're setting a default width of 16 meaning that it should have a default width of 16 and then for medium it's going to be a d when we detect that the viewport is actually of medium size we're going to change that to a width of 32 so the image is going to get bigger and once we detect that it's at the large we're going to actually set that to 48 make it even bigger and so let's actually go ahead and just show you guys how that works and we're going to do that by going to index.tsx here and we're going to actually now instead of having that chit chat notification we're going to be using the responsive image and then so now if we go to our application here and we refresh you can see that so right now it's just that's the size but once it hits a certain size and that should where is it okay so now that it hits medium you can see that it actually grew in width meaning that the picture actually got bigger and once i hit large you can see that it gets bigger as well so now that the width changes so that's kind of what it means by responsive design um as if and cool now that we can understand a little bit better of what the responsive design actually means let's create a little bit more of a complex uh responsive component so what we're going to do is we're going to go to our responsive design folder here and we're going to just create media responsive card.tsx and then within this we are going to go ahead and just copy a and this again i'm getting these components kind of from their documentation as well so you can actually see these if you actually want to go into their tailwind you can actually go into their responsive design and actually kind of play around with these components and see what they actually look like but um i kind of just wanted to copy and then just kind of discuss what the utilities are actually doing so one cool thing to note is that every utility class within tailwind also works at every single break point so what that means is you can have uh defaults such as like bgy mx auto things without really that aren't really targeting a specific breakpoint or you could also utilize all of those same utilities at a specific breakpoint and what i mean by that is for example for like anytime you see this kind of notation here so this is targeting the mid the medium size break point let's add flex to it medium let's add flex shrink zero um let's uh medium make it this medium make it with 48 so so that's kind of what it means to actually be able to target specific uh break point properties and yeah so like once we create this responsive card then we should also uh utilize it and see how it looks in the index.tsx so if we actually just go ahead and now we're going to be using this and so instead of breakpoint responsive cards where it's actually called media responsive card so now if we add that and we go back to our component here you can see that we have this kind of card that is a little bit uh responsive so like when we kind of zoom out you can see that it's actually becomes more horizontal but when we kind of get smaller you can see that it uses utilizes different styling and so that's pretty cool so that kind of just shows what kind of power kind of uh responsive uh components you can kind of create utilizing tailwind and it's uh just adding by just by simply adding um some more different utility classes targeting specific break points you can see how easy it is i don't know if you followed my material ui but i think if you uh remember some points we'd actually within the css of the style we'd have to target like at uh uh sm down and then just add things like that to actually target specific breakpoints but you can see with tailwind how easy that really is pretty much you just have to add the prefix for whatever the breakpoint it is that you are targeting um one thing to note is that tailwind is actually mobile first breakpoint system similar to bootstrap so what that means is you should probably use on prefix utilities to like target mobile so unprefixed means like things like that and then override them as uh you target larger break points so like override them so if you're let's say for example you want on mobile for it to uh have the background of white but then after a while you might want um the medium break point to actually have background of black so then you would just kind of go ahead and override it at the top at the higher breakpoints and that kind of jumps into my next point with responsive design in tailwind and what i mean by that is that breakpoints default from left to right so what i mean is that it'll default to the mobile first which is the small screen size and then it'll go small medium large xl and those are just kind of like how it goes and the best way that i can kind of show you what guys what that means is let's actually create a button and what i'm going to create is a media responsive button.tsx and i'm going to kind of just show you guys what i mean by that and um it pretty much just means that it pretty much overrides breakpoints uh if you set a breakpoint at medium it'll override that specific uh configuration up until medium and then medium and then from then on it'll use the whatever that configuration is so uh let me just kind of show you guys because that does kind of seem a little bit confusing but instead of using this card what we're going to do is we're going to get the um break point color target i think is what i actually called it and uh within here let's get rid of the card and our application is still running so now we should have this green uh kind of color target thing that we have going on so and the reason for that is because we actually go and within here you can see that we set the background to green 500 medium we set it to red and then large we re-override it back to green so if we were to take this screen and we make it go medium where's medium at okay so this is still default default default default medium you can see that it changed to red and then medium medium medium medium and then we hit large now you can see it goes back to green but the interesting thing to note is that for example if i were to go into the code here and actually remove this override of the green meaning i only have the default of green and then at md i set it to red what you'll notice is that we'll still have green as the default because we haven't hit medium and then as soon as we hit the medium viewport right here you can see that now it becomes red because that's just the definition but then it's it's red for every single uh viewport from then on meaning like large extra large it'll actually be uh red because we don't actually overwrite it back meaning that what we're saying here is like okay default it's small we want to use green once we hit the medium viewport every single viewport from then on will be utilizing this red background color so that's kind of what i mean that it goes from left to right so just be aware of that as well when you are playing around with responsive designs and yeah that's kind of uh just pretty much the high level basics as you can see there's a lot of really cool things that you can use utilizing these different break points and how easy it really is to use with tailwind so the last thing that i want to cover is states and this is another one of the kind of advantages that you can also easily target with tailwind so what we're going to do is we're going to just create a states folder here and within the states folder we're going to have a couple of different components just to show you guys how to actually target specific state utilities and so within states the first one we're going to show is we're going to show one of the most used states which is hover so what we're going to do is just we're just going to create a hover button.tsx and within this hover button we're just going to pretty much uh just make it pretty simple and uh all we're doing within here is just we're adding a button with the class names of bg red but then what we want to do is whenever we want hover so whenever something hovers over this button we actually want to change the background color to a darker red so it's pretty much the same default lighter red once someone when it's at the text that the hover uh is happening then we actually change the background color which is just kind of a pretty basic css just stuff that usually happens that the user kind of expects so let's get rid of this and then so now we have our hover button if we go here you can see if i hover over it that that css property is actually handling that uh hover state which is really cool and you can see how easy it is to actually target that within tailwind css and the next component is another kind of pretty uh heavily used state is that of focus so i'm just going to create a focus input dot tsx and um again something pretty similar to how we did it with the hover button we can actually see that we can actually target another state which is that of focus and there's a list of all of these different states that you could target and how to utilize them within the tailwind css documentation but i'm just going to target these two simple one as well as disable just for the sake of time but as you can see here we're pretty much just setting hey when it's focused set a real oh set a ring and then whenever it's focused also set that ring color to blue 600 and so then what we'll do is let's go to our index.tsx and this is laggy for some reason um and then okay so then now instead of the hover button let's just get the focus input and then let's go here and you can see once i hover or once i focus on it so meaning like when i click on it you can see that it actually creates that blue uh uh ring around it so um that's just another state that you can target and the last state that i kind of want to show you guys is that of disabled so what i'm going to create is i'm going to create a disabled button and i'm just going to do disable dash button.tsx and within this one it's pretty simple i want to just do something very similar that i would have been doing and what i'm going to do is i'm going to target the disabled property and i'm going to set the opacity to 50 meaning like i want it to be a little bit grayed out and then i'm also going to make sure that this is actually disabled so whenever this is disabled this property will come into effect um so that's kind of cool and then so uh then let's go back to our index.tsx here and then we're going to actually import and just use that disabled button so now when i go here you can see that it's actually kind of a little strange um let's actually add some color to this so instead of just disabled let me just make bg green 500 so that we can actually see that it actually has a background so what i can do now is you can see we have a button here which is a background of 500 of green 500 but for some reason the opacity isn't actually showing up and the reason for that is because disabled is one of those uh kind of variants that isn't by default enabled for the default core plugins and what i mean by that is if i go to their documentation and let's go to let's make this a little bit bigger and just zoom in a little bit for you guys um so if i go to their states here you'll notice that like once we go to and we find disabled okay that's not quite this okay disabled you can add a disabled prefix and it apply the utility only when an element is disabled but by default here you'll see the disabled variant is not enabled for any core plug-ins and so what that means is that the disabled you're not able to utilize this without actually specifying a variant and so the way that we would fix that is we would add this opacity we would extend the opacity to the disabled state in our tailwind config.css here so within variance we would then add opacity disabled which would then allow the opacity utility to be utilized within the disabled core utility so now if we go back to our app you can see that we actually have that opacity um kind of actually working and able to target uh disabled state so that's kind of interesting um and one thing i will know i personally don't really like this because i usually forget to check the documentation and see like is this actually just enabled by default if it's not you have to go through and add these variants um so what you can do is you can enable something called just in time mode and so what is just in time mode and if you remember in part one i kind of showed that there uh the kind of configuration that tailwind does give us automatically does utilize this just in time mode um and let me see if i can just make this a little easier to see for you guys okay there you go i might be blocking a little bit of it but so sorry about that but pretty much just in time mode is just a more kind of on-demand engine for tailwind css in version 2.1 plus it is still a preview feature so that's kind of one of the negatives is that it's still a preview um that might change in the future but they when you create using their uh pre-generated next js project they you they enable it so i can see it being the way to move forward and so pretty much what it does is it generates your styles on demand as you author your templates instead of generating everything in advance at build time so what that means is that you'll have faster build times you'll essentially have each variant enabled out of the box so this is the big one that i really uh enjoy meaning that you'll have variants like disabled active all of these things they will be enabled out of the box as opposed to having go in your tailwind css making sure that they're extended within that variance section that i just showed you guys it also allows you to kind of create very specific custom css so you can do something like top dash minus 113 px if you kind of want to go ahead and just like a super specific value um your css then also becomes identical in development as well as production because it's always being generated as they are needed as opposed to having to purge it later on so it's kind of uh gives you that same feeling of like okay whatever i'm doing in dev is how it's going to be in production so that's kind of something that's really nice and you also get better performance in the browser during development and so let's the way that we set this up is actually pretty easy and i kind of showed you guys already in part one but all we gotta do is we just add a new field here that we just say jit and um actually wow i actually just forgot how they did it so it would just add mode jit and so instead of jit like that we'll do mode jit we'll keep the purge as the same but then what we can actually do we can remove that extended variant and now if we go back to our application and we refresh the page you can see that opacity is still going on and so that's really cool another really cool useful feature that comes from just in time mode is you could also add things like stackable variants so you could actually like chain different variants in different states so like dark disabled focus hover things like that you can create dynamic values so that you can actually create a class name where it's like depending on like so if size is large then you actually set it to 22px or if it's not then you set it to 17px so it gives you that kind of like inline um feeling of creating complete actually don't do that one do this one just kind of dynamically select a complete class name so that's pretty cool um gives you like arbitrary values and you can go through the documentation and read all of the things that just in time mode kind of uh the benefits that you gain from utilizing it i usually utilize it in my my tailwind project so um just be take a note of that as well and yeah so that's just kind of part two of this pretty uh high level introductory uh tailwind tutorial with next js i kind of just wanted to show you guys how to set it up how to kind of utilize it what i think are the kind of like the three main concepts of tailwind which are the utility first different built-in classes the different states that you can target and the different media of responsive designs and just how to target those and how do you utilize the different utilities for different break points and for different states that you kind of might want to use and once you kind of really get the hang of it and kind of get used to utilizing this library you can see how it could speed up development time it can kind of give a little bit of safety and just kind of eliminate all of these extra css files without really needing to kind of uh create a bunch of different css files and you don't really know which components are utilizing those and things like that for larger projects and you can see why people really enjoy this library but you could also see why people there are some disadvantages to this uh free uh to the css framework um so i just kind of wanted to show you guys all of that and just give you guys a little bit of a better idea of how to use this um and how to configure it with um next js and also another thing is just to know you can also go through their tailwind ui so you can actually come in here and actually get uh different uh components and just kind of uh see how like they are utilized one thing to note though is that some of these uh actually are kind of i think you actually have to pay for some of these i'm not exactly sure how it works um but as you can see like here just gives you like a bunch of different examples of actually how to create this hero section and things like that so um that's another kind of useful tool i just don't know when it actually starts trying to charge you um if it does or if you actually just have access to these so just that's just another tool in the tool belt but i hope that this was useful for you guys if it was um please leave a like that really helps me know that you guys are enjoying the content as well as subscribe to the channel as that just helps us grow and grow a bigger programming community and if you have any experience with tailwind if you like it if you dislike it please leave a like a comment in the comment section below um just to let me know i kind of just again just want to hear about uh people's different experiences with this library as i have a little bit of experience with it but um not really too in-depth so like what do you like about it what do you do not like about it and things like that so i hope you guys enjoyed this video and i hope that it could help you guys out a little bit and i hope to see you guys in the next one thanks [Applause] [Music] foreign

Channel: Leo Roese

Views: 649

Keywords: next, next.js, tailwind css, nextjs, tailwindcss, typescript, javascript, css, next js, react

Id: 7iVL7b0L4xc

Length: 28min 43sec (1723 seconds)

Published: Sun Oct 17 2021