Interactivity

Resize

Utilities for controlling how an element can be resized.

Quick reference

Basic usage

Resizing in all directions

Use resize to make an element horizontally and vertically resizable.

Drag the textarea handle in the demo to see the expected behaviour

<textarea class="resize rounded-md"></textarea>

Resizing vertically

Use resize-y to make an element vertically resizable.

Drag the textarea handle in the demo to see the expected behaviour

<textarea class="resize-y rounded-md"></textarea>

Resizing horizontally

Use resize-x to make an element horizontally resizable.

Drag the textarea handle in the demo to see the expected behaviour

<textarea class="resize-x rounded-md"></textarea>

Preventing resizing

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

Notice that the textarea handle is gone

<textarea class="resize-none rounded-md"></textarea>

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:resize to only apply the resize utility on hover.

<div class="resize-none hover:resize">
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:resize to apply the resize utility at only medium screen sizes and above.

<div class="resize-none md:resize">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.