chore: add a draft

Author: sonofmagic

packages/tailwindcss-patch/draft.md

@@ -0,0 +1,120 @@
+# Use `tailwindcss-patch 2.x` to extract your classNames
+
+`tailwindcss-patch` is an extension to the `tailwindcss` ecosystem. It is also an important part of the [`tailwindcss-mangle`](https://github.com/sonofmagic/tailwindcss-mangle) project.
+
+I recently released `2.x` version of `tailwindcss-patch`, which adds a configuration file reading and tool class name extraction feature.
+
+Let's see how to use it. It's fairly simple!
+
+- [Use `tailwindcss-patch 2.x` to extract your classNames](#use-tailwindcss-patch-2x-to-extract-your-classnames)
+  - [Setup](#setup)
+  - [Usage](#usage)
+  - [Cli](#cli)
+    - [Extract all class into a json](#extract-all-class-into-a-json)
+  - [Nodejs API](#nodejs-api)
+  - [Config](#config)
+    - [Init Config File](#init-config-file)
+  - [What's next?](#whats-next)
+
+> Nodejs version should >= `16.6.0`
+
+## Setup
+
+1. Install package
+
+```sh
+<yarn|npm|pnpm> add -D tailwindcss-patch
+```
+
+2. Patch tailwindcss
+
+```sh
+npx tw-patch install
+```
+
+3. Add `prepare` script (keeps patch persisted after npm install)
+
+`package.json`
+
+```json
+{
+  /* ... */
+  "scripts": {
+    "prepare": "tw-patch install"
+  }
+}
+```
+
+## Usage
+
+## Cli
+
+### Extract all class into a json
+
+```sh
+npx tw-patch extract
+```
+
+default there will be a json in `.tw-patch/tw-class-list.json` in your project.
+
+you can custom this behavior by config `tailwindcss-mangle.config.ts`
+
+## Nodejs API
+
+```js
+import { TailwindcssPatcher } from 'tailwindcss-patch'
+
+const twPatcher = new TailwindcssPatcher(/* options */)
+// do patch
+twPatcher.patch()
+// get all contexts at runtime
+twPatcher.getContexts()
+// get all class generated by tailwindcss utilities
+twPatcher.getClassSet()
+```
+
+## Config
+
+### Init Config File
+
+```sh
+npx tw-patch init
+```
+
+Then there will be a ts file called `tailwindcss-mangle.config.ts` exist in your `cwd`.
+
+The config as follows:
+
+```ts
+import { defineConfig } from 'tailwindcss-patch'
+
+export default defineConfig({})
+```
+
+you can custom `tw-patch` behavior by `patch` option:
+
+```ts
+import { defineConfig } from 'tailwindcss-patch'
+
+export default defineConfig({
+  patch: {
+    output: {
+      filename: 'xxx.json',
+      loose: true,
+      removeUniversalSelector: true
+    },
+    tailwindcss: {
+      config: 'path/to/your-tailwind.config.js',
+      cwd: 'project/cwd'
+    }
+  }
+})
+```
+
+## What's next?
+
+At the moment I just extracted all the tool classes to actually get the context of `tailwindcss` to analyze. You can add more functionality to this project by giving me `issue` or `pr`.
+
+Of course, the extracted `JSON` isn't just for you to look at. You can analyze it, and I use it as a data file for my `tailwindcss-mangle`.
+
+The `tailwindcss-mangle` itself is an obfuscation tool to obfuscate the tools generated by `tailwindcss`, see the next article for more details on how to use it.