Tailwind CSS Tutorial for Beginners- Part13:Line-height

Tailwind CSS Tutorial for Beginners- Part13:Line-height


in the next case, we will be going back to letter-spacing. And we can see that there are different classes being used to specify those letter-spacing, that means the spacing between each letters of our text-elements as been used in into our project. So, in this particular case instead of using it elsewhere, if we now get back to the first paragraph, and here, if we use this same class of ‘tracking-tighter’, the letter-spacing will be reduced to -0.05em so, ‘tracking-tighter’ is the class… ..we are now using a separate ‘tracking-tighter’ class Now, before refreshing this particular project have a look here what we had done; this is particularly the letter-spacing between each individual letters of our first paragraph. Now, if we reload, we can see that the letter-spacing is now a little bit of different than the previous one; the letters being more specific the letters being more tighter than ever; if we press this F12 and open up our code inspector panel and select the first paragraph, we can see that the letter-spacing is now reduced to -0.05em. In the similar fashion there are many classes right over here, like this ‘tracking-tight’; we had used here this class of ‘tracking-tighter’; here is the class ‘tracking-tight’. So if we make usage of it, the letter-spacing will be reduced to this particular value of 0.025em instead of -0.05em, as been used in the previous case. So in this particular case if we just use this class right over here instead of ‘tracking-tighter’, if we now use this class of ‘tracking-tight’; get back to our project; reload and you can see that this will be the result; press F12. Now we can see that the class of ‘tracking-tight’ is been used over here which is using a letter-spacing property of -0.025em Now in the third case all we are going to do, we are going to use something very wide like this ‘tracking-widest’. It has a letter-spacing of 0.1em; Let’s get back to our project and instead of tracking-tight, we are using here this class of ‘tracking-widest’; this is the class this is the last class which is being defined over here. This is the letter spacing; 0.1em; now let’s press ctrl s; that means we are about to save our project; get back to our project close this code-inspector panel in the first case and have a look at this particular first paragraph right over here. So now if we reload we can see that this will be the result it is now a little bit of enhanced; it is now having a letter-spacing of 0.1em; as been mentioned in our class. Now if we press F12 again; select this particular individual paragraph; this first paragraph, we can see the letter-spacing is now 0.1em, and it is ‘tracking-widest’ class, which is being used along with this paragraph. So instead of this ‘tracking-widest’ which seems awkward for us, actually in my eyes; so all we are going to do; instead of ‘tracking-widest’, I will be using here ‘tracking-tighter’. Press ctrl s get back to your project; have a look at this particular first paragraph reload, and you can see that this will be the result…

Leave a Reply

Your email address will not be published. Required fields are marked *