How to create autosizing textarea

<form class="space-y-4 max-w-xs w-full">
    <div class="space-y-2.5">
        <label class="text-title" for="msg">Message</label>
        <textarea 
            placeholder="Your message..." 
            name="msg" 
            id="msg" 
            class="[field-sizing:content] block w-full resize-none rounded-md border border-gray-300 px-3.5 py-2 text-gray-950 shadow-xs outline-2 outline-indigo-600 focus:outline sm:text-sm/6 dark:text-white dark:border-gray-800 dark:bg-gray-800/25"
        >
        </textarea>
    </div>
</form>

Step-by-Step Guide

1. Base Structure

   Start with a basic form structure that includes:

   • A label for accessibility and context.
   • A textarea for user input.

   <form class="space-y-4 max-w-xs w-full">
       <div class="field">
           <label class="text-sm text-gray-950 dark:text-white" for="msg">Message</label>
           <textarea 
               placeholder="Your message..." 
               name="msg" 
               id="msg"
           >
           </textarea>
       </div>
   </form>
   

2. Style the textarea

   Apply TailwindCSS utilities to style the textarea for responsiveness, user experience, and visual appeal:

   <textarea 
       placeholder="Your message..." 
       name="msg" 
       id="msg"
       class="block w-full resize-none rounded-md border border-gray-300 px-3.5 py-1.5 text-title shadow-xs outline-2 outline-indigo-600 focus:outline sm:text-sm/6 dark:bg-gray-800/25"
   >
   </textarea>
   

   • block w-full: Makes the textarea responsive, filling its container width.
   • resize-none: Disables manual resizing.
   • rounded-md, border, and shadow-xs: Provide visual hierarchy.
   • Dark mode utilities like dark:bg-gray-800/25: Ensure compatibility with dark themes.

3. Add autosizing behavior

   To enable autosizing behavior, add the field-sizing: content; property using TailwindCSS. From TailwindCSS v4, this can be achieved using the utility class field-sizing-content.

   <textarea 
       placeholder="Your message..." 
       name="msg" 
       id="msg"
       class="block w-full [field-sizing:content] resize-none rounded-md border border-gray-300 px-3.5 py-1.5 text-title shadow-xs outline-2 outline-indigo-600 focus:outline sm:text-sm/6 dark:bg-gray-800/25"
   >
   </textarea>
   

   • The [field-sizing:content] property ensures that the textarea automatically adjusts its height to fit its content.
   • TailwindCSS v4 introduces a shorthand utility for this: field-sizing-content.

Example with max-height

To prevent the textarea from expanding indefinitely, you can set a maximum height using the max-h-* utility.

<form class="space-y-4 max-w-xs w-full">
    <div class="space-y-2.5">
        <label class="text-title" for="msg">Message</label>
        <textarea 
            placeholder="Your message..." 
            name="msg" 
            id="msg" 
            class="block w-full [field-sizing:content] max-h-20 resize-none rounded-md border border-gray-300 px-3.5 py-2 text-gray-950 shadow-xs outline-2 outline-indigo-600 focus:outline sm:text-sm/6 dark:text-white dark:border-gray-800 dark:bg-gray-800/25"
        >
        </textarea>
    </div>
</form>

max-h-20: Restricts the height of the textarea to 5rem.

Browser Compatibility

The field-sizing: content; property works in most modern browsers. However, if browser support is critical, you might consider using a JavaScript-based autosizing solution (e.g., adjusting height dynamically with scrollHeight).