Font Smoothing

@include('_partials.class-table', [ 'rows' => [ [ '.antialiased', "-webkit-font-smoothing: antialiased;\n-moz-osx-font-smoothing: grayscale;", 'Set the font smoothing of an element to antialiased.', ], [ '.subpixel-antialiased', "-webkit-font-smoothing: auto;\n-moz-osx-font-smoothing: auto;", 'Set the font smoothing of an element to subpixel antialiasing (the default).', ], ] ])

Subpixel Antialiasing

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

@component('_partials.code-sample')

The quick brown fox jumped over the lazy dog.

@slot('code')

The quick brown fox ...

@endslot @endcomponent

Grayscale Antialiasing

Use the .antialiased utility to render text using grayscale antialiasing.

@component('_partials.code-sample')

The quick brown fox jumped over the lazy dog.

@slot('code')

The quick brown fox ...

@endslot @endcomponent

Responsive

To control the font smoothing of an element at a specific breakpoint, add a {screen}: prefix to any existing font smoothing utility. For example, use md:antialiased to apply the antialiased utility at only medium screen sizes and above.

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

@component('_partials.responsive-code-sample') @slot('none')

The quick brown fox jumped over the lazy dog.

@endslot @slot('sm')

The quick brown fox jumped over the lazy dog.

@endslot @slot('md')

The quick brown fox jumped over the lazy dog.

@endslot @slot('lg')

The quick brown fox jumped over the lazy dog.

@endslot @slot('xl')

The quick brown fox jumped over the lazy dog.

@endslot @slot('code')

The quick brown fox jumped over the lazy dog.

@endslot @endcomponent

Customizing

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'font smoothing', 'property' => 'fontSmoothing', ], 'variants' => [ 'responsive', ], ])