10 Tailwind Classes I Wish I Knew Earlier

one of the huge benefits to Tailwind is that it's really easy to learn since almost every Tailwind class Maps one to one to a CSS property but there's actually more to Tailwind than just that there's certain features like dark mode light mode Group by and so on that you're probably already familiar with if you've messed with Tailwind but did you know there's also classes that add on even more features than just a single feature inside of CSS and in this video I'm going to be covering 10 of those Tailwind utilities that I wish I knew earlier that do more than just a single line of CSS I'm even going to throw in a bonus one at the very end which is my favorite of all of them welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and the very first Tailwind class I want to talk about is a really simple one that you've probably used before and that is the container class this class just essentially allows you to create a container that scales its size based on your browser so as you can see here as I change the size of my browser my container is actually changing size which is this orange section on the right hand side of my screen now now you will notice something interesting about this container is by default it is not centered and you'll also notice that there's no padding at all for example if my screen size gets small enough you can see that there's absolutely no padding on the right or left of my container now this is something that you can fix by adding classes like MX Auto into your CSS or like PX4 this is going to both Center your container and also add padding on the sides of your container but what you could also do instead is add these in the settings for Tailwind as well so instead of doing this in our CSS for every single container if we always know we want our container to be centered we can come into this theme section and use the container class and we can say that by default we want this to be centered so we could say that Center is going to be true and now all of our containers are going to be centered if I just make sure that I fixed this config you can see now my container is set centered and I can add in some padding for example I could say 2 R and now you can see I'm going to have padding on the right and leand side so when I shrink this down super small there will be that right left side padding as you can see by this orange on the right and left hand hand side normally you don't have a background color on your container so you wouldn't actually see that background color so now if I did this and I shrunk it down you can see there's that padding on the left hand side now this next class I want to talk about is a really simple one that I wish I used a long time ago because normally when I want a container that's the same width and height I just write w 48 H 48 and whatever the size is I just use the same one in both places but what you can do instead is use the size class which will set both the height and the width at the same time so if I say size 48 you can see I get a cube on the right hand side that's a height of 48 and width of 48 if I change it to 24 you can now see this cube is half the size it was before this is really useful if you want to create something that is a square shape or a circle shape now those are two utilities you're probably familiar with but one you're probably not familiar with is the Divide utility and everything that comes with it so what we can do is we can just copy this blue box down so we have three separate blue boxes as you can see but right now I can't tell that this is three boxes because there's no dividing lines between them if I wanted I could add like a border on the bottom for example I could say border bottom and I could say I want it to be like one or something like that we'll just say border bottom and I'm just going to add a border to the bottom of this one and then I would need to come to the next one add the Border bottom and then make sure I don't put a border bottom on the last one and if I make that border bottom a little bit bigger for example do like das4 here so it's really obvious that there was that border on the bottom I'll even make a little bit bigger we'll do eight instead there you go you can definitely see that border on the bottom of them but this is kind of a pain to copy around all over the place and to make sure I leave it off the last element instead what I can do is go onto my actual container that has this thing so whatever is wrapping that element it doesn't have to have this container class we'll even remove it and I can just say divide and this does the exact same thing if I want to divide in the y direction it's going to add a border between every single element in the y direction so if I say divide Y8 you can see now I have a border between each one of these individual elements and I can also do this in the X direction if I want and I can also change the color for example I can say that this is going to be red 500 and now this is going to be a red border that's in between them or I could change it to Orange whatever it is that I want I can use whatever colors inside a tailwind and if I just zoom this in a little bit it's very obious obvious that there's this border between these different elements so this divide class is really great now another class that's really great that works very similarly to divide is if you want to put space between different elements but you're not using something like Flex box because normally if you use flex box or grid you can just say like gap of eight and that's going to put a space between your elements but this is not using Flex box or grid so obviously there's no Gap showing up instead I can replace Gap with space and then I can tell what the direction in my case the y direction and now that's going to put a space in between each of my different elements in that y direction so again this is really useful if you want to space things out but you're not using Flex box or grid which has the Gap functionality built in that way I don't have to add the margin or padding to each individual element I can just put it on the parent element and it adds it to all the children and even if I add more children you can see they're properly getting spaced out now the next thing I want to talk about is a really handy feature called line clamp so we can come in here let's just remove all these boxes and instead I'm going to put a bunch of text inside here we just have a huge amount of text as you can see it showed up on my right side of my screen which a bunch of different lines and let's say I only want to have a few lines I can say line clamp three and now it's going to clamp this to just three lines of text add some ellipses at the end so I know that there's more text underneath of it and this is a really great way to style my text so I can say oh you know what only show three lines or only show two lines or maybe I want to show five lines whatever it is it'll minimize the amount of lines and if my text was much shorter for example I didn't even have five lines of text you can see it'll just show all the text that there is and it won't have the ellipses but as soon as I go over that limit for example I only want to show two lines you can see it cuts that down this is a super handy utility and this is something that you need to use a bunch of like web kit style CSS for so it's nice having this in one single class now another utility that's very similar to line clamp is going to be the trunk kit utility and the trun kit utility all it does is it makes it so that your text Will Never wrap onto more than one line so it's always just going to be one line long and if there's any overflow it adds some ellipses at the very end of your text and it adds like three or four lines of CSS to make sure that this is going to work exactly as you want so if you have something you always want to be one line This trunk utilities super great for that now the next one I want to talk about is going to be dealing with gradients inside of tailin cuz there's a lot of nice utilities that make it really easy to work with so let's just create a div here we'll give it a simple class we'll say an H of like 48 and a width of full so we just have a full width container and I'll just for now say background red 500 and we should see that red container show up perfectly now if I wanted to have a gradient of colors this is where we would change our background to be a gradient instead and we can determine which direction we want for example let's say that we want our gradient to go to the right so from left to right now when you want to Define what the different colors along the way are you're going to be using the from property so this tells me where my gradient starts with so let's say from Red 500 so we're going to start with a red color on the left hand side let's actually make that orange instead and then we can specify a two color for where we want it to end by default if you don't specify a two color you can see it fades to transparent but I can say you know what I want it to be blue 500 or actually let's just say black so that's super easy we'll say we want this to to be black 500 just like that and of course not 500 there we go just two black and now you can see it's fading from Orange all the way to Black and if you want to have an in between color at 50% you can use the Via property and we can say you know what in the middle I want it to Fade to White so now you can see it's going from Orange to white to black along this gradient obviously this is a very ugly gradient but you would use colors that are a little bit more beautiful and another really nice thing about this is you can actually determine where you're from via and to start end and so on so for example if you want your from to start at 20% you can just come in here and say from 20% and now your orange color stays solid orange all the way till 20% where it starts to fade to White same thing here with your via you can say you know what I want this to be at 70% and now you can see that the white color is going to be at the 70% and let's say that my two is going to be at 90% so now it's going to become black at 90% and stay black all the way to the end so this is a super easy way to customize your gradient to look exactly like you want it to and it's going to do all the CSS behind the scenes for you now the next thing I want to talk about is going to be specifically more so for form elements than anything else so let's just come in here with a really simple button we'll say we're going to have a button element we'll just give it some text inside of it and we'll get rid of all of this gradient related stuff here we go we'll just say the background is going to be black background black and we're going to say that the text is going to be white there we go so now we have this button right here and of course let's not make it so big so we'll say like width 24 and we'll say height of 12 there we go and let's just add this some margin on the S so we'll say margin of five just so it's not perfectly pushed up against the edge of our screen so you can see we have this really simple button right here but I have no Styles or anything to it by default you know there's like outline style so if I hover over this you can see it kind of adds this outline around it if I change my color here to be something different for example let's change it to Blue 500 now you can see I have this black outline showing up around my container but often times maybe outlines aren't exactly what you want and instead you want to have this outline show up in other times except for when the browser specifically tells it to and this is where the ring property comes in the ring property allows you to use box Shadows to actually add a different ring around your element very similar to an outline Focus so if I just come in here and I specify that I want to have a ring you can see immediately I have this ring showing up around my element that is this blue color by default I can make this larger if I wanted so I could say like ring four and it's going to be larger or ring one and it's going to be much smaller let's do four by default so it's quite large and we can also change the color for example I can say ring red 500 and now I'm going to have a red ring around this or I could change it to Black for example and you can see now I have a black ring going around this this is a really great way to kind of add a focus state or maybe some ring style state to your elements if we take a look at the documentation you can see here's some different examples of what the buttons could look like with these rings around them and the really nice thing about these Rings is that they don't interact with your border or your outline so you can still have an outline and you can still have a border around your element and this is just going to stack on top of all those different things because it's using box Shadow instead of Border or outline or anything else like that so it's a really way to add in an extra outline to your element without interfering with all the other outlines already built in from borders and so on now the next thing I want to talk about is going to be all the different built-in animations so as you can see we have this spinning based animation we have this pinging animation we have a more pulse based animation great for skeleton loaders and we have this bounce animation right here and all these animations are built in where you just say animate Dash whatever the thing is Bounce ping whatever we want spin and so on and it's going to give you these built-in animations and you can even add your own animations into Tailwind if you want these are just really simple ones that are built in and it's really great having these and you can customize them however you want with like durations and how long they should last and so on but by default they're just going to continually last forever infinitely and just continually repeat and this is a really great utility instead of having to write your own custom animation cuz these are things you're going to use all the time and now the final main utility I want to get to before I get to the bonus one is going to be the screen reader related utility of sr- only and not sr- only essentially all this does is it makes it so something only shows up first screen screen readers so if I wanted to have some type of text that only shows up for a screen reader so by default I'm going to come in here I'm just going to add in some text we'll say hello there we go you can see that this text hello shows up for everyone including screen readers but if I wanted this to only show up for screen readers and nothing else I could put the sr- only tag on it this is going to completely hide it from my screen it's not going to mess with the document flow or anything else it's essentially going to pretend like this does not exist but for people that are using screen readers this will actually show up on their screen reader so that they read what this text says it's a really great way to add different labels to things that don't have them normally for example if you just have a icon it'd be a great way to add a label to that icon so that people can understand what's going on same thing if you have elements that don't have labels you could add labels to them using this screen reader only property and if you ever wanted to remove this you could just add not screen reader only and that's going to remove it in case you had specified screen reader only for some other thing and now you're going to say for example on large screen sizes it's not going to be screen reader only and so on like that so you can really customize exactly how this is going to work now the very last element that I want to talk about is going to be the at Tailwind SL typography extension this is a plugin built into Tailwind CSS and this plug-in essentially just adds one main class and that is the pros class and what this allows you to do is to take HTML that's normally unstyled by Tailwind because it removes all the default Styles and it adds really nice HTML defaults this is great if you have something like a markdown file that you want to format into HTML but you want to use Tailwind for other things this gives you great markdown support for different HTML files that you have and if we just click on this we can kind of see an example of what this looks like and you can see that this is just a really beautiful looking page that has all the different text formatting you would want for headings and block quotes and so on pretty much everything you would want for a markdown style article that you're writing if I have like a Blog for example this is something I would definitely include in it because like you can see it gives you every single thing that you need for all the different stylings and all you need to do is add that one single Pros class you just take that class you add it at the start start of whatever you want so if we scroll up to the top here and we look at the example you can just see we add pros and that's it everything inside that section is going to have this really nice default styling this is definitely my favorite utility that there is because it allows you to create a markdown file and make it look absolutely beautiful without needing to know or write any CSS at all now if you enjoyed these Tailwind utilities you're going to love my complete YouTube homepage clone that I create using just Tailwind CSS I'm going to link that right over here for you to check out it goes in depth into some really cool and complicated Tailwind stuff with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 139,309

Keywords: webdevsimplified, tailwind classes, 10 best tailwind classes, tailwindcss, tailwind, tailwind css, learn tailwind, learn tailwindcss

Id: x1RJ5Q09PqM

Length: 13min 30sec (810 seconds)

Published: Tue Feb 20 2024