Text Transform - 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 = "text-transform"; export const description = "Utilities for controlling the capitalization of text.";

Examples

Uppercasing text

Use the uppercase utility to uppercase the text of an element:

<Figure> <Example> { The quick brown fox jumps over the lazy dog. } </Example>

html

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

</Figure>

Lowercasing text

Use the lowercase utility to lowercase the text of an element:

<Figure> <Example> { The quick brown fox jumps over the lazy dog. } </Example>

html

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

</Figure>

Capitalizing text

Use the capitalize utility to capitalize text of an element:

<Figure> <Example> { The quick brown fox jumps over the lazy dog. } </Example>

html

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

</Figure>

Resetting text casing

Use the normal-case utility to preserve the original text casing of an element—typically used to reset capitalization at different breakpoints:

<Figure> <Example> { The quick brown fox jumps over the lazy dog. } </Example>

html

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

</Figure>

Responsive design