1. Patch

This step is to export the context extracted from your tailwindcss into a Json file.

Installation

Choose your preferred package manager for installation.

npm i -D tailwindcss-patch

pnpm add -D tailwindcss-patch

yarn add --dev tailwindcss-patch

bun add --dev tailwindcss-patch

Patching

1. Patch tailwindcss

npx tw-patch install

pnpm dlx tw-patch install

yarn dlx tw-patch install

bun x tw-patch install

Register npm hook

1. Add the command to the prepare hook in npm

package.json

{
  /* ... */
  "scripts": {
    "prepare": "tw-patch install"
  }
}

Usage

Command Line Interface (CLI)

Start Extracting

npx tw-patch extract

pnpm dlx tw-patch extract

yarn dlx tw-patch extract

bun x tw-patch extract

By default, a json file .tw-patch/tw-class-list.json will appear in your project upon successful execution.

Of course, you can customize this behavior through the configuration file tailwindcss-mangle.config.ts.

Node.js API

import { TailwindcssPatcher } from 'tailwindcss-patch'
 
const twPatcher = new TailwindcssPatcher(/* options */)
// Perform patch action
twPatcher.patch()
// Get all contexts at runtime
twPatcher.getContexts()
// Get all classes generated by tailwindcss utilities
twPatcher.getClassSet()

The core of this phase is to obtain the .tw-patch/tw-class-list.json file.

Once it is generated, we can proceed with our Mangle process.

Configuration

Initialization

npx tw-patch init

pnpm dlx tw-patch init

yarn dlx tw-patch init

bun x tw-patch init

This will create a tailwindcss-mangle.config.ts file in your current working directory (cwd):

import { defineConfig } from 'tailwindcss-patch'
 
export default defineConfig({})

You can customize its behavior through the patch field:

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'
    }
  }
})