font-smoothing

Utilities for controlling the font smoothing of an element.

| | subpixel-antialiased |

-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;

|

Use the antialiased utility to render text using grayscale antialiasing:

The quick brown fox jumps over the lazy dog.

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

Use the subpixel-antialiased utility to render text using subpixel antialiasing:

The quick brown fox jumps over the lazy dog.

<p class="subpixel-antialiased ...">The quick brown fox ...</p>

Prefix -webkit-font-smoothing and -moz-osx-font-smoothing utilities with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

On this page

• Quick reference
• Examples
  • Grayscale antialiasing
  • Subpixel antialiasing
  • Responsive design

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.

Get the free course

Copyright © 2026 Tailwind Labs Inc.·Trademark Policy