From 2418f4aded7ec4d004691a9c03dba357c5772cef Mon Sep 17 00:00:00 2001 From: levin too <44953808+levintoo@users.noreply.github.com> Date: Tue, 29 Apr 2025 01:28:50 +0300 Subject: [PATCH 1/6] docs(readme): add setup instructions for tailwind v4 --- README.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d20b50d..478d340 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,14 @@ Install the plugin from npm: npm install -D @tailwindcss/forms ``` -Then add the plugin to your `tailwind.config.js` file: +Add the plugin inside your main `style.css` file: + +```diff +@import "tailwindcss"; ++@plugin "@tailwindcss/forms"; +``` + +If you're still using **Tailwind v3**, add the plugin in your `tailwind.config.js` file: ```js // tailwind.config.js @@ -107,6 +114,16 @@ 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. +Configure the plugin in your main `style.css` like this: + +```css +@plugin "@tailwindcss/forms" { + strategy: "class", // or "base" +}; +``` + +If you're still using **Tailwind v3**, configure the plugin in your `tailwind.config.js` like this: + ```js // tailwind.config.js plugins: [ From c853608371c80ddec738f9b6ecf95d0ba7920f1d Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 17 Jun 2025 11:32:41 -0400 Subject: [PATCH 2/6] Tweak readme --- README.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 478d340..8faae26 100644 --- a/README.md +++ b/README.md @@ -10,14 +10,14 @@ Install the plugin from npm: npm install -D @tailwindcss/forms ``` -Add the plugin inside your main `style.css` file: +Add the plugin to your main stylesheet: -```diff +```css @import "tailwindcss"; -+@plugin "@tailwindcss/forms"; +@plugin "@tailwindcss/forms"; ``` -If you're still using **Tailwind v3**, add the plugin in your `tailwind.config.js` file: +If you're still using **Tailwind v3**, add the plugin to your `tailwind.config.js` file: ```js // tailwind.config.js @@ -114,15 +114,17 @@ 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. -Configure the plugin in your main `style.css` like this: +When using Tailwind CSS v4, configure the plugin in your main stylesheet: ```css +/* app.css */ @plugin "@tailwindcss/forms" { - strategy: "class", // or "base" -}; + strategy: "base"; /* only generate global styles; or */ + strategy: "class"; /* only generate classes */ +} ``` -If you're still using **Tailwind v3**, configure the plugin in your `tailwind.config.js` like this: +If you are still using **Tailwind CSS v3**, configure the plugin in your `tailwind.config.js` file: ```js // tailwind.config.js From aa4603ee36e6254dbe41abede07e568c0937ca5e Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 17 Jun 2025 11:37:32 -0400 Subject: [PATCH 3/6] Tweak wording a bit --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8faae26..2c27b72 100644 --- a/README.md +++ b/README.md @@ -10,14 +10,14 @@ Install the plugin from npm: npm install -D @tailwindcss/forms ``` -Add the plugin to your main stylesheet: +When using Tailwind CSS v4, add the plugin to your main stylesheet: ```css @import "tailwindcss"; @plugin "@tailwindcss/forms"; ``` -If you're still using **Tailwind v3**, add the plugin to your `tailwind.config.js` file: +If you are still using **Tailwind CSS v3**, add the plugin to your `tailwind.config.js` file: ```js // tailwind.config.js From c9448b3f0ebdf474453370f5a3682d237f808443 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 17 Jun 2025 11:38:12 -0400 Subject: [PATCH 4/6] Add stylesheet name comment just for consistency --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 2c27b72..8a500f6 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ npm install -D @tailwindcss/forms When using Tailwind CSS v4, add the plugin to your main stylesheet: ```css +/* app.css */ @import "tailwindcss"; @plugin "@tailwindcss/forms"; ``` From 275dba437b31ea3e9650f4544340216990db06ed Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 17 Jun 2025 11:51:30 -0400 Subject: [PATCH 5/6] tweak --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8a500f6..d0b60c6 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Install the plugin from npm: npm install -D @tailwindcss/forms ``` -When using Tailwind CSS v4, add the plugin to your main stylesheet: +Them, when using Tailwind CSS v4, add the plugin to your main stylesheet: ```css /* app.css */ From 1b54f5e09b2bcfe14edf60546160b1a85549cbdc Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 17 Jun 2025 11:52:03 -0400 Subject: [PATCH 6/6] typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d0b60c6..f816930 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Install the plugin from npm: npm install -D @tailwindcss/forms ``` -Them, when using Tailwind CSS v4, add the plugin to your main stylesheet: +Then, when using Tailwind CSS v4, add the plugin to your main stylesheet: ```css /* app.css */