Utilities for controlling the style of text.
The quick brown fox jumped over the lazy dog.
<p class="italic ...">The quick brown fox ...</p>
Use the not-italic
utility to display text normally. This is typically used to reset italic text at different breakpoints.
The quick brown fox jumped over the lazy dog.
<p class="not-italic ...">The quick brown fox ...</p>
To control the font style of an element at a specific breakpoint, add a {screen}:
prefix to any existing font style utility. For example, use md:not-italic
to apply the not-italic
utility at only medium screen sizes and above.
<p class="italic md:not-italic ...">
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.
By default, only responsive variants are generated for font style utilities.
You can control which variants are generated for the font style utilities by modifying the fontStyle
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: {
// ...
+ fontStyle: ['hover', 'focus'],
}
}
}
If you don't plan to use the font style utilities in your project, you can disable them entirely by setting the fontStyle
property to false
in the corePlugins
section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ fontStyle: false,
}
}