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>
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>

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>
custom line heights
saim ansari
saim ansari

I'm Saim Ansari, a full-stack developer with 4+ years of hands-on experience who thrives on building web applications that leave a lasting impression. When it comes to tech, I'm particularly adept at Laravel, React, Tailwind CSS, and the Tall Stack