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>
Top comments (0)