Font Style

Controls whether text is displayed in an italic style or with normal font style. Italic text can add emphasis, indicate citations or titles, or create visual contrast within your typography. Font style utilities are simple but powerful for adding typographic nuance to your content. In Tailwind v4, font style utilities integrate better with custom fonts and variable fonts.

Typography1 variant4 examples

Official Docs Open Playground

Basic usage:

<p class="italic">This text is italic.</p>
<p class="not-italic">This text is not italic (normal).</p>

Examples

Basic italic and normal font styles

<p class="italic">This text is italic.</p>
<p class="not-italic">This text is not italic (normal).</p>

Edit in playground

Using italics strategically for emphasis, titles, and quotes

<!-- Using italics for emphasis in content -->
<article class="max-w-2xl mx-auto p-4">
  <h1 class="text-2xl font-bold mb-4">The Art of Typography</h1>
  <p class="mb-4">Typography is more than just choosing a font. It's about creating a <span class="italic">visual hierarchy</span> that guides readers through your content and enhances readability.</p>
  <p class="mb-4">As Robert Bringhurst stated in <span class="italic">The Elements of Typographic Style</span>, "Typography exists to honor content."</p>
  <blockquote class="border-l-4 border-gray-300 pl-4 mb-4 italic">
    Good typography can make the difference between a pleasant, engaging reading experience and one that is frustrating and tiresome.
  </blockquote>
  <p>The goal of thoughtful typography is <span class="not-italic font-bold">not merely decoration</span>, but to serve the reader.</p>
</article>

Edit in playground

Combining italic with different font families and weights

<!-- Combining italic with other typography utilities -->
<div class="space-y-4">
  <p class="text-lg font-serif italic">Serif italic text</p>
  <p class="text-lg font-sans italic">Sans-serif italic text</p>
  <p class="text-lg font-mono italic">Monospace italic text</p>
  <p class="text-lg font-bold italic">Bold italic text</p>
  <p class="text-lg font-light italic">Light italic text</p>
</div>

Edit in playground

Italic text in a modern card design

<!-- Italic text in a modern card design -->
<div class="max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden">
  <div class="bg-blue-600 p-6 text-white">
    <h2 class="text-xl font-bold">Modern Card Design</h2>
    <p class="italic">This card uses italic text for the subtitle, creating a nice contrast with the bold title.</p>
  </div>
  <div class="p-6">
    <p>Content goes here. The italic style adds a touch of elegance to the design.</p>
  </div>
</div>

Edit in playground