Tailwind Line Height
Tailwind line height allows you to adjust the vertical space between lines of text. In this article, we will examine Tailwind’s line height with examples.
In Tailwind CSS, the line-height utility class is used to adjust the spacing between lines of text within an element.
It sets the line-height CSS property to a specified value, which determines the amount of space between lines of text.
Using the line-height utility class can help improve the readability and aesthetics of text on a webpage.
What is Line Height?
Line height, also known as leading, refers to the vertical space between lines of text in a block.
This spacing can be adjusted to create various effects, such as improving readability, emphasizing text, or creating a unique design style.
In traditional CSS, line height is specified by the line-height property and it takes a value in pixels, ems, or other units.
Tailwind Line Height Classes
| Classes | Overview |
| leading-3 | This class is used to set the line height value to 0.75rem or 12px. |
| leading-4 | The line height value is set to 1rem or 16px using this class. |
| leading-5 | By using this class, you can set the line height value to 1.25rem or 20px. |
| leading-6 | The line height of the line is set to 1.5 rem or 24px with this class. |
| leading-7 | To set the line height value to 1.75rem or 28px, this class is used. |
| leading-8 | Its purpose is to set the line height value to 2rem or 32px. |
| leading-9 | A line height of 2.25rem or 36px is applied using this class. |
| leading-10 | Using this class, you can apply a line height value of 2.5rem or 40px. |
| leading-none | This class sets the line-height of an element to 1, meaning there will be no additional spacing between lines of text within the element. |
| leading-tight | The leading-tight class sets a tight line-height value for an element. This means that the space between the lines of text will be minimal. Its value is 1.25. |
| leading-snug | This class sets line height to a relatively small value while still ensuring that the text doesn’t overlap. It has a value of 1.375. |
| leading-normal | Default line-height of 1.5 is specified in this class. |
| leading-relaxed | In this case, the line height value is defined as 1.75 that is slightly more spacious than normal. |
| leading-loose | This class sets the line-height CSS property to 2, which is 4/3 times the default value. |
Tailwind Line Height Fixed
These utilities allow you to set a specific line-height for an element, regardless of its current font-size.
Syntax
<element class="leading-{size}">...</element>This example showcases the implementation of some fixed line height utility classes such as leading-3, leading-5, leading-7 and leading-9:
Example:
Tailwind Line Height Relative
These utilities provide a relative line-height based on the current font-size of the element.
Syntax
<element class="leading-{keyword}">...</element>The following example portrays the usage of some relative line height utility classes such as leading-none, leading-snug, leading-relaxed and leading-loose:
