0
0
Tailwindmarkup~5 mins

Line height and leading in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Line height controls the space between lines of text. It makes reading easier and the text look neat.

When you want to make paragraphs easier to read by adding space between lines.
When adjusting text style to fit different screen sizes for better readability.
When designing headings or body text to look balanced and clear.
When fixing text that looks too crowded or too spaced out.
When customizing typography to match a brand's style.
Syntax
Tailwind
leading-{size}

// Example sizes: leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, leading-loose

Use leading- classes to set line height in Tailwind CSS.

Sizes range from very tight to very loose spacing.

Examples
leading-none sets line height to 1, so lines are very close.
Tailwind
<p class="leading-none">This text has no extra space between lines.</p>
leading-relaxed adds more space between lines for comfort.
Tailwind
<p class="leading-relaxed">This text has relaxed line height for easier reading.</p>
leading-loose creates a very open look with big gaps.
Tailwind
<p class="leading-loose">This text has loose line height, with lots of space between lines.</p>
Sample Program

This page shows three paragraphs with different Tailwind line height classes. Borders help you see the spacing clearly.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tailwind Line Height Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <section>
    <h2 class="text-xl font-bold mb-2">Line Height Examples</h2>
    <p class="leading-none border p-2 mb-4">This paragraph uses <strong>leading-none</strong>. Lines are very close together, making the text look tight.</p>
    <p class="leading-normal border p-2 mb-4">This paragraph uses <strong>leading-normal</strong>. It has a comfortable default line height for reading.</p>
    <p class="leading-loose border p-2">This paragraph uses <strong>leading-loose</strong>. Lines have extra space, making the text airy and open.</p>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Line height affects how easy text is to read, especially on small screens.

Use Tailwind's leading- classes to quickly adjust spacing without custom CSS.

Combine line height with font size for best results.

Summary

Line height controls space between lines of text.

Tailwind uses leading- classes to set line height easily.

Adjust line height to improve readability and style.