How to change line spacing in Tailwind CSS

In CSS, you can change the line spacing of a text using the line-height property. It's used to set the distance between lines of text. You can exactly do the same in Tailwind CSS using the leading property.

Here are some examples of how to use the leading property:

leading-5
leading-8
leading-tight
leading-loose
leading-[10rem]

Fixed line spacing

The leading property can be followed by a number from 3 to 10 and it will set the line spacing to a fixed value. For example, leading-5 will set the line spacing to 1.25rem.

Relative line spacing

It can also be followed by a keyword when you want to set the line spacing relative to the font size. For example, leading-tight will set the line spacing to 1.25. Here's a list of the keywords you can use: none, tight, snug, normal, relaxed, loose.

Customize line spacing

You can customize both the fixed and relative line spacing by adding a leading key to the theme key in your tailwind.config.js file. For example, you can define leading-12 with a value of 3rem like this:

theme: {
  extend: {
    lineHeight: {
      '12': '3rem',
    }
  }
}

Arbitrary line spacing

Finally, you can also set the line spacing to an arbitrary value using the leading-[value] syntax. In your HTML, you can directly use the leading-[10rem] class to set the line spacing to 10rem. Here is an example with a paragraph:

<p className='leading-[10rem]'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere purus lorem, ut mattis sem fringilla id. Aliquam sed neque tempor, aliquet metus ultrices, maximus erat.</p>

Conclusion

There are 4 ways to change the line spacing of a text in Tailwind CSS. You can use the leading property with a number, a keyword, or an arbitrary value or customize the line spacing by adding a leading key to the theme key in your tailwind.config.js file.

In this article, we are focusing on Tailwind CSS but if you need more detail about the line-height property, you can read this article.