Tailwind CSS Line Height (Leading) Tutorial

Line height controls the vertical spacing between lines of text.

If line height is too small, text looks cramped. If it is too large, content looks disconnected.

In traditional CSS, you write:

line-height: 1.6;

In Tailwind CSS, you write:

class="leading-6"

Or combine font-size and line-height together:

class="text-base/6"

Let’s understand everything step by step.

What is Line Height?

Line height (also called leading) defines the vertical space between lines of text.

It directly affects:

Readability
Design balance
Content spacing
Mobile experience

Good typography always includes proper line height.

Method 1: Set Font Size and Line Height Together

Tailwind allows you to define both font size and line height in one class.

Example:

class="text-base/6"

This means:

text-base → font size
/6 → line height

Example

<p class="text-base/6">
  This paragraph has base font size and controlled line height.
</p>

You can adjust it:

text-base/7
text-base/8

Higher number = more vertical spacing.

Method 2: Set Line Height Independently (leading-*)

You can control line height separately from font size.

class="leading-6"
class="leading-7"
class="leading-8"

Example:

<p class="text-sm leading-7">
  This paragraph has small font size but increased line spacing.
</p>

This is useful when:

You want tighter headings
You want more spacing in paragraphs
You want different line heights across breakpoints

Removing Extra Line Height

If you want text height equal to font size (no extra spacing), use:

class="leading-none"

Example:

<p class="text-2xl leading-none">
  Compact Heading Text
</p>

This is mostly used for:

Large headings
Logos
Hero titles

Using Custom Line Height

You can use a custom value like this:

class="leading-[1.5]"

Example:

<p class="leading-[1.8]">
  Custom line height using a manual value.
</p>

You can also use CSS variables:

class="leading-(--my-line-height)"

This is helpful in advanced projects.

Responsive Line Height

You can change line height based on screen size.

Example:

<p class="leading-5 md:leading-7">
  Smaller spacing on mobile, larger spacing on desktop.
</p>

Meaning:

Mobile → leading-5
Tablet/Desktop → leading-7

This improves readability across devices.

Complete Working Example (Full Demo Page)

Copy and test this example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tailwind Line Height Example</title>
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 p-10">

  <div class="max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-lg">

    <h1 class="text-4xl font-bold text-center mb-8">
      Tailwind CSS Line Height Demo
    </h1>

    <!-- Font Size + Line Height Together -->
    <div class="mb-8">
      <h2 class="text-xl font-semibold mb-3">Font Size + Line Height Together</h2>
      <p class="text-base/6 text-gray-700 mb-4">
        This paragraph uses text-base/6. The spacing is comfortable and readable.
      </p>
      <p class="text-base/8 text-gray-700">
        This paragraph uses text-base/8. Notice the increased vertical spacing.
      </p>
    </div>

    <!-- Independent Leading -->
    <div class="mb-8">
      <h2 class="text-xl font-semibold mb-3">Independent Line Height</h2>
      <p class="text-sm leading-6 text-gray-700 mb-4">
        Small font with moderate line spacing.
      </p>
      <p class="text-sm leading-8 text-gray-700">
        Small font with more breathing space between lines.
      </p>
    </div>

    <!-- Leading None -->
    <div class="mb-8">
      <h2 class="text-xl font-semibold mb-3">Removing Extra Line Height</h2>
      <p class="text-3xl leading-none text-gray-800">
        Compact Heading Text
      </p>
    </div>

    <!-- Custom Value -->
    <div class="mb-8">
      <h2 class="text-xl font-semibold mb-3">Custom Line Height</h2>
      <p class="leading-[1.8] text-gray-700">
        This paragraph uses a custom line-height value of 1.8 for maximum readability.
      </p>
    </div>

    <!-- Responsive -->
    <div>
      <h2 class="text-xl font-semibold mb-3">Responsive Line Height</h2>
      <p class="leading-5 md:leading-7 text-gray-700">
        On mobile screens, this text has tighter spacing. On medium screens and above, it becomes more spacious.
      </p>
    </div>

  </div>

</body>
</html>

This example demonstrates:

Combined font-size/line-height
Independent leading control
Removing leading
Custom values
Responsive typography
Clean professional layout

Best Practices for Line Height

For body text:

Use text-base/6 or leading-6
Maintain comfortable spacing

For headings:

Use leading-none or leading-tight

For long articles:

Slightly increase line height for readability

For mobile:

Avoid too tight spacing

Good typography improves user experience and SEO performance.

Common Questions

What is the default line height in Tailwind?

Each font-size utility includes a default line height automatically.

How do I change only line height?

Use:

class="leading-6"

How do I make line height responsive?

class="leading-5 md:leading-7"

When should I use leading-none?

For large headings where you want tight spacing.

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Tailwind CSS Text Align Tutorial (Complete Beginner Guide with Examples)

Next: Tailwind CSS Letter Spacing (Tracking) Tutorial – Complete Beginner Guide with Examples

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us