How to Use Line Height in TailwindCSS – [Complete Guide]

TailwindCSS is known for the “easy to remember classes” but when it comes to line-height in TailwindCSS, it’s not easy to remember the class. Here is a complete guide to using the line-height in TailwindCSS.

Line Height Classes in TailwindCSS

By default, there are different classes to use line-height in TailwindCSS. Starting from leading-3 and ending with leading-10 adds different line heights to text elements. There are some other classes that start after leading-10. Those classes are leading-tight , leading-snug , leading-normal, leading-relaxed, leading-loose.  Here is an example of using leading classes in TailwindCSS.

Here is a working code example and you can see the output in the screenshot below.

line height in tailwindcss

Using Line Height with Arbitrary Value in TailwindCSS

You can use the arbitrary values in TailwindCSS to add your custom line-height value. Here is an example of adding custom values for line-height.

Adding Line Height in Tailwind Config File

If you are following a design system and want to add your custom line-height classes to use everywhere. Here is how you can add it in the Tailwind config file.

Then, in your HTML, you can use these classes the same as other classes. Here is how you’ll use them.

Adding Line Height to Paragraphs and Headings as Default

You can also add line-height to paragraphs, headings, and other elements as default. For this, you need to edit the base layer in Tailwind CSS. Here is an example.

Conclusion

The line-height class in TailwindCSS is called leading- . There are some default classes in TailwindCSS to add line-height but you can always add your own. If you are following a design system and want to add a default line-height values to text elements, you can edit the base layer in TailwindCSS.

Latest articles

Related articles