Tailwind Line Height

Controlling line-height or leading-* is critical for text clarity and visual rhythm — especially across breakpoints, font sizes, and UI components. With Tailwind's line-height class, you can adjust the spacing between lines to achieve the desired line height and improve the readability of your text.

How to apply Tailwind Line Height

Relative line Height

Relative line heights are based on the font size of the element. For example, leading-tight with a relative value of 1.25 means the line height will be 1.25 times the font size. To apply tailwind line height to an element, you can use the leading-{value} utility class, where {value} represents the line height value.

• 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

Fixed Line Height

Fixed line heights are specified in absolute units, such as pixels. This ensures that the line height remains consistent regardless of the font size.

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

Preview

Responsive Line Height

Tailwind CSS allows you to apply line height classes responsively at different breakpoints. To use responsive line height classes, you can append the breakpoint prefix to the utility class. For example, md:leading-snug sets a snug line height starting from the medium breakpoint and above.

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

Preview

In the above example, the line height is set to normal by default (leading-normal), but starting from the medium breakpoint and above, the line height is changed to snug (md:leading-loose).

✏️ Arbitrary Value Usage

For precise control beyond the default scale, use arbitrary values:

<p class="leading-[2.45]">Exact numerical line-height</p>
<p class="leading-[32px]">Pixel-specific line-height</p>

Preview

Helpful for matching Figma specs or applying specific typographic rules.

Customizing Your Own Line Height

Tailwind CSS allows for adding custom line heights. This is particularly useful when you need specific spacing that isn't covered by the default classes.

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

🧩 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

🧾 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

Tighter spacing on labels keeps forms compact without sacrificing clarity.

📢 Hero Section Title

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

Preview

Zero vertical space between lines — creates strong, impactful headlines.

✅ Best Practices

• Use leading-normal or leading-relaxed for most body text.

• Use leading-tight or leading-none for large headings or banners.

• Avoid overusing leading-loose — it may reduce readability if the lines are too far apart.

• Combine with responsive font sizes for optimal typography.

• Extend with semantic names (leading-article, leading-form) for maintainable design systems.

♿ Accessibility Notes

• Line-height affects readability, especially for users with dyslexia or cognitive conditions.

• Avoid overlapping text or clipping caused by line-height that's too tight.

Tailwind Line Height Class Table

## 🔍 Want to Learn More?

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

• Tailwind line clamp

Windframe Tailwind blocks

Landing page