---
url: /docs/foundations/css-classes/resize.md
---
> Interactivity

# Resize

Utilities for controlling how an element can be resized.

## Quick reference

| Class | Description |
|-------|-------------|
| `resize-none` | `resize: none` |
| `resize-y` | `resize: vertical` |
| `resize-x` | `resize: horizontal` |
| `resize` | `resize: both` |

## Basic usage

### Resizing in all directions

Use `resize` to make an element horizontally and vertically resizable.

```html
<div class="resize ..."></div>
```

### Resizing vertically

Use `resize-y` to make an element vertically resizable.

```html
<div class="resize-y ..."></div>
```

### Resizing horizontally

Use `resize-x` to make an element horizontally resizable.

```html
<div class="resize-x ..."></div>
```

### Preventing resizing

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

```html
<textarea class="resize-none ..."></textarea>
```

## Applying conditionally

### Hover, focus, and other states

Warp 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.

```html
<div class="resize-none hover:resize"></div>
```

### 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.

```html
<div class="resize-none md:resize"></div>
```