resize

Setting whether an element is resizable.

Overview

Examples

Allow both-axis resizing

Use resize:both on elements that should be manually resizable in both directions, such as textareas or debug panels.

<textarea class="resize:both min-w:20x min-h:12x">    Notes</textarea>

@layer utilities {    .resize\:both {        resize: both    }}

Restrict resizing to one axis

Use resize:vertical for text inputs that can grow without breaking the surrounding layout.

<textarea class="resize:vertical w:full min-h:10x">    Comment</textarea>

Disable native resizing

Use resize:none when the component already controls its own size or when the surrounding layout cannot absorb manual resizing.

<textarea class="resize:none">    Fixed size</textarea>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<textarea class="resize:none resize:vertical@sm resize:none@print">...</textarea>