Font Style - 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-style"; export const description = "Utilities for controlling the style of text.";

Examples

Italicizing text

Use the italic utility to make text italic:

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

html

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

</Figure>

Displaying text normally

Use the not-italic utility to display text normally:

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

html

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

</Figure>

Responsive design