How to build textarea components using Tailwind CSS and Flowbite
Tags: flowbite, tailwindcss, webdev
Published: 2022-05-20 11:53:02

The textarea element is an important part of a form component because you can receive a larger amount of text from your users based on one or more horizontal rows.

Today I would like to show you how you can build a simple but also a more advanced textarea component using the utility classes from Tailwind CSS and inspired by the [Flowbite textarea components](https://flowbite.com/docs/forms/textarea/).

Before getting into the tutorial let me write you some details about the two technologies.

[Flowbite](https://flowbite.com/) is the most popular component library built with the utility classes from Tailwind CSS which also included a JS file that allows interactivity across components such as navbars, modals, dropdowns, datepickers, and more.

[Tailwind CSS](https://tailwindcss.com/) is the most widely used utility-first CSS framework and it changes the way you use classes and CSS with HTML element: you no longer have to write any extra CSS because you'll add all utility classes directly into your HTML.

These are the two textarea that we will build today:

[![Tailwind CSS Textarea](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/moo0qqb3hva6lc9adlgx.png)](https://flowbite.com/docs/forms/textarea/)

[![Tailwind CSS Comment Box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04ibq2y2ypt9i13jumil.png)](https://flowbite.com/docs/forms/textarea/#comment-box)

Let's get started!

## Tailwind CSS Textarea

First things first, we need to set up the HTML semantics:

```
<label for="message">Your message</label>
<textarea id="message" rows="4" placeholder="Your message..."></textarea>
```

Easy enough, right? Now let's add some extra styles to make it prettier:

```
<label for="message" class="block mb-2 text-sm font-medium text-gray-900">Your message</label>
<textarea id="message" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" placeholder="Your message..."></textarea>
```

Looking better, right? Now let's also add some dark mode classes to make it look better when dark mode is activated:

```

<label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Your message</label>
<textarea id="message" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Your message..."></textarea>
```

The final result should look like this (in dark mode):

[![Tailwind CSS Dark Textarea](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ph4ne2d7sn0sxb6ccfdi.png)](https://flowbite.com/docs/forms/textarea/)

Cool, now we will attempt to create a more advanced textarea component with additional options.

## Tailwind CSS Comment Box

Let's first set up the HTML semantics:

```
<form>
   <div class="mb-4 w-full bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-700 dark:border-gray-600">
       <div class="py-2 px-4 bg-white rounded-t-lg dark:bg-gray-800">
           <label for="comment" class="sr-only">Your comment</label>
           <textarea id="comment" rows="4" class="px-0 w-full text-sm text-gray-900 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400" placeholder="Write a comment..." required></textarea>
       </div>
       <div class="flex justify-between items-center py-2 px-3 border-t dark:border-gray-600">
           <button type="submit" class="inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900 hover:bg-blue-800">
               Post comment
           </button>
           <div class="flex pl-0 space-x-1 sm:pl-2">
               <button type="button" class="inline-flex justify-center p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
                   <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd"></path></svg>
               </button>
               <button type="button" class="inline-flex justify-center p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
                   <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
               </button>
               <button type="button" class="inline-flex justify-center p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
                   <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path></svg>
               </button>
           </div>
       </div>
   </div>
</form>
<p class="ml-auto text-xs text-gray-500 dark:text-gray-400">Remember, contributions to this topic should follow our <a href="#" class="text-blue-600 dark:text-blue-500 hover:underline">Community Guidelines</a>.</p>
```

In this example we've added a textarea inside a `form` element but also with a submit button, a helper text, and some action buttons on the bottom right side.

This can be easily used for blog comment sections and in other scenarios.

This [Tailwind CSS textarea](https://flowbite.com/docs/forms/textarea/) component has been inspired from the Flowbite library of components and you can check out all of the textarea examples on their website with dark mode support enabled.

[![Tailwind CSS Textarea Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9alwj4rpb1vz2gmt6wjr.png)](https://flowbite.com/docs/forms/textarea/#textarea-example)

[![Tailwind CSS WYSIWYG Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvsfsr5vgnamy6bbn8g0.png)
](https://flowbite.com/docs/forms/textarea/#wysiwyg-editor)

[![Tailwind CSS Comment Box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxc7px46snbtgg6rcpma.png)](https://flowbite.com/docs/forms/textarea/#comment-box)

[![Tailwind CSS Chatroom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvv9i3fipd1dfao0m1ny.png)](https://flowbite.com/docs/forms/textarea/#chatroom-input)

## Useful links

- [Tailwind CSS Textarea - Flowbite](https://flowbite.com/docs/forms/textarea/)
- [Flowbite - Tailwind CSS Components](https://flowbite.com/docs/getting-started/introduction/)