Resize

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 = "resize"; export const description = "Utilities for controlling how an element can be resized.";

Examples

Resizing in all directions

Use resize to make an element horizontally and vertically resizable:

{ }

<!-- [!code classes:resize] -->
<textarea class="resize rounded-md ..."></textarea>

Resizing vertically

Use resize-y to make an element vertically resizable:

{ }

<!-- [!code classes:resize-y] -->
<textarea class="resize-y rounded-md ..."></textarea>

Resizing horizontally

Use resize-x to make an element horizontally resizable:

{ }

<!-- [!code classes:resize-x] -->
<textarea class="resize-x rounded-md ..."></textarea>

Prevent resizing

Use resize-none to prevent an element from being resizable:

{ }

<!-- [!code classes:resize-none] -->
<textarea class="resize-none rounded-md"></textarea>

Responsive design