Tailwind CSS Textarea

To use these form components, remember to:

1. Install the official Tailwind CSS forms plugin using:

npm install -D @tailwindcss/forms

2. Add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
    theme: {
    // ...
    },
    plugins: [
    require('@tailwindcss/forms'),
    // ...
    ],
}

1. Basic Tailwind Textarea

<textarea class="w-full h-32 p-4 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none" placeholder="Enter your text...">
</textarea>

2. Resizable Tailwind Textarea

<textarea class="w-full h-32 p-4 border border-gray-300 rounded-lg resize" placeholder="You can resize me...">
</textarea>

3. Textarea with Label

Your Feedback

<label class="block mb-1 text-sm font-medium text-gray-700">Your Feedback</label>
<textarea class="w-full h-32 p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none" placeholder="Write your feedback..."></textarea>

4. Textarea with Floating Label

Your Name

<div class="relative">
  <textarea class="w-full h-32 p-4 pt-8 border border-gray-300 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder=" "></textarea>
  <label class="absolute left-4 top-3 transform -translate-y-1/2 transition-all duration-200 text-gray-500 pt-3 px-1">Your Name</label>
</div>