📄 tailwindcss/docs/font-style

File: font-style.md | Updated: 11/15/2025

Source: https://tailwindcss.com/docs/font-style

v4.1

⌘KCtrl KDocs Blog Showcase Sponsor Plus

  1. Typography
  2. font-style

Typography

font-style

Utilities for controlling the style of text.

| Class | Styles | | --- | --- | | italic | font-style: italic; | | not-italic | font-style: normal; |

Examples


Italicizing text

Use the italic utility to make text italic:

The quick brown fox jumps over the lazy dog.

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

Displaying text normally

Use the not-italic utility to display text normally:

The quick brown fox jumps over the lazy dog.

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

Responsive design

Prefix a font-style utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<p class="italic md:not-italic ...">  Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation .

On this page

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy