Tailwind CSS Tutorial #3 - Fonts & Colors

Key Takeaways

or rather than gang so now we have the HTML file and were 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 the 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 and that's instead of a class tee with a bunch of things for us to create some kind of style 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 a 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 - excess for a very small text and that would apply this CSS property font size of points seven five ramps so Ram is just a unit of measurement instead of a pixel and it stands for roots MS if we take a look at this one text - SM for small then it's not point eight seven five rims and it goes all the way up to six XL which is a very large font and that would be four rims 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 fonts color and you can see all of these colors right here so let's have a little play around with the fonts 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 - 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 - 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 gonna say text - yellow - 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 call 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 gray text looks a bit better so I'm going to use that for the text color 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 color class to that element so for example if I want this whole 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 gonna say the class is equal to text - grey 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 gonna become more obvious we can see this is darkening now I only want the change to be subtle so I'm gonna say 700 instead okay so we can also call it other things dark as well so for example in the header I want to color maybe this thing darker right here so again I'm gonna 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 dark as well all right so that's how we play around with text colors we say text - then the color then the strength all right and that colors the text that's 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 - 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 Excel and if I save that that's extra large again not that much larger but it goes all the way up to 6x else 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 want 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 - and this time we'll say - Excel 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 - 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 lights and I can do that by using it classes as well so say for example I want to come down to these H fours right here this one and this one and I want to make them both bold well let me just position my cursor in both of these h4 so we can do it at once and we'll say the class is equal to and to make it bold we say fonts - bold if I save that and preview of a hill 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 the light save it and we can see now this is a lighter font way 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 H one right here bold so to do that I'm gonna say class is equal to font - bold like so and also I want to make this uppercase 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 gonna say font - bold and save that we should see that this is bold as well and now we can see that dark call it 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 - semi bold and the same down here fonts - 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've got 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 - everything you could possibly want 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