font-style
Utilities for controlling the style of text.
| Class | Styles |
|---|---|
italic | |
font-style: italic; |
|
| not-italic |
font-style: normal;
|
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>
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>
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

5-day mini-course
Build UIs that don’t suck.
Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.
Copyright © 2026 Tailwind Labs Inc.·Trademark Policy