Resize

Resize in all directions

Use resize to make an element horizontally and vertically resizable.

Resize vertically

Use resize-y to make an element vertically resizable.

Resize horizontally

Use resize-x to make an element horizontally resizable.

Prevent resizing

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

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,
    }
  }