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>

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>

saim ansari