Tailwind Line Height

Line height plays a bigger role in readability than most people give it credit for. It controls how text breathes inside a layout, and getting it wrong can make even good typography feel cramped or sloppy. Tailwind exposes this through the leading-* utilities, which let you tweak vertical rhythm across breakpoints, components, and arbitrary values.

Here’s how the system works and how to use it in real UI situations.

How to apply Tailwind Line Height

Tailwind gives you two broad options:

• Relative values (scale based on font size)

• Fixed values (pixel-based, independent of the font)

Each approach solves a different type of layout problem.

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

Sometimes you want your line height to be predictable no matter the font size — for example, matching a UI spec from Figma or controlling content blocks in dashboards.

<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

Fixed units are especially useful for hero sections, modal titles, and components that require layout precision.

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

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

Arbitrary Value Usage

Tailwind allows arbitrary values whenever you need something outside the default scale:

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

Preview

Great for teams following strict typographic scales or translating directly from design files.

Customizing Your Own Line Height

If your design system uses its own rhythm, you can extend Tailwind’s 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

Custom names improve readability inside long-lived projects.

🧩 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

Tight line height helps labels stay close to their inputs without looking crowded.

📢 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.

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