Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,15 @@ Install the plugin from npm:
npm install -D @tailwindcss/forms
```

Then add the plugin to your `tailwind.config.js` file:
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
Expand Down Expand Up @@ -107,6 +115,18 @@ Although we recommend thinking of this plugin as a "form reset" rather than a co

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: [
Expand Down