Font Weight
Utilities for controlling the font weight of an element.
Default class reference
Class | Properties |
---|---|
font-thin | font-weight: 100; |
font-extralight | font-weight: 200; |
font-light | font-weight: 300; |
font-normal | font-weight: 400; |
font-medium | font-weight: 500; |
font-semibold | font-weight: 600; |
font-bold | font-weight: 700; |
font-extrabold | font-weight: 800; |
font-black | font-weight: 900; |
Usage
Control the font weight of an element using the font-{weight}
utilities.
<p class="font-thin ...">The quick brown fox ...</p>
<p class="font-extralight ...">The quick brown fox ...</p>
<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>
<p class="font-extrabold ...">The quick brown fox ...</p>
<p class="font-black ...">The quick brown fox ...</p>
Responsive
To control the font weight of an element at a specific breakpoint, add a {screen}:
prefix to any existing font weight utility. 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 ...">The quick brown fox jumped over the lazy dog.</p>
For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.
Customizing
Font Weights
By default, Tailwind provides 10 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,
}
}
}
Variants
By default, only responsive variants are generated for font weight utilities.
You can control which variants are generated for the font weight utilities by modifying the fontWeight
property in the variants
section of your tailwind.config.js
file.
For example, this config will also generate hover and focus variants:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ fontWeight: ['hover', 'focus'],
}
}
}
Disabling
If you don’t plan to use the font weight utilities in your project, you can disable them entirely by setting the fontWeight
property to false
in the corePlugins
section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ fontWeight: false,
}
}