You're looking at the documentation for Tailwind CSS v2.
Tailwind CSS on GitHub


Utilities for controlling how an element can be resized.

Default class reference

resize-noneresize: none;
resize-yresize: vertical;
resize-xresize: horizontal;
resizeresize: 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>



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'],


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,