From f19756aee9cadf03207579a4149aec13b2de12f1 Mon Sep 17 00:00:00 2001
From: gnarus-g <37311893+Gnarus-G@users.noreply.github.com>
Date: Sun, 10 Mar 2024 18:55:15 -0400
Subject: [PATCH] docs: better deprecation guide

---
 README.md | 58 +++++++++++++++++++++----------------------------------
 1 file changed, 22 insertions(+), 36 deletions(-)

diff --git a/README.md b/README.md
index ef0e315..e2100e5 100644
--- a/README.md
+++ b/README.md
@@ -35,71 +35,57 @@ in the old `tailwind.config.js`.
 In the root of your project. Run:
 
 ```sh
-echo '@tailwind utilities;' > temp.css
+echo '@tailwind base; @tailwind components; @tailwind utilities;' > temp.css
 npx tailwindcss -i temp.css -o legacy-tw.css
 cnat prefix -i legacy-tw.css --prefix 'legacy-' ./src
 ```
 
-By default, `cnat prefix` will crawl through all the `class=*`, `className=*` in jsx elements and `className:*` in a `React.createElement` calls, inside of `ts|js|tsx|jsx` files.
-It will match any class in the source code with classes found in `legacy-tw.css` (which contains every style that tailwind generates based on your config).
-
-Add the prefix in the legacy config file.
-
 **Pro Tip**: Run your code formatter before running `cnat`. Check the formatted code into version control.
 Then run the command, and run your code formatter again. Now you can go through and check the git diffs to make sure everything is
 allright.
 
-```ts
-export default {
-  prefix: "legacy-",
-};
-```
+By default, `cnat prefix` will crawl through all the `class=*`, `className=*` in jsx elements and `className:*` in a `React.createElement` calls, inside of `ts|js|tsx|jsx` files.
+It will match any class in the source code with classes found in `legacy-tw.css` (which contains every style that tailwind generates based on your config).
 
-Then update your global css with the tailwind directives. Rename the file for the old configs, `tailwind.legacy.config.ts`.
+Rename the file for the old configs, `tailwind.legacy.config.ts`.
 
 ```sh
 mv tailwind.config.ts tailwind.legacy.config.ts # or *.js if your tailwind config files aren't in typescript
 ```
 
-Then, create an additional css file which the tailwind directives as such:
-
-`./legacy-tw.css`
+Add the prefix in the legacy config file.
 
-```css
-/* Make sure this is a real path in case you css file isn't at the root of the project. */
-@config "./tailwind.legacy.config.ts";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+```ts
+export default {
+  prefix: "legacy-",
+};
 ```
 
-`@config` requires tailwind v3.2 btw.
-
-Import that css file in where-ever the entry point for your project is. For example in Nextjs, you can add it to the `_app.tsx` file (pages directory version).
-
-Now you can init new configs.
+Run the tailwind cli again to rebuild the legacy css classes. Now they will be prefixed since the `tailwind.legacy.config.ts` defined
+the 'legacy-'
 
 ```sh
-npx tailwindcss init
+npx tailwindcss -i temp.css -o legacy-tw.css -c tailwind.legacy.config.ts
 ```
 
-Now in a new `global.css` file
+Then, import the legacy css into your global css file.
 
 ```css
-/* Again mind the path. */
-@config "./tailwind.config.ts"
-@tailwind base;
+@import "./legacy-tw.css" @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* And whatever else you have in here */
 ```
 
-```ts
-// Again mind the paths.
-import "./legacy-tw.css";
-import "./global.css";
+Now you can re-init new configs.
+
+```sh
+# You'd have to delete the current `tailwind.config.ts` if you haven't already.
+npx tailwindcss init --ts
 ```
 
-And now you can breathe.
+And now you can breathe. A fresh new start; ignoring what's under the bed now.
 
 ## Usage