all right then gang so now we have the html file and we're previewing that page in a browser by using the live server package that we installed in the previous video so now we can start to style this page using tailwind so the way that tailwind works is that it gives us a huge amount of low level utility classes to style our elements and by low level i mean that the classes only do one or two things for us like change the color or the font size or the position or the padding etc That's instead of a class doing a bunch of things for us to create some kind of styled component like a card or a button Which is the kind of behavior you normally get with something like bootstrap So there's loads of low-level classes that we can use but in this lesson We're going to be focusing on text and colors So if we just head to the tailwind documentation and by the way, this link will be left down below and I would advise you to check through it as you go through these tutorials but if we take a look at the font size classes we can see down here these are the different classes available to us so it's text hyphen xs for a very small text and that would apply this css property font size of 0.75 rems so rem is just a unit of measurement instead of a pixel and it stands for root m's if we take a look at this one text hyphen sm for small Then it's 0.875 rems and it goes all the way up to 6xl Which is a very large font and that would be 4 rems. Okay, so these are the different classes that we can use for Giving our different elements different font sizes We also have access to a very large color palette Directly out of the box with tailwind and we have classes for all of these colors as well Whether it's applying it to a background or a font color You can see all of these colors right here So let's have a little play around with the font and colors in our project so let's go back to our project and let's play around with these classes to change the color of text and Also the size or maybe the font weight of text as well So imagine I want to colorize all of the text on the page. I want to set it to be a certain color Well, I could apply a text color class to the body because then it's going to hit everything inside the body. So if I say class is equal to something, the way we apply a text color is by saying text hyphen, then the color, and that could be anything from the color palette.
So for example, it could be yellow and then a strength. Now the strength is 100 all the way to 900 in 100 increments. So if I say yellow hyphen 400, for example, I get this color right here and we can do that for any color in the color palette.
So let me try this. I'm going to say text hyphen yellow hyphen 400. Save it and come over here. And we can see all of the text is now this yellow color.
Now I could do this for any color. So let me say red and we'll change this to 700. That would be a very deep red. Come over here and we can see that deep red.
Now what I want to do is color all of my text gray and the strength is going to be 600 because I don't like. black text on a white background. Typically, I think a softer grey text looks a bit better.
So I'm going to use that for the text colour of the text on my web page. Now, we can override this at element level. So if I want something else to be a darker shade of grey later on, I can just apply a different text colour class to that element. So for example, if I want this home thing right here to be a darker shade of grey, I could style this LI or the A or the span let's do the li tag i'm going to say the class is equal to text hyphen gray and this time i'm going to use 700 as the strength which is slightly darker than 600 so let me save that and we can see now this home is just about noticeable that this is a bit darker if i change this to 900 it's going to become more obvious we can see this is dark now now i only want the change to be subtle so i'm going to say 700 instead okay so We can also color other things darker as well. So for example in the header.
I want to color maybe this thing darker right here So again, i'm going to give this a class and that is going to be text gray again And again, it will be 700 So if I save this and preview we can see that this is now darker as well All right, so that's how we play around with text colors. We say text hyphen then the color then the strength All right, and that colors the text that color. Okay.
So what about the font size? Well Imagine I want to make this h2 much bigger because at the end of the day It is a title and it shouldn't be this small. So I could say well, I'm going to use a text Hyphen LG class and that would be large text now It's not going to be that large but it will be a little larger than current So you can see this is very slightly larger than the rest now now say I want to make it much larger Well, I could say XL and if I save that that's extra large again Not that much larger, but it goes all the way up to 6x So I could say 6 XL right here save that and now it is much larger. So same for this one down here I'm gonna make this a bit larger.
This is more of a subtitle It's gonna go underneath this but I still to make it larger just not as large as this one So I'm gonna say class is equal to and it's gonna be text hyphen and this time we'll say 2 XL So still very big but not as big as this one preview that and we can see now. This is bigger but again this is much bigger than this so that's all there is to it with text size it's just text hyphen then the size you want to use and remember all of those different classes are right here if you forget them okay so what about font weight well i could make something bold or semi-bold or light and i can do that by using classes as well so say for example i want to come down to these h4s right here this one and this one I want to make them both bold. Well, let me just position my cursor in both of these h4s So we can do it at once and we'll say the class is equal to and to make it bold We say font hyphen bold if I save that and preview over here Then we can see that this and this is now bold. Now.
What if I set them to light? So again, let me select both of these and Change it to light save it And we can see now this is a lighter font weight So let me go back to bold because that's what I want to keep it at And I also want to make some other things bold as well. So let's go Right up to the top.
So I want to make this h1 right here bold So to do that i'm going to say class is equal to Font hyphen bold like so and also I want to make this upper case now. I could change this right here But I don't want to I just want to give this a style of uppercase now to do that I can just say uppercase and that is a class to make something uppercase So if I save this and preview we can see now this is all in capitals and it's bold All right again, I want to make this one bold right here where it says home. So i'm going to say font Hyphen bold and save that and we should see that this is bold as well And now we can see that dark color is more prominent when something is bold. All right So let's do two more things.
Let's go down to these things right here the h2 and the h3 And instead of being bold this time. I want to make them semi bold So not quite as bold but still a little bolder than normal. So to do that we can say font hyphen Semi bold and the same down here font hyphen semi bold Save it and let's come over here. And now we can see these are quite bold as well. Awesome So there we go my friends that's how simple it is to control the text color and the font size and also the font weight and again do check out the docs because all of the classes to everything you could possibly want are in here and all you need to do is search for whatever you want to find.
So next up we're going to look at margin padding and borders.