Resize

Resize in all directions

Use to make an element horizontally and vertically resizable.

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

<textarea class="resize-y border rounded focus:outline-none focus:shadow-outline"></textarea>

Resize horizontally

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

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

<textarea class="resize-none border rounded focus:outline-none focus:shadow-outline"></textarea>

Customizing

By default, only responsive variants are generated for resizing utilities.

You can control which variants are generated for the resizing utilities by modifying the property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

Disabling

    corePlugins: {
      // ...
+     resize: false,
    }

← Pointer Events