Resize
Utilities for controlling how an element can be resized.
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,
}
}