Tailwind Essentials: Line Height

CSS Tailwind CSS
Transcript

English (Auto-generated)

in the tailwind. So the line height is actually you know the line height is again the simple, he says formula like you know the line height. So all you need is to have some content first and then you can you know put the line the height in the lines. So for example I'm adding something like you know this is a dummy paragraph, Okay this is a paragraph. I go to the browser, I get this, this is a dummy paragraph. That is totally fine. That is totally awesome. But um it doesn't have any specific line height. So I'm going back and I'm going there and I'm just I'm actually I'm actually copying this like that and I'm pasting it down and here I'm adding something like uh The you know the leading three, leading 10, leading eight, leading five and something like that. So right here I'm adding the class and I'm adding the leading three, saving it going there and Okay the leading three is uh you know the 12 pixels? Line height which is not too much leading three. Yeah, if I make it leading for save it now, this should have the line height to actually test the line hideout. Actually I'm gonna copy and paste, you know a few more um you can see that the paragraphs um in making this a sandwich. So in that way we would be able to understand what exactly happened in. Tm Okay this one is the one we are working on. So if I make it leading you know leading eight, let's just make it leading eight. Now this one is literally you know This one is changing the paragraph. So this is the leading aid and I can even make it leading 10. So if I make it leading 10 save it. Okay there. Now you can see that this is literally stand out. This stands out this one you can see that this literally stands out the center one vertically. Middle one actually. So these one has the little this one has the little line height. These ones has the little line height. But this one is literally standing out. So that's how you can simply use the the you know line heights. There are more ways For example you want to use the numerical value like the leading three leading four or five or you know 10 whatever. Or you also can go with the leading. None of this makes it line height one. Um Yeah or you also can make it leading tight, leading, snug normal, relaxed and loose. So if you want to go with this way you can also choose the you know not the numerical value but the the you know the text the alphabetical value. If I make it leading to lose. So you know it's it's it's still stands out and it's loose now but we want these exact size and something. So you know we can go with this way. Excuse me sorry. Okay I think I'm gonna have flu or something whatever. Okay so this is the this is the thing. And we just had a discussion actually when we talk about, you know, these styles and these are the relative line heights. Anyway, so I think we had it enough, the line heights and we can go to something else. So in the next cast we're absolutely going to cover them.
172 Views 0 Likes 0 Comments

Let's adjust line-height using Tailwind.

Comment
Leave a comment (supports markdown format)