Tailwind CSS - Line Height

Modern Guide to Tailwind CSS: Line Height

Line height, often referred to as ‘leading’ in typography, controls the vertical distance between lines of text. Proper line height is essential for readability and creating a visually appealing design. Tailwind’s leading-* utilities make it easy to manage.

Types of Line Height Utilities

Tailwind provides two categories of line height utilities: relative and fixed. For most cases, relative line heights are recommended as they scale proportionally with the element’s font-size.

Relative (Unitless) Line Heights

These classes apply a unitless multiplier to the current font size. This is the most flexible and robust approach.

Class	CSS Properties	Description
leading-none	line-height: 1;	No extra space, lines are tight.
leading-tight	line-height: 1.25;	Slightly compressed spacing.
leading-snug	line-height: 1.375;	Comfortable, but compact spacing.
leading-normal	line-height: 1.5;	A good default for most text.
leading-relaxed	line-height: 1.625;	More spacious, excellent for long articles.
leading-loose	line-height: 2;	Very open, often used for stylistic effect.

Fixed (REM-based) Line Heights

These classes apply a specific rem value for the line height. They are useful when you need to align text to a fixed grid, but are less flexible than relative units.

Class	CSS Properties
leading-3	line-height: .75rem; /* 12px */
leading-4	line-height: 1rem; /* 16px */
leading-5	line-height: 1.25rem; /* 20px */
leading-6	line-height: 1.5rem; /* 24px */
…	… (and so on)

Comparative Example

This example shows different relative leading values side-by-side, making it easy to see their effect on readability.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Line Height Example</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-50 p-8 font-sans">

<div class="max-w-2xl mx-auto">
  <h1 class="text-3xl font-bold mb-6 text-slate-900">The Art of Readability</h1>

  <div class="space-y-8">
    <div>
      <h3 class="font-semibold text-lg">leading-tight (1.25)</h3>
      <p class="leading-tight text-slate-700 bg-slate-200 p-2 rounded">
        Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, and line heights.
      </p>
    </div>

    <div>
      <h3 class="font-semibold text-lg">leading-normal (1.5)</h3>
      <p class="leading-normal text-slate-700 bg-slate-200 p-2 rounded">
        Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, and line heights.
      </p>
    </div>

    <div>
      <h3 class="font-semibold text-lg">leading-relaxed (1.625)</h3>
      <p class="leading-relaxed text-slate-700 bg-slate-200 p-2 rounded">
        Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, and line heights.
      </p>
    </div>
  </div>
</div>

</body>
</html>

Best Practices and Customization

• Best Practice: For long-form content like blog posts or documentation, use leading-relaxed or leading-loose. This extra space reduces eye strain and improves comprehension.
• For Headings: Headings often look better with a tighter line height, such as leading-tight or leading-snug, especially for multi-line headings.
• Customization: You can easily add your own line height values to your project by extending the lineHeight key in your tailwind.config.js file.

• tailwind.config.js

  module.exports = {
    theme: {
      extend: {
        lineHeight: {
          'extra-loose': '2.5',
          '12': '3rem',
        }
      }
    }
  }