Tailwind Line Height

The Tailwind line-height utility class allows you to control the height of lines within text elements. 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.

Applying 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

Overriding Default line Heights

You can override the default line-height values by extending the theme in your tailwind.config.js file. This allows you to customize line heights to better suit your design requirements.

module.exports = {
  theme: {
    extend: {
      lineHeight: {
        none: '1',
        tight: '1.25',
        snug: '1.375',
        normal: '1.5',
        relaxed: '1.625',
        loose: '2',
        extraLoose: '2.5', // Adding a custom line height
      }
    }
  }
}

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-snug">
  Lorem ipsum dolor sit amet.
</p>

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-snug).

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': '2.5',
      }
    }
  }
}

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>

Tailwind Line Height Class Table

Windframe Tailwind blocks

Landing page