Fonts, Colors & Alignment in Tailwind CSS | Colors In Tailwind | Tailwind Tutorial | Learn Tailwind

what's up developers it's dary here and i hope you're having a great day since we're going to focus on fonts colors and alignment in tailwind before we continue on i want to quickly let you know that you can support the channel through a patreon where you can get access to my private discord group where everyone is helping each other out with their coding issues if you are interested to join the link is in the description down below in web design typography is a very important subject since you're going to display text to a reader now in order to showcase you how you can play around with font sizes we obviously need a index.html file so inside the root of a directory let's create a new file called index.html now in here we need our html template so let's write down doc and hit tab all right now first of all we need to link our style sheets from the css folder so right below our title let's create a link and the href is css forward slash style.css the next thing that we need to do is to create a div inside our body with some text inside of it so let's create a div inside it if we have another div and inside the second div we're going to style an h1 with a text of welcome to my tailwind course let me actually outline it on the line below so it's easier to read for you guys right below my h1 i want to create a subtitle of a h2 which says created by code with diary right below our h2 let's create a paragraph of lorem ipsum if we save it right click on index.html reveal it in the finder and let's right click on index.html and let's open it with a browser it really doesn't matter which one you use i prefer to use brave brave one to access my files let's allow it and let's make it full screen let me actually zoom in a little bit alright by default you can see that the font family has been changed in a regular index.html file there are three classes that you could use to control the font family of an element and what i want to do is to add each of them to our headers and paragraph tags so let's go back to visual studio code for our h1 let's give it a class name or font dash sense for h2 i want to apply a new class of font dash serif which is the serif font and for a paragraph i want to create a new class as well called font-mono if we save it and go back to the browser refresh it you can see that we have three different fonts for our text our welcome to my tailwind course has been changed to sense our created by code with dari has been changed to serif and our paragraph has been changed to mono if we take a look at the classes that we added you can see a pattern that you'll see throughout the entire course the first word of the class defines what we're going to do as you can see we're going to do something with our font after the dash you'll be adding a specific value that is related to the font so saints serif mono and someone so what i like to do right now is to remove all the classes because it's not necessary it was just to showcase you what type of fonts we do have the next topic is the size of a font and for that i would like to go to the official documentations of tailwind so let's open a new tab and let's go to tailwind css.com to be honest this site is incredible if you like to search up something that you don't know you can just click on the search bar inside the top menu search for let's say font inside the drop down menu you can see all the different documentations on font classes the one that we need is called the font size now right here you can see a table with a class and a property let me actually zoom in a little bit on the left hand side of the table that appeared you can see the class name that you can apply on your html tags on the right hand side you'll be seeing the properties that are defined within the class the class with the lowest font size is text dash xs which stands for extra small the highest is well let's scroll down text 9xl which is nine times extra large as you can see there is a text dash base this is the default text size that you're going to use so for h1 let's say that we want to apply text 3xl which will define the css properties of font size which will be equal to 1.875 rem and a line height of 2.25 that means that the font size will be 1.875 times bigger than the default font size of our root element now let's go back to visual studio code let's give it a class of text dash 3 excel save it refresh the browser and as you can see welcome to my tailwind course has been printed out way bigger than it was now for our h2 let's add a class of text dash extra large save it go back to the browser refresh it and go a little bit bigger since it has been multiplied by 1.25 now for our paragraph let's give it a class of text lg which stands for large so let's save it go back to the browser refresh it and you can see that it got a little bit bigger now you might wonder why every font size has line height defined since the goal is to make your text bigger and the answer is very simple it has been created to keep the spacing consistent throughout your application besides the font size you can also format the text by changing the thickness you can add utility classes to format the text by changing the text to italic or add or remove an underline so let's do that let's go back to visual studio code for our h1 let's give it a class of font dashboard for our h2 let's give it a class of underline save it go back to grave refresh it and you can see that our h1 is bold and we added an underline for a subtitle now there's one more left which is italic and let's add that to our paragraph so let's say italic save it go to brave refresh it and our paragraph has been changed to italic there's also a utility class called nut dash italic to make something while obviously not italic so what we could do is to go to visual studio code and let's wrap this word right here into a span so at the beginning let's add a span let's copy the words and place it in between and let's give a class to our span called not dash italic if we save it and go back to the browser refresh it you can see that consect teeder is not italic but the rest of the sentence is now besides the font dashboard that we added in our h1 we could use one of the nine series sets provided grades of boldness if we go back to the official website of tailwind write down font weight open the first link that we get you can see the nine different font weights that we could use the default one is font dash normal which has a font weight of 400. now the smallest one is font dash tin which has a font weight of 100 and the highest is font dash black which has the highest font weight of 900. if we navigate to our visual studio code change font dashboard to font dash black save it go back to our local host refresh it and you can see that welcome to my tailwind course is a little bit thicker than it was before let's say that we want to add font dash tin for a paragraph let's do that right after italic let's say font dash tin save it go back to brave refresh our logo host and you can see that the paragraph is extremely thin right now there are also four different tailwind utility classes to change the case type of a specific font now let's say that you want to set your h1 to uppercase and you want your h2 to be lowercase if we go back to visual studio code we could add a new class to our h1 called uppercase and for h2 let's give it a class of lowercase save it go to brave refresh it every single character in our h1 has been transferred to an uppercase and insider h2 every single character has been transferred to a lowercase even the c that we added as a capital inside our visual studio code as you can see right here it's also possible to capitalize all the first letters of a word and inside our paragraph let's add capitalize save it go to brave refresh it and as you can see every first letter of a new word has been capitalized now the last one which is the default one is called well let's replace our h1 to normal dash case save it go back to brave and it's been printed out just as it was in our visual studio code now that we've talked about all the different font utility classes it's time to talk about the text color utility if we go back to the browser and search for text color inside tailwind css you'll be finding a total of 90 color utilities that you could use inside this list i want to start off by talking about the first four on the list the first one is called text transparent which will obviously make the text transparent this is pretty cool to use whenever you have a background image and you want to see the background color through the text but this is something that we will add later on the text current will keep the current color that you have added now the third one is text black which would change the color to the hex code of zero zero zero zero zero zero and the fourth one is textas white which will change it to the ffff color if we scroll to the list you can see a total of eight different colors we got blue gray green indigo pink purple red and yellow if we look at the class names you can see that every class starts with a word text which implies that we're going to do something with the fonts then the second word is the color so yellow green we got blue right here and that was the last oh that was not the last one we got indigo and so on now the last value inside the class name is the level of your color the lightest level starts at 50 as you could see right here and if you scroll down you can see that the highest value is 900 which will be the darkest point of your color let's test it out let's go back to visual studio code and then our h1 let's change the color to text dash blue dash 700 save it go back to brave refresh it and you can see that our color has been changed to blue now for our h2 let's add a color of text green dash 200 which will be very light let me show it to you alright and for our paragraph let's change the color to text dash gray dash let's say 600 save it refresh the browser you can see that the color is a little bit lighter the last topic that i want to discuss in this video is text alignment since it is something i personally use a lot when using vanilla css for text by default text is aligned to the left as you could see but there might be cases where you want to analyze your text in the middle or to the right and in order to do that let's go back to tailwind let's search for text alignment and as you can see there are four values text dash left text center text as right and justify so let's test them out let's go back to visual studio code let's change our h1 to text dash center save it go back to the browser refresh it and you can see that our h1 has been placed in the middle now for our h2 let's place it to the right save it refresh it and our h2 has been placed to the right side which does not make sense but you get the point and the last one is text justify let's apply that to our paragraph let's say text dash justify now what this will do is basically inline the paragraph to the left and right edges inside the paragraph this was it for this video in the next video we're going to focus on everything you need to know for backgrounds if you do like my content and you want to see more leave this video a thumbs up and if you're new to this channel please hit the subscribe button

Channel: Code With Dary

Views: 8,615

Keywords: tailwind css, tailwind css tutorial, web development, how to use tailwind, css tutorial, tailwind crash course, tailwinds css, tailwindcss tutorial, tailwind tutorial, tailwind tutorial 2021, tailwind tutorial css, how to use tailwind css, how to use tailwind css in html, tailwind 2, tailwind css 2.0 install, tailwind ui tutorial, tailwind 2.0, tailwind css 2.0 tutorial, tailwind colors, tailwind fonts, tailwind text alignment

Id: rcWzZz969qg

Length: 13min 56sec (836 seconds)

Published: Fri Jun 04 2021