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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertically Resizable Textarea with Tailwind CSS</title>
<link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100
flex items-center
justify-center h-screen">
<div class="max-w-sm mx-auto">
<textarea class="resize-y
border border-gray-300
p-2 w-full h-32">
</textarea>
</div>
</body>
</html>
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertically Resizable Textarea
with Tailwind CSS and Custom CSS</title>
<link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
.custom-resize {
resize: vertical;
overflow: auto;
}
</style>
</head>
<body class="bg-gray-100 flex items-center
justify-center h-screen">
<div class="max-w-sm mx-auto">
<textarea class="custom-resize border
border-gray-300 p-2
w-full h-32">
</textarea>
</div>
</body>
</html>
Output: