Utilities for controlling the font weight of an element.
Tóm Tắt
Basic usage
Setting the font weight
Control the font weight of an element using the font-{weight} utilities.
font-light
The quick brown fox jumps over the lazy dog.
font-normal
The quick brown fox jumps over the lazy dog.
font-medium
The quick brown fox jumps over the lazy dog.
font-semibold
The quick brown fox jumps over the lazy dog.
font-bold
The quick brown fox jumps over the lazy dog.
<
p class
=
"
font-light
..."
>
The quick brown fox ...</
p>
<
p class
=
"
font-normal
..."
>
The quick brown fox ...</
p>
<
p class
=
"
font-medium
..."
>
The quick brown fox ...</
p>
<
p class
=
"
font-semibold
..."
>
The quick brown fox ...</
p>
<
p class
=
"
font-bold
..."
>
The quick brown fox ...</
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 : font-bold to only apply the font-bold utility on hover .
<
p class
=
"
font-normal hover:font-bold
"
>
</
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: font-bold to apply the font-bold utility at only medium screen sizes and above.
<
p class
=
"
font-normal md:font-bold
"
>
</
p>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
Using custom values
Customizing your theme
By default, Tailwind provides nine font-weight utilities. You change, add, or remove these by editing the theme.fontWeight section of your Tailwind config.
tailwind.config.js
module
.
exports
=
{
theme
:
{
fontWeight
:
{
hairline
:
100
,
'extra-light'
:
100
,
thin
:
200
,
light
:
300
,
normal
:
400
,
medium
:
500
,
semibold
:
600
,
bold
:
700
,
extrabold
:
800
,
'extra-bold'
:
800
,
black
:
900
,
}
}
}
Learn more about customizing the default theme in the theme customization documentation.
Arbitrary values
If you need to use a one-off font-weight 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
=
"
font-[1100]
"
>
</
p>
Learn more about arbitrary value support in the arbitrary values documentation.
