Tailwind CSS Line Height

Line height property is used to set the distance between two baselines of text. In tailwind CSS, we can set the line height using the leading class.

Syntax

The syntax for using line height property in tailwind CSS is:

<div class="leading-{size}">
  // content goes here
</div>

Where, size can be a numeric value or one of the predefined values from the tailwind CSS documentation.

Example

Here is an example of how to use line height property in tailwind CSS.

<p class="leading-5">This is some text with line height of 1.25 (5/4)</p>

Output

The above example will generate the following CSS:

.leading-5 {
  line-height: 1.25rem;
}

Explanation

The leading class sets the line height of the text inside the particular HTML element. The value of size is used to calculate the line height as per the predefined ratios in Tailwind CSS documentation.

Use

Line height is an important property for setting the spacing between the lines of text. Using the leading class, we can quickly and easily set the line height of the text in tailwind CSS.

Important Points

• The numeric value of size is used to calculate the line height as per the predefined ratios in Tailwind CSS documentation.
• The leading-none class sets the line height to 1, which means the text will be packed together with no vertical space between the lines.
• The leading-tight class sets the line height to 1.25, which provides some space between the lines but is still quite compact.
• The leading-loose class sets the line height to 1.5, which provides a lot of space between the lines and is easier to read.
• The leading-relaxed class sets the line height to 1.625, which is similar to the leading-loose class but with a little less spacing between the lines.

Summary

Line height in tailwind CSS can be set using the leading class. The value of size can be a numeric value or one of the predefined values from the tailwind CSS documentation. The line height property is important for setting the spacing between the lines of text.