Tailwind CSS: How to Disable Resizing of Textarea

Updated: December 9, 2023 By: Khue Post a comment

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!