Tailwind Forms Plugin

The Tailwind Forms Plugin is a first-party plugin that resets and standardizes form controls across browsers while keeping them easily styleable with Tailwind classes.

1. Installation


npm install @tailwindcss/forms

Then add the plugin to your tailwind.config.js file:


module.exports = {
  content: ['./**/*.html'],
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

2. Default Styles Example

Here’s how a form looks after applying the plugin:


<form class="space-y-4">
  <label class="block">
    <span class="text-gray-700">Email</span>
    <input type="email" class="mt-1 block w-full" placeholder="you@example.com">
  </label>

  <label class="block">
    <span class="text-gray-700">Message</span>
    <textarea class="mt-1 block w-full" rows="3"></textarea>
  </label>
</form>

3. Customization Options

You can still apply custom utilities like border, rounded, focus:ring, etc., on top of the plugin styles:


<input type="text"
  class="w-full border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
/>

4. When to Use the Plugin

To normalize form element styles across browsers
When you want clean, unopinionated base styles
To avoid writing boilerplate CSS for inputs, selects, etc.

Conclusion

The Tailwind Forms Plugin simplifies form styling without adding visual clutter. It gives you clean, consistent defaults while still allowing full customization with utility classes.

← Previous: Floating Labels and Focus Styles Next: Interactive Forms with Validation Styling →