How to Drag the Textarea Vertically in Tailwind CSS?

In web development, textarea is used to collect multi-line text inputs from users. However, by default, a textarea is resizable in both directions—horizontally and vertically. There are different situations where we want to limit this resizing to vertical only, to maintain a consistent layout or design. We can add a vertical drag feature in textarea using tailwind CSS. In this article, we are going to discuss how we can create a vertically resizable textarea using Tailwind CSS.

Below are possible approaches to making a textarea resizable vertically using Tailwind CSS:

Using Tailwind CSS Utility Classes

Tailwind CSS provides utility classes that allow for easy customization of textarea fields vertically. To make a textarea vertically resizable, we can use the resize-y class provided by Tailwind.

Syntax:

<div class="max-w-sm mx-auto">
 <textarea class="resize-y border border-gray-300 p-2 w-full h-32"></textarea>
</div>

Example: This HTML document creates a basic webpage that features a vertically resizable textarea using Tailwind CSS.

Output:

Combining Tailwind CSS with Custom CSS

When we want more control over the resizing behavior, we can use custom CSS. This let us:

• to set rules, like making sure the textarea doesn’t get too small when someone resizes it.
• If we types more text than fits in the box, you can make sure scrollbars appear so they can still see all their content.
• By adding custom CSS, we can ensure the textarea behaves the same way across different browsers, so everyone gets a consistent experience.

Syntax:

HTML Structure

<textarea class="custom-resize border border-gray-300 p-2"></textarea>

Custom CSS: We add the following CSS to your stylesheet

.custom-resize {
 resize: vertical;
 overflow: auto;
}

Example: This HTML document creates a webpage with a vertically resizable textarea using both Tailwind CSS and custom CSS.

Output: