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="min-h:12x min-w:20x resize:both">  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="w:full min-h:10x resize:vertical">  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:none@print resize:vertical@sm">...</textarea>