Tailwind Line Height

Line height is one of those CSS properties you don't think about until your text looks weirdly cramped or your headlines have giant gaps between lines. Tailwind's leading-* utilities give you control over vertical spacing in your text, and once you understand the system, you'll wonder how you ever lived without it.

How to apply Tailwind Line Height

Tailwind splits line height into two camps, and picking the right one matters:

Relative values– These scale with your font size. If you change text-lg to text-2xl, the line height adjusts proportionally.

Fixed values– These stay locked at a specific pixel height no matter what. Your text-sm and text-4xl could have the exact same line spacing if you wanted (though you probably shouldn't).

Most of the time, you'll use relative values. Fixed values are for when you're matching a strict design spec or need pixel-perfect control.

Relative line Height

These are your everyday workhorses:

• leading-none: Sets the line height to none, causing the lines to overlap.
• leading-tight: Sets a tight line height, reducing the spacing between lines.
• leading-snug: Sets a snug line height, slightly reducing the spacing between lines.
• leading-normal: Sets the default line height.
• leading-relaxed: Sets a relaxed line height, increasing the spacing between lines.
• leading-loose: Sets a loose line height, further increasing the spacing between lines.

<p class="leading-loose">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia
	temporibus eveniet a libero incidunt suscipit.
</p>
<p class="leading-snug">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia
	temporibus eveniet a libero incidunt suscipit.
</p>

Preview

The difference is subtle but noticeable. Try both in your own projects and see which one feels right.

When to use each:

• leading-none or leading-tight → Headlines, hero text, anything big and bold where you want impact
• leading-normal → Body text, the default for most paragraph content
• leading-relaxed or leading-loose → Long-form articles, documentation, anywhere readability is critical

Fixed Line Height (Arbitrary Value)

Sometimes you need your line height locked to an exact pixel value. Maybe you're matching a Figma design, or you need predictable spacing in a dashboard layout.

<p class="text-base leading-[42px]">
	This paragraph has a fixed line height of 32 pixels.
</p>
<p class="text-base leading-[26px]">
	This paragraph has a fixed line height of 32 pixels.
</p>

Preview

This is especially useful when you're building components that need to align perfectly with other elements. For example, if you have a grid of cards and the text needs to line up across columns, fixed line height prevents text from shifting around.

Warning: Be careful with fixed values on small font sizes. If you set text-sm leading-[40px], you'll get weird gaps. Fixed line height works best when you know exactly what font size you're dealing with.

Responsive Line Height

You can (and should) adjust line height at different screen sizes:

<p class="leading-normal md:leading-loose">Lorem ipsum dolor sit amet.</p>

Preview

This pattern works well when you need mobile density without sacrificing readability on desktops.

Customizing Your Own Line Height

If you find yourself using the same arbitrary values repeatedly, add them to your Tailwind config:

module.exports = {
	theme: {
		extend: {
			lineHeight: {
				"extra-tight": "1.1",
				"extra-loose": "3.5", // Adding a custom line height
			},
		},
	},
};

Use these custom classes in your HTML:

<p class="leading-extra-tight">
	This paragraph has a custom line height of 1.1.
</p>
<p class="leading-extra-loose">
	This paragraph has a custom line height of 2.5.
</p>

Preview

This keeps your HTML cleaner and makes your design system more explicit. Plus, if you ever need to tweak that value, you change it in one place instead of hunting through dozens of files.

Real UI Component Examples

Blog Post Layout

<article class="prose prose-lg leading-relaxed">
	<h1 class="text-3xl leading-tight font-bold">Post Title</h1>
	<p>Readable paragraph with optimal vertical rhythm.</p>
</article>

Preview

For blog posts, leading-relaxed on body text reduces eye strain. Titles get leading-tight to keep them punchy.

Form Label + Input

<label class="block text-sm leading-snug text-gray-600 mb-1">
	Email address
</label>
<input class="w-full p-2 border rounded" />

Preview

leading-snug on labels keeps them close to their inputs without feeling squished. This is one of those micro-optimizations that makes forms feel more polished.

Hero Section Title

<h1 class="text-5xl leading-none font-extrabold tracking-tight">
	Make bold moves.
</h1>

Preview

leading-none on the headline creates that trendy, stacked look. The subheading uses leading-relaxed for contrast and readability.

Common Mistakes to Avoid

1. Using leading-loose on large text

<!-- Don't do this -->
<h1 class="text-5xl leading-loose">Giant Title</h1>

Huge text with loose line height looks ridiculous. Use leading-tight or leading-none for headlines.

2. Forgetting about line height on small text

<!-- This is hard to read -->
<p class="text-xs leading-tight">
  Tiny text with tight spacing strains the eyes.
</p>

<!-- Better -->
<p class="text-xs leading-relaxed">
  Small text needs MORE line height, not less.
</p>

Smaller fonts need proportionally more line height to remain legible.

3. Not adjusting line height when changing font size

<!-- Awkward -->
<p class="text-base leading-normal md:text-2xl">
  This looks fine on mobile but weird on desktop.
</p>

<!-- Better -->
<p class="text-base leading-normal md:text-2xl md:leading-snug">
  Line height adjusts with font size.
</p>

Always reconsider line height when you change font size at breakpoints.

Tailwind Line Height Class Table

Want to Learn More?

Now that you’ve mastered Tailwind line Height, try experimenting with:

• Tailwind line clamp

• Practical Typography by Matthew Butterick – Deep dive into line spacing principles

• Tailwind CSS Typography Plugin – Handles line height automatically for prose

Bottom Line

Line height isn't sexy, but it's one of those foundational skills that separates okay designs from great ones. Start with Tailwind's defaults (leading-normal for body text, leading-tight for headlines), then adjust based on what looks good. And remember: if your text feels cramped or floaty, line height is probably the culprit. Tweak it until it feels right.

Windframe Tailwind blocks

Landing page