Sling Academy
Home/Tailwind CSS/Tailwind CSS: How to Disable Resizing of Textarea

Tailwind CSS: How to Disable Resizing of Textarea

Last updated: December 09, 2023

In Tailwind CSS, you can prevent a <textarea> from being resized by using the resize-none utility class. When the textarea is unresizable, the resizer icon will disappear as well.

Example:

<body class="bg-green-200 p-20 space-y-3">
    <h1 class="text-2xl">Disable Textarea Resizing</h1>
    <textarea class="resize-none px-2 py-3 w-96 h-48" placeholder="You cannot resize this textarea"></textarea>
</body>

Screenshot:

That’s it. Happy coding & have a nice day!

Next Article: How to Create Pill Buttons with Tailwind CSS

Previous Article: Tailwind CSS: Create a Floating Action Button (FAB)

Series: Styling Form Elements with Tailwind CSS

Tailwind CSS

Related Articles

You May Also Like

  • How to Create Striped Tables with Tailwind CSS
  • Tailwind CSS: Creating Shimmer Loading Placeholder (Skeleton)
  • Tailwind CSS: How to Create Parallax Scrolling Effect
  • How to Style Lists in Tailwind CSS
  • Text Underline in Tailwind CSS
  • How to Change Mouse Cursor in Tailwind CSS
  • Form Validation with Tailwind CSS (without Javascript)
  • first-of-type and last-of-type in Tailwind CSS
  • Tailwind CSS: Create a User Card with Circle Avatar
  • Tailwind CSS: How to Create Columns with the Same Height
  • How to Style Placeholder Text with Tailwind CSS
  • Tailwind CSS: Make a Div 100% Height & Width of the Viewport
  • Using :not() selector in Tailwind CSS
  • Tailwind CSS: How to Create a Stepper
  • Using ::before and ::after in Tailwind CSS
  • Tailwind CSS: How to Create a Vertical Divider Line
  • How to Create Pill Buttons with Tailwind CSS
  • Tailwind CSS: How to Disable Text Selection
  • Tailwind CSS: Expand a Text Input on Focus (without Javascript)