Resize

Default class reference

Class	Properties
resize-none	resize: none;
resize-y	resize: vertical;
resize-x	resize: horizontal;
resize	resize: both;

Resize in all directions

Use resize to make an element horizontally and vertically resizable.

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

Resize vertically

Use resize-y to make an element vertically resizable.

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

Resize horizontally

Use resize-x to make an element horizontally resizable.

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

Prevent resizing

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

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

Customizing

Variants

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

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

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

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       resize: ['hover', 'focus'],
      }
    }
  }

Disabling

If you don't plan to use the resizing utilities in your project, you can disable them entirely by setting the resize property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     resize: false,
    }
  }