Font Smoothing - Tailwindcss

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "font-smoothing"; export const description = "Utilities for controlling the font smoothing of an element.";

Examples

Grayscale antialiasing

Use the antialiased utility to render text using grayscale antialiasing:

<Figure> <Example> { <p className="text-center text-lg font-medium text-gray-900 antialiased dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </p> } </Example>

html

<!-- [!code classes:antialiased] -->
<p class="antialiased ...">The quick brown fox ...</p>

</Figure>

Subpixel antialiasing

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

<Figure> <Example> { <p className="text-center text-lg font-medium text-gray-900 subpixel-antialiased dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </p> } </Example>

html

<!-- [!code classes:subpixel-antialiased] -->
<p class="subpixel-antialiased ...">The quick brown fox ...</p>

</Figure>

Responsive design