Font Style

Utilities for controlling the style of text.

Class reference

No Italics

Use the .not-italic utility to display text normally. This is typically used to reset italic text at different breakpoints.

<p class="not-italic ...">The quick brown fox ...</p>

Italics

Use the .italic utility to make text italic.

<p class="italic ...">The quick brown fox ...</p>

Responsive

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:italic to apply the italic utility at only medium screen sizes and above.

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

all

sm

md

lg

xl

<p class="italic sm:not-italic md:italic lg:not-italic xl:italic ...">
  The quick brown fox jumped over the lazy dog.
</p>

The quick brown fox jumped over the lazy dog.

Customizing

Responsive and pseudo-class variants

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: {
      // ...
-     fontStyle: ['responsive'],
+     fontStyle: ['responsive', 'hover', 'focus'],
    }
  }

Disabling

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,
    }
  }

← Font Smoothing   Font Weight →