Styling forms with Tailwind CSS

Browser default form styles look different everywhere. Chrome does one thing. Firefox does another. Safari has its own ideas.

And if you want to customize them? Good luck with that.

You end up writing CSS that looks like this: appearance: none, outline: none, custom focus states, custom checkboxes, custom radio buttons. It gets messy fast.

But there's a better way. Tailwind CSS makes styling forms straightforward, and with the official forms plugin, you can skip all the browser reset nonsense and start building.

Why default form styles are a nightmare

Let me tell you what happens when you try to style a basic form input across different browsers without any reset.

In Chrome, your input has one border style. In Firefox, it's slightly different. Safari adds its own special touch with rounded corners you didn't ask for. And don't even get me started on what happens when you try to style a select dropdown or checkbox.

The default checkbox in each browser looks completely different. Chrome gives you a blue checkmark, Firefox has its own version, and Safari does something else entirely.

This is why developers spend hours writing CSS resets just to get a consistent starting point:

input, textarea, select {
  appearance: none;
  border: 1px solid #ccc;
  padding: 0.5rem;
  font-size: 1rem;
}
input:focus, textarea:focus, select:focus {

outline: none;

border-color: #3b82f6;

box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

}

Notice how these elements look inconsistent and difficult to style. That's the web development experience we're trying to escape.

The @tailwindcss/forms plugin makes everything easier

Here's where things get interesting. The Tailwind Labs team built an official plugin that solves this entire mess for you.

The @tailwindcss/forms plugin resets all your form elements to a clean, consistent baseline across every browser. No more cross-browser inconsistencies. No more writing appearance resets.

Installing it takes about 30 seconds.

First, install the package:

npm install -D @tailwindcss/forms

If you're using Tailwind CSS v4 (the latest version), add it to your main stylesheet:

@import "tailwindcss";
@plugin "@tailwindcss/forms";

For Tailwind CSS v3, you add it to your tailwind.config.js file instead:

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

That's it. Your forms now have a consistent baseline across all browsers, and you can style them with regular Tailwind utility classes without any extra work.

Choosing between base and class strategies

The forms plugin gives you two ways to apply its styles. And choosing the right one depends on how you like to work.

Base strategy applies form styling globally to all your form elements automatically. You don't need to add any classes - every input, textarea, select, checkbox, and radio button gets styled right out of the box.

Class strategy is opt-in. Form elements stay unstyled until you explicitly add classes like form-input, form-select, form-checkbox, etc.

Most developers prefer the base strategy because it just works everywhere. But if you're working on a project where you need fine control over which forms get styled, the class strategy might be better.

Here's how to configure each one.

For Tailwind CSS v4, you set the strategy in your stylesheet:

@import "tailwindcss";
@plugin "@tailwindcss/forms" {

strategy: "base";

}

For Tailwind CSS v3, you pass it as an option in your config:

module.exports = {
  plugins: [
    require('@tailwindcss/forms')({
      strategy: 'base',
    }),
  ],
}

When you use the class strategy, you apply specific classes to your form elements:

  Option 1

My recommendation? Start with base strategy. It's less typing, and your forms will look good everywhere without thinking about it. You can always switch to class strategy later if you need more control.

Styling different form elements with utilities

Once the plugin is installed, styling form elements becomes ridiculously easy. You can use standard Tailwind utility classes to customize colors, borders, sizing, and more.

Let me show you how to style each type of form element.

Text inputs are probably the most common form element. You can change their appearance with border utilities, focus states, and sizing:

Textareas work the same way. Just add your utility classes and watch them transform:

Select dropdowns can be customized too. Change the border, background, text size, whatever you need:

  Option 1
  Option 2
  Option 3

Checkboxes and radio buttons are where the plugin really shines. These are notoriously difficult to style with plain CSS, but with the forms plugin, you can change their colors easily:

The best part? All of this works across browsers without any extra CSS. You're just using utility classes like you would for any other element.

Building a complete form example

Let's put everything together and build a real contact form. This will include multiple input types, proper spacing, focus states, and responsive design.

Here's what we'll create: a form with text inputs, email, textarea, select dropdown, checkboxes, and a submit button. All styled with just utility classes:

  
Get in Touch
  

    

      First Name
      
    
    

      Last Name
      
    
  
  

    Email
    
  
  

    Subject
    
      General Inquiry
      Support
      Sales
    
  
  

    Message
    
  
  

    
    Send me a copy of this message
  
  
    Send Message
  

Look at that. A fully functional, beautiful form with zero custom CSS. Just utility classes doing all the work.

The form is responsive (notice the grid-cols-1 md:grid-cols-2 on the name fields), has consistent focus states across all inputs, and works perfectly in every browser.

That's how you style forms with Tailwind CSS.

The @tailwindcss/forms plugin takes care of all the annoying browser inconsistencies, and you get to focus on building instead of fighting with CSS resets. You can customize every detail with utility classes, and it all just works.

No more wrestling with appearance: none. No more browser-specific hacks. Just clean, maintainable code that looks good everywhere.

Give it a try on your next project. You'll wonder how you ever built forms without it.