DEV Community

Cover image for How to Use Line Height in Tailwind CSS
saim
saim

Posted on • Originally published at larainfo.com

How to Use Line Height in Tailwind CSS

To set line height in Tailwind CSS, you can use the leading utility classes. The leading classes control the line height of an element.



<!-- Default line height -->
<p class="leading-normal">This is a paragraph with default line height.</p>

<!-- Loose line height -->
<p class="leading-loose">This is a paragraph with loose line height.</p>

<!-- Tight line height -->
<p class="leading-tight">This is a paragraph with tight line height.</p>


Enter fullscreen mode Exit fullscreen mode

line height
You can also use numeric values to set the line height explicitly. The values are based on the font size, so leading-3 would set the line height to 3 times the font size.



<!-- Line height: 1.25 times the font size -->
<p class="leading-5">This is a paragraph with line height of 1.25 times the font size.</p>

<!-- Line height: 1.75 times the font size -->
<p class="leading-7">This is a paragraph with line height of 1.75 times the font size.</p>


Enter fullscreen mode Exit fullscreen mode

Here's a list of the available leading utility classes in Tailwind CSS:

  • leading-none
  • leading-tight
  • leading-snug
  • leading-normal
  • leading-relaxed
  • leading-loose

leading-{size} (e.g., leading-3, leading-4, leading-5, etc.)

You Can Set Custom Line Heights with REM Units.



<div class="flex flex-col items-center justify-center h-screen space-y-4">
        <p class="max-w-xl leading-[3rem]">So I started to walk into the water. I won't lie to you boys, I was
            terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't
            know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment,
            I was a marine biologist.</p>
</div>


Enter fullscreen mode Exit fullscreen mode

custom line heights

Top comments (0)