1. Patch

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

Installation

Install using your preferred package manager:

npm i -D tailwindcss-patch

Apply the Patch

1. Apply the patch to tailwindcss

npx tw-patch install

Register npm hook

1. Add the following command to the prepare hook in your npm configuration.

package.json

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

Usage

Command-line Cli

Start Extraction

npx tw-patch extract

By default, after a successful execution, a json file .tw-patch/tw-class-list.json will be generated in your project.

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

Nodejs API

import { TailwindcssPatcher } from 'tailwindcss-patch'
 
const twPatcher = new TailwindcssPatcher(/* options */)
// Perform the 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, you can start the Mangle process.

Configuration

Initialization

npx tw-patch init

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

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

You can customize its behavior using 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'
    }
  }
})