docs: update installation guide to add tailwind css v4 instructions while keeping v3 details (#180)

levintoo · thecrypticace · web-flow · commit fc3f7e6bce06 · 2025-06-17T12:04:29.000-04:00
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>
diff --git 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: [
