Resize

Resize in all directions

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

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

Resize vertically

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.

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

Prevent resizing

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

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

Customizing

Responsive and pseudo-class 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: {
      // ...
-     resize: ['responsive'],
+     resize: ['responsive', '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,
    }
  }