# @tailwindcss/forms

> A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.

Latest version **0.5.11** (published 2025-12-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tailwindcss/forms
pnpm add @tailwindcss/forms
yarn add @tailwindcss/forms
bun add @tailwindcss/forms
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; no vulnerabilities; has provenance; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.5.11 |
| Published | 2025-12-17 |
| First published | 2020-11-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 54.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 4565 |
| Maintainers | reinink, adamwathan, malfaitrobin, thecrypticace |

## Links

- npm: https://www.npmjs.com/package/@tailwindcss/forms
- Repository: https://github.com/tailwindlabs/tailwindcss-forms
- Homepage: https://github.com/tailwindlabs/tailwindcss-forms#readme
- Issues: https://github.com/tailwindlabs/tailwindcss-forms/issues
- npm.io page: https://npm.io/package/@tailwindcss/forms

## Dependencies (1)

- [mini-svg-data-uri](https://npm.io/package/mini-svg-data-uri.md) ^1.2.3

## Recent versions

- 0.5.11 (latest) — 2025-12-17
- 0.0.0-insiders.741f3c4 (insiders) — 2026-05-12
- 0.4.0-alpha.2 (next) — 2021-11-08
- 0.2.0-8a8671b (internal) — 2021-02-26
- 0.0.0-insiders.e1b609d — 2025-12-17
- 0.0.0-insiders.67ff8ea — 2025-12-17
- 0.0.0-insiders.fc3f7e6 — 2025-06-17
- 0.5.10 — 2025-01-07
- 0.0.0-insiders.071d1c0 — 2025-01-07
- 0.0.0-insiders.b503c95 — 2025-01-07
- 0.0.0-insiders.781de1d — 2024-10-14
- 0.0.0-insiders.571354 — 2024-10-09
- 0.0.0-insiders.e581f0e — 2024-10-09
- 0.5.9 — 2024-09-05
- 0.0.0-insiders.02ef4f9 — 2024-09-05
- … 69 more at https://npm.io/package/@tailwindcss/forms/versions

## README

# @tailwindcss/forms

A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.

## Installation

Install the plugin from npm:

```sh
npm install -D @tailwindcss/forms
```

Then, when using Tailwind CSS v4, add the plugin to your main stylesheet:

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

If you are still using **Tailwind CSS v3**, add the plugin to your `tailwind.config.js` file:

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

## Basic usage

[**View the live demo**](https://tailwindcss-forms.vercel.app/)

All of the basic form elements you use will now have some simple default styles that are easy to override with utilities.

Currently we add basic utility-friendly form styles for the following form element types:

- `input[type='text']`
- `input[type='password']`
- `input[type='email']`
- `input[type='number']`
- `input[type='url']`
- `input[type='date']`
- `input[type='datetime-local']`
- `input[type='month']`
- `input[type='week']`
- `input[type='time']`
- `input[type='search']`
- `input[type='tel']`
- `input[type='checkbox']`
- `input[type='radio']`
- `select`
- `select[multiple]`
- `textarea`

Every element has been normalized/reset to a simple visually consistent style that is easy to customize with utilities, even elements like `<select>` or `<input type="checkbox">` that normally need to be reset with `appearance: none` and customized using custom CSS:

```html
<!-- You can actually customize padding on a select element now: -->
<select class="rounded-full px-4 py-3">
  <!-- ... -->
</select>

<!-- Or change a checkbox color using text color utilities: -->
<input type="checkbox" class="rounded text-pink-500" />
```

More customization examples and best practices coming soon.

### Using classes to style

In addition to the global styles, we also generate a set of corresponding classes which can be used to explicitly apply the form styles to an element. This can be useful in situations where you need to make a non-form element, such as a `<div>`, look like a form element.

```html
<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" />
```

Here is a complete table of the provided `form-*` classes for reference:

| Base                      | Class              |
| ------------------------- | ------------------ |
| `[type='text']`           | `form-input`       |
| `[type='email']`          | `form-input`       |
| `[type='url']`            | `form-input`       |
| `[type='password']`       | `form-input`       |
| `[type='number']`         | `form-input`       |
| `[type='date']`           | `form-input`       |
| `[type='datetime-local']` | `form-input`       |
| `[type='month']`          | `form-input`       |
| `[type='search']`         | `form-input`       |
| `[type='tel']`            | `form-input`       |
| `[type='time']`           | `form-input`       |
| `[type='week']`           | `form-input`       |
| `textarea`                | `form-textarea`    |
| `select`                  | `form-select`      |
| `select[multiple]`        | `form-multiselect` |
| `[type='checkbox']`       | `form-checkbox`    |
| `[type='radio']`          | `form-radio`       |

### Using only global styles or only classes

Although we recommend thinking of this plugin as a "form reset" rather than a collection of form component styles, in some cases our default approach may be too heavy-handed, especially when integrating this plugin into existing projects.

If generating both the global (base) styles and classes doesn't work well with your project, you can use the `strategy` option to limit the plugin to just one of these approaches.

When using Tailwind CSS v4, configure the plugin in your main stylesheet:

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

If you are still using **Tailwind CSS v3**, configure the plugin in your `tailwind.config.js` file:

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

When using the `base` strategy, form elements are styled globally, and no `form-{name}` classes are generated.

When using the `class` strategy, form elements are not styled globally, and instead must be styled using the generated `form-{name}` classes.

---
_Source: https://npm.io/package/@tailwindcss/forms · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._