@tailwindcss/forms

In Tailwind CSS v3, add the plugin to the plugins array in your tailwind.config.js file.

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

Install the @tailwindcss/forms plugin via npm to provide a basic reset for form styles that makes elements easy to override with Tailwind utilities.

npm install -D @tailwindcss/forms

In Tailwind CSS v4, add the plugin directly to your main CSS stylesheet using the @plugin directive.

/* app.css */
@import "tailwindcss";
@plugin "@tailwindcss/forms";

You can use the strategy option to control how styles are applied. This is useful when integrating into existing projects where global resets might be too heavy-handed.

• strategy: 'base': Only generates global styles for form elements. No form-{name} classes are generated.
• strategy: 'class': Only generates form-{name} classes. Form elements are not styled globally.

Configure the strategy by passing an options object to the require('@tailwindcss/forms') call in tailwind.config.js.

// tailwind.config.js
plugins: [
  require("@tailwindcss/forms")({
    strategy: 'base', // only generate global styles
    strategy: 'class', // only generate classes
  }),
],

Configure the strategy within the @plugin directive in your CSS file.

/* app.css */
@plugin "@tailwindcss/forms" {
  strategy: "base"; /* only generate global styles; or */
  strategy: "class"; /* only generate classes */
}

If you use the class strategy (or the default combined strategy), you can apply consistent styling to form elements using the following classes:

• Inputs & Textareas: .form-input, .form-textarea
• Selects: .form-select, .form-multiselect
• Checkboxes: .form-checkbox
• Radios: .form-radio

These classes provide consistent padding, borders, focus rings, and icon resets (like the chevron for selects).

The plugin generates a set of form-* classes that can be used to explicitly apply form styles to elements. This is useful for making non-form elements (like a <div>) look like form elements or when you want to avoid global resets.

<input type="email" class="form-input rounded-full px-4 py-3" />

<select class="form-select rounded-full px-4 py-3">
  <!-- ... -->
</select>

<input type="checkbox" class="form-checkbox rounded text-pink-500" />

The @tailwindcss/forms plugin accepts an optional strategy option to determine how styles are applied to form elements.

• base (default): Applies styles globally to form elements using CSS :where() selectors. This resets default browser styles without increasing specificity, making them easy to override.
• class (default): Applies styles using specific utility classes (e.g., .form-input, .form-checkbox).
• Combined (default): By default, the plugin applies both base and class strategies.

To use a specific strategy, pass an object with the strategy key to the plugin in your tailwind.config.js.

Use these classes to explicitly apply form styles to elements: