Tailwind CSS Resize Cheatsheet
Complete reference for all Tailwind resize utilities.
Try resizing the interactive demos below. Click to copy class names.
Quick Navigation
Resize Utilities
Control whether and how an element can be resized by the user. The resize handle typically appears in the bottom-right corner.
Interactive Demos
Try resizing each element to see the behavior
resize-none - Interactive Demo
Prevents the user from resizing the element. This is commonly used on textareas where you want a fixed size.
With resize-none
Cannot be resized
Default textarea (resizable)
Browser default (usually resizable)
<textarea class="resize-none h-32 w-full"> Cannot be resized </textarea>
resize-y - Interactive Demo
Allows the element to be resized vertically only. The width stays fixed while height can be adjusted.
Vertical resize only
Drag bottom edge to resize height
Common use: Comment boxes, text inputs where you want users to expand vertically but maintain consistent width.
<textarea class="resize-y h-32 w-full"> Vertically resizable </textarea>
resize-x - Interactive Demo
Allows the element to be resized horizontally only. The height stays fixed while width can be adjusted.
Horizontal resize only
Drag right edge to resize width
Common use: Code editors, sidebars, or panels where horizontal space adjustment is useful but vertical layout should remain fixed.
<textarea class="resize-x h-32 w-full"> Horizontally resizable </textarea>
resize - Interactive Demo
Allows the element to be resized in both directions. Users can adjust both width and height freely.
Resize in both directions
Drag corners or edges to resize freely
<textarea class="resize h-32 w-full"> Fully resizable </textarea>
Resizable Div Elements
The resize property works on any block element, not just textareas. However, you must also set an overflow value other than visible.
Resizable div with overflow-auto
This is a resizable div element.
Drag the corner to resize it.
Content will scroll if it overflows.
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.
resize + overflow-auto
Without overflow (won't resize)
This div has resize but no overflow set.
The resize handle won't appear!
resize alone doesn't work on divs
Important: For non-textarea elements, always combine resize with an overflow class like overflow-auto or overflow-hidden.
<!-- Works: resize + overflow --> <div class="resize overflow-auto h-40 w-64"> Resizable content </div> <!-- Won't work: resize without overflow --> <div class="resize h-40 w-64"> Not resizable </div>
Common Patterns
Fixed-Size Textarea
<textarea
class="resize-none w-full h-32
border rounded-lg p-3"
placeholder="Comment..."
></textarea>Auto-Expand Textarea
<textarea
class="resize-y w-full min-h-32
max-h-96 border rounded-lg p-3"
placeholder="Write more..."
></textarea>Resizable Code Editor
<div class="resize overflow-auto
h-64 w-full bg-gray-900
rounded-lg font-mono p-4">
<code class="text-green-400">
// Your code here
</code>
</div>Resizable Sidebar
<aside class="resize-x overflow-auto
w-64 min-w-48 max-w-96
h-screen bg-base-200">
<!-- Sidebar content -->
</aside>Modal with Resizable Content
<div class="modal-box">
<h3>Edit Content</h3>
<textarea
class="resize-y w-full min-h-40
border rounded p-3"
></textarea>
</div>Resizable Panel
<div class="resize overflow-hidden
w-80 h-60 min-w-64 min-h-40
border rounded-xl shadow-lg">
<div class="h-full overflow-auto p-4">
Panel content...
</div>
</div>Quick Reference Table
| Class | CSS | Behavior |
|---|---|---|
resize-none | resize: none; | Prevents any resizing |
resize-y | resize: vertical; | Allows vertical resizing only |
resize-x | resize: horizontal; | Allows horizontal resizing only |
resize | resize: both; | Allows resizing in both directions |
Remember: For non-form elements (like divs), you must also apply an overflow class for resize to work.
Frequently Asked Questions
What resize classes are available in Tailwind CSS?
Tailwind CSS provides four resize utilities: resize-none (prevents resizing), resize-y (vertical resizing only), resize-x (horizontal resizing only), and resize (resizing in both directions).
How do I disable textarea resize in Tailwind CSS?
Add the resize-none class to your textarea element: <textarea class="resize-none">. This prevents users from resizing the textarea in any direction.
Why doesn't resize work on my element?
The resize property only works on elements with overflow set to something other than visible. Add overflow-auto or overflow-hidden along with your resize class. Also, resize only works on block-level elements.
How do I make a div resizable in Tailwind?
Add the resize class along with an overflow class like overflow-auto. For example: <div class="resize overflow-auto h-32 w-64">Resizable content</div>. The element must have a defined size.
Can I set minimum and maximum sizes for resizable elements?
Yes! Combine resize utilities with min/max size utilities. For example: <textarea class="resize-y min-h-32 max-h-96"> allows vertical resizing between 8rem and 24rem.
Does resize work on all browsers?
The resize property is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. However, the resize handle appearance may vary between browsers and operating systems.
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow