Tailwind CSS Textarea

Use responsive textarea component with helper examples for tailwind textarea with a default height & border, and a resize option.Easy to customize.

Basic example

Text fields allow users to enter text into the user interface. They typically appear in forms and dialog boxes. Textarea component extended user input so that more of the text is visible.

Example textarea

HTML
javascript

        
            
      <div class="relative mb-3" data-twe-input-wrapper-init>
        <textarea
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
          id="exampleFormControlTextarea1"
          rows="3"
          placeholder="Your message"></textarea>
        <label
          for="exampleFormControlTextarea1"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >Example textarea</label
        >
      </div>

        
            
      // Initialization for ES Users
      import {
        Input,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Input });

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Textarea

Tailwind CSS Textarea

Basic example

Access restricted

To view this section you must have an active PRO account

Textarea

Tailwind CSS Textarea

Basic example

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):