Top 10 Tips and Tricks with Tailwind CSS

good morning my gorgeous friends on the internet in today's episode I want to give you a top list of Tailwind tips and tricks the best ones that I know and hopefully can help you out too now I've been on Tailwind for the past like half a year now and to be fair I don't think I'm ever gonna go back to any other styling libraries like styled components for stuff like that because it's just so fast and it's so simple and if you have never picked up Tailwind before well now's the time to check it out oh let me know if you know any tips and tricks with Tailwind I'm sure loads of people are gonna appreciate it if you leave it down in the comments below so let's all learn together and have a good time oh we're also redecorating the studio a little bit so I'm gonna have new lights in here in the background and then we're gonna update all the posts there just want to get into the video Don't you all right let's go fine you get to see me at the screen now yes that's pretty cool that's AI technology by Nvidia by the way okay so one of the misconceptions that you're going to see out there on the internet is that you're gonna need to add Tailwind class to pretty much everything which is not necessarily true so for example let's say I want to make all of these buttons bigger so you might see something like class name and then you do text like 2XL all right make this extra large okay so Tailwind also recommends if you hold down control and ALT I believe yeah you can do the multi-text selection like that and then you can just add it to everything right text to excel blah blah blah but what have we learned oh by the way this next is coming from my page here so let me just get rid of it okay cool so what have we learned in CSS in general though that's the question well we learned that we can delegate loads of classes to the parent component right so let's say also that I want this button to be active so I'll add a like text color of like text Violet or yeah let's do text Violet of 600 right or 400. cool right so that's blue that's Violet okay so what I can do and let's say I want the rest of them to be slightly gray right you might have something like that or just not pure Pure White right that's how I feel being in Scotland uh just Note 10 whatsoever okay so a slight accent okay so what can we do here well we can delegate loads of these classes from here all the way up to the parent component the UL so I can just literally get rid of all of this and then paste upstairs the text to Excel and we're going like that and then if I want this button to have the Violet that's fine but if I want the rest of them to have uh this text Gray class name then I can just paste it up there and then we can get rid of all of that and then look at that it's nice and simplified we add our base stylings up at the top of how we kind of how we want everything to look and then specific edge cases We'll add the other styling and that's it for number two on the list we have extending our Styles so for example you might not like uh whatever tail one gives you I do think they give you nice stylings but there might be edge cases like where I wanted to maybe have a nav here at the top and I wanted it to look a bit slightly different like the actual colors so if you don't like text and if you check here these are all the colors let's see you want something custom so let's go to Google and search hex colors so let's say I want like my buttons to have a specific colors give me colors God damn it palette there we go let's just go to Colors oh my gosh okay cool start generating okay so let's see I fell in love with this color here oh my God don't give me that's fake let's say I fell in love with this color so I'm just gonna copy it over cool so what we can do is actually head over to our tailman config here and here where it says extend you can literally extend all all almost all see us as properties so whether that's with grid with font families I can just go down here and add a space and you're gonna see that all of them pop up right here so if I want to add an extra color here I can go into the color section here and just open an object just like that and then I'll save my primary button I'm just going to call it primary and I'm gonna add a variable here so we'll do VAR dash dash primary like that cool so we have that now where do we add this because we never added the hex code you can go to your Global CSS and go to the top here and in your route right here uh we can just like head over here and add my custom uh variables and we can just say dash dash I think we called it primary it's going to be that specific color cool and that's erroring out for some reason there we go I think I need the comma there the dots the dot wiggle so cool we have that set up and again we added it here in our colors panel so now in my nav rather than saying text Gray or down here doing the purple I can just say text Dash primary and look at that it recognizes it so that's really cool and look at that I have my green here and that's a cool trick so I use this mainly for either adding my own colors when I create my palettes I also add see down here I can add my font families as well which I'll show you in a bit and like specific things you know like repeat auto fit min max 15 1fr for like a fluid uh grid responsive grid I just added here and then I just do grit fluid that's pretty good for number three on the list I want to talk about adding spaces to elements because you might have a situation where you need to add some padding and um whether the spelling or margin right so py2 for example is going to do some padding on top and bottom so how do you really get around this to add it to all of them well you could I mean this is what you do right but there's actually a better way to do it uh one way that I found was just do Flex right you do Flex and then do Flex uh column right to reset it back to its original state like that and then you just add a gap of however much you want so 12 8 and there we go you can do that easy peasy another way I found is uh get rid of the whole Flex thing and you can just say Space X or Y so let's do y 12 and that's it and hit save and look at that no changes so that's gonna apply spacing on the Y for each element with the value of 12. so that's pretty cool yeah you can do that all right tip number four is it's gonna be generally avoiding applying the apply class literally to all your components so let me show you what I mean let's say you have tons of styles here right text to excel text Gray blah blah blah let's just say this keeps on going forever forever and your code looks quite miserable all right that happens to all of us I don't know about you but my code looks miserable even without Tailwind so there is a thing you can do in Tailwind whereas you go over to your CSS and let's say I want to do a UL style so I can just make a class of nav items right and I can just copy over everything from here uh like that with the apply cool sound like that all right and now if I remove everything from here let's reset this hit save alright so reset and then I can just do nav items here right or whichever name I gave here cool so that works all right so that's good right no it's not why because we're going back to goddamn naming everything again which can get quite annoying especially if we have multiple files and then we collide with class names again so just just try to avoid it I know sometimes you might feel like oh goddamn my damn styling is too too damn long try to avoid this as much as possible because later on if your application grows you're gonna get into a situation where you're like God damn it I wish I would have just stayed with writing it out all here because now some stylings are just not working properly for tip number five it's gonna be a short one but I know I was a bit confused about this is let's say I have like a pop-up message here right uh it says fortnite because I'm playing fortnite now with Maxine uh anyway let's say I just want to make the opacity of the background because it's black right now so any colors that you apply whether it's BG white or text colors you can adjust the opacity of it and because I know a couple of people wondered like how can I actually affect the alpha of this well look in my layout I have BG black for example and then I can just say BG opacity and then you can modify that accordingly so that's your Alpha value and if I hit save look at that it's gonna start fading out so let's say I want like something like 20 for this one just so we can see the page below it but we have that nice Fade Out effect and again this not only applies to the background but also for any potential text that you might have so here if I have a text of uh let's say teal so tax deal of 700 and there we go and if I want to kind of make it look like disabled or something that sounds that sounds weird uh we do text opacity of like 50 right and hit save and look at that and that looks disabled now number six I'm going to show you how to quickly add Transitions and animations to whatever you want so for example we have a button here and as you can see when I hover it it starts fading in slightly which is really cool and then when I click on it you see that we pulse motion there and then when I un hover over it boom it goes back to normal so how can we achieve something like this well you'd add your normal background color see which is going to be BG blue let's do teal uh 500 here like that and on Hover so you can just add the hover prefix here with a colon I'll do BG teal of 700. all right so cool maybe hover over it look at that it gets darker so that's really cool cool curl and when we click on it that's going to be our Focus so we just add BG blue I'll do teal for this one again of 700 so boop boop and active is going to be when I actually click on it so that's gonna change it so I'll just add a teal of 900 for it like that cool all right and I might actually remove the focus one I wanted to show to you because I don't want it to be on on it all the time and then we have text white and everything else which is normal but here at the end we add the transition colors as well so that's only going to transition the colors for you you can also add just add transition here and you're gonna see all the different properties you can do but in case we're just messing with colors we're gonna stick with color there's rather than like transition all which might affect like their size and position and whatnot so let's just do Transition colors but you have the other options here as well and then you add your duration which is like 200 milliseconds or however much you want it to last but yeah look at that it's just one line of code pretty much and you have a full on working button tip number seven is gonna be a responsive design one of the best aspects of Tailwind is that's responsive first so what I mean by that is Tailwind basically gives you these small extra properties like SM which is small right and then medium MD large 2XL and you're gonna see this whenever you're working with like fonts right I want to make a 2XL or I want to make it a text Medium whatever you can also use it to apply Global like responsiveness to your website so in this case let's say I have these nav items here right cool loads of them all right if I expand this like that and this is gonna be like an AV item right so I'm just gonna get rid of that class name that I made just imagine for a second okay I'll add a a flex to it like that cool and then I'll add a gap of like 12. all right cool so that's my nav well let's let's increase this okay and then I'll do a text of large all right so it's fine now right but if I go too small it's gonna get screwed up okay so basically what you want to do is work upwards and what I mean by that is you'd never really want to do SM like that so for small screens I want the text to be to I don't know medium size right so what that means is when we're on a small screen So Below whatever SM means entailment which you can also check out if you want um you basically wanna work upwards so leave all of the properties that you have here as like a default for mobile so you want to start from like mobile view so make let's make this as small as possible all right there we go so what I want to do essentially is ADD because see we have huge margins here going on now which is in my layout so if we check here we have a margin of 32. so I'll just get rid of that there we go and I'll just do a padding y of like six right let's say we have a bit of spacing there and I'll have a small margin margin X of like six right that's perfect for mobile something like that right so basically you just want to work mobile first and then expand up to bigger screens so let's say when we get to let's say this size I want to add more margin I don't want this to be stuck all the way at the top there so what we can do is use those prefixes like medium so I'm gonna say MD my margin X is going to be double that so now when we expand that look at that as soon as we hit that 12 mark look at there it becomes a bit bigger let me pronunciate let me show you that a bit more with a bigger margin and look at that there we go cool huh all right so that's kind of how you want to work with is add your normal classes as like mobile first and then at the end of your file or class here and just add your different sizes for bigger screens at least that's how it worked I mean that's subjective uh you can do it any way you want but yeah that's been working fantastic for me let me also add a background to this so you can see it better so basically check this out let's go bigger boom so there we go you can also do this where you add a margin of Auto and then your max width length which whichever size you want so on mobile let's say I want to have a small right sorry let's do a four like a 4XL so it's really wide maybe two just a little bit of margin there that's nice and then if I want to increase my size so when we go on a bigger screen I can just go here to the end and say on large screens let's add the max width of like 4XL now let's hit save and there we go that's pretty cool isn't it so that's how you can make really responsive websites super easily with Tailwind I should also mention um that you can do this to all the properties so let's say maybe on uh when we're on a small screen like this let's say I want to have this n column so I can just say Flex call right and there we go cool so now when we get on bigger screens again I can add that medium or large at the end here and I can just flip it to row like that so I always think of mobile first responsive design that's how I start all my classes I'll just make my screen really small in the corner here start coding it out and then I just start expanding it up and when we reach LG here then it's gonna slowly turn into a row like that cool so that's it that's responsive design entailment number seven on the list is gonna be installing two essential plugins if you're working with Tailwind let me give you a quick look transition cool uh so one of them is going to be Tailwind CSS intellisense and the way you install this is you click on the button Goose goddamn so after you install it uh you might need to change your tail with config file which is shown right here it's very easy to set up but once you do whenever you add a class name here to one of the files so let's say class name and you hit space you're gonna get all the different properties uh that Palin can do so if I just write text look at that I can easily preview all the colors that they have I can see maybe I kind of know how a property name is but not really so let's say margin or padding and I want to see kind of what else it does so I can just say p right for padding and then I can scroll down and see all the different sizes and all the different things that it can do so that's pretty good that's pretty cook that's pretty good and the next one is if you're still stuck you can install this plugin called Tailwind docs and that's really cool because you can just pull up the command palette and say Tailwind docs and let's say I want to look a little bit about I want to learn how to blur stuff in Tailwind so look tail and dogs blur click cool open and look at that boom really quickly I can pull it up easy peasy I can get a muffler and I can get the hell out of here I just realized they haven't talked about fonts so let me see how quickly you can hook up fonts with tailman CSS so in my case I'm using next because I love next and it's bloody amazing and that's kind of how I develop all my apps now because I just have the flexibility uh so one cool thing now is that you can just import fonts into an xgs in a super easy way so let's say let's go here to our layout right you can just import any form from Google using App next from Google so let's say I want lobster right imported I can just go here and say import from uh at next slash Juan Google now I'll just get in oh I could just do up here I'm so silly comma and then let's do like lobster right Lobster Two For example boom font is added so I'm gonna say const lobster here is equal to Lobster two so I'm just initializing this and they let you kind of pick out the weight and all of these stuff here so I'll just paste it in let's say I want the 400. and subset is going to be Latin and then you can also add a variable here so I'm gonna call this font and let's say lobster and save cool so we have those two how do we actually add it to our body so we can go here and just say dollar sign make sure you have backticks as well here so we can interpolate it and I'm gonna just say lobster the variables variable and then I'll do the other one too let's see because we have two fonts I'm gonna say Monster Rod the variable cool so that basically hooks up these two fonts on our system and to actually add it to Tailwind we can head over here and just again extend it you can add a font family and say Monserrat and then here I can make one for lobster as well so I can see VAR da da font Lobster I think I called it let's have a look yeah font Lobster all right and that's it so now it's all hooked up so I can literally just go in any of my um I don't know let's say I want to apply the monsterat to everything so I'll just go to my layout here and I'll just go at the end here and I'll say font Montserrat cool save and look at that apply that to everything and if I want it to apply maybe Lobster to a specific one maybe the top one or let's say I have a title here uh well good uh my logo of my cool logo cool so I can just go here class name I can do a text large if I want to if I want uh of lobster and again it's gonna I'm gonna have it here so I can see it and hit save and look at that boom done so it's very simple very effective I mean come on and you can do that with local fonts as well if you want and last but not least number 10 is gonna be expanding to other venues all right there's more to tell when than just Tailwinds loads of people start working on external libraries as well that help you implement Tailwind much easier so let's have a look at that so one is Gonna Be by Tailwinds they have a components library that gives you look at these these are just absolutely gorgeous really beautiful it kind of has that clean design kind of like stripe I feel like um but yeah you have all the components here and you can just copy over the code now I think this is paid so I think it's a one-time payment uh it's a bit expensive but I mean if you have the dough for it then go for it um but if you want for a free alternative you can do daisy UI I believe I haven't tried it yet but I mean it looks really cool and this is free so you can see all the components here so it can be quite useful especially for something like you know like a drop down for example like look look at that that looks really nice and clean and if you check out the jsx for it it's really simple you just have the class name of drop down I think they apply like all the use the add apply with Tailwind so it's probably already pre-configured so you just add like one class and then boom you have a nice nice clean UI with animations included in it and as far as I know you can also customize this to your own liking so if you wanna I don't know change the color of this or move this around it can be done in a very easy way so that's gonna be it for me thank you so much for watching check out the courses over at developed by ed.com if you want to learn more about web development the full stack course is coming along very nicely so that's going to be updated very very soon and all the rest of course as well thank you so much for watching drop a subscribe if you enjoy this content and I'll see you in the next one peace [Music] thank you

Channel: developedbyed

Views: 71,360

Keywords: tailwind, tailwind css, react, next js, web development, css, react css, styled components, react tailwind, next tailwind, developedbyed, dev ed, full stack web development

Id: PL1CFZhepc0

Length: 23min 45sec (1425 seconds)

Published: Sat Mar 04 2023