Tóm Tắt
Basic usage
Use the leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, and leading-loose utilities to give an element a relative line-height based on its current font-size.
leading-normal
So I started to walk into the water. I won’t lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don’t know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
leading-relaxed
So I started to walk into the water. I won’t lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don’t know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
leading-loose
So I started to walk into the water. I won’t lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don’t know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<
p class
=
"
leading-normal
..."
>
So I started to walk into the water...</
p>
<
p class
=
"
leading-relaxed
..."
>
So I started to walk into the water...</
p>
<
p class
=
"
leading-loose
..."
>
So I started to walk into the water...</
p>
Use the leading-{size} utilities to give an element a fixed line-height, irrespective of the current font-size. These are useful when you need very precise control over an element’s final size.
leading-6
So I started to walk into the water. I won’t lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don’t know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
leading-7
So I started to walk into the water. I won’t lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don’t know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
leading-8
So I started to walk into the water. I won’t lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don’t know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<
p class
=
"
leading-6
..."
>
So I started to walk into the water...</
p>
<
p class
=
"
leading-7
..."
>
So I started to walk into the water...</
p>
<
p class
=
"
leading-8
..."
>
So I started to walk into the water...</
p>
Applying conditionally
Hover, focus, and other states
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover : leading-loose to only apply the leading-loose utility on hover .
<
p class
=
"
leading-none hover:leading-loose
"
>
</
p>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
Breakpoints and media queries
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md: leading-loose to apply the leading-loose utility at only medium screen sizes and above.
<
p class
=
"
leading-none md:leading-loose
"
>
</
p>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
Overriding default line-heights
It’s important to note that by default, Tailwind’s font-size utilities each set their own default line-height. This means that any time you use a responsive font-size utility like sm:text-xl, any explicit line-height you have set for a smaller breakpoint will be overridden.
<
p class
=
"
text-lg leading-loose md:text-xl"
>
Maybe we can live without libraries...
</
p>
If you want to override the default line-height after setting a breakpoint-specific font-size, make sure to set a breakpoint-specific line-height as well:
<
p class
=
"
text-lg leading-loose md:text-xl md:leading-loose"
>
Maybe we can live without libraries...
</
p>
Using the same line-height across different font sizes is generally not going to give you good typographic results. Line-height should typically get smaller as font-size increases, so the default behavior here usually saves you a ton of work. If you find yourself fighting it, you can always customize your font-size scale to not include default line-heights.
Using custom values
Customizing your theme
By default, Tailwind provides six relative and eight fixed line-height utilities. You change, add, or remove these by customizing the lineHeight section of your Tailwind theme config.
tailwind.config.js
module
.
exports
=
{
theme
:
{
extend
:
{
lineHeight
:
{
'extra-loose'
:
'2.5'
,
'12'
:
'3rem'
,
}
}
}
}
Learn more about customizing the default theme in the theme customization documentation.
Arbitrary values
If you need to use a one-off line-height value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
<
p class
=
"
leading-[3rem]
"
>
</
p>
Learn more about arbitrary value support in the arbitrary values documentation.
