From fc3f7e6bce06a1985d445c53e90c3c7fac0e1d18 Mon Sep 17 00:00:00 2001
From: levin too <44953808+levintoo@users.noreply.github.com>
Date: Tue, 17 Jun 2025 19:04:29 +0300
Subject: [PATCH] docs: update installation guide to add tailwind css v4
 instructions while keeping v3 details (#180)

This PR updates the installation guide for this plugin,
[@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms),
to include setup instructions for Tailwind CSS v4 using `@plugin` in the
`style.css` file, while retaining the existing instructions for v3 users
who are yet to upgrade.

**Why this PR?**
Based on my experience, I've had to refer to the typography plugin docs
for setup instructions and adapt them for the forms plugin. This update
ensures the guide is clear and useful for both Tailwind CSS v3 and v4
users.

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
---
 README.md | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d20b50d..f816930 100644
--- a/README.md
+++ b/README.md
@@ -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
@@ -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: [