# tailwindcss-patch

\[[中文(zh-cn)](./README-cn.md)\]

get tailwindcss context at runtime ! extract all classes into file!

- [tailwindcss-patch](#tailwindcss-patch)
  - [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.