Utilities for controlling how an element can be resized.
<textarea class="resize border rounded-md"></textarea>
<textarea class="resize-y border rounded-md"></textarea>
<textarea class="resize-x border rounded-md"></textarea>
<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,
}
}