To set line height in Tailwind CSS, you can use the leading utility classes. The leading classes control the line height of an element.
<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.
<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.
<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>