### Install tailwindcss-patch

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/README.md

Install the package as a development dependency and run the initial setup command.

```bash
pnpm add -D tailwindcss-patch
pnpm dlx tw-patch install
```

--------------------------------

### Basic Configuration with defineConfig

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/draft.md

An example of initializing a configuration file using defineConfig with default options.

```ts
import { defineConfig } from 'tailwindcss-patch'

export default defineConfig({})
```

--------------------------------

### Run Development Server (npm)

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/apps/next-app/README.md

Use this command to start the Next.js development server with npm.

```bash
npm run dev
```

--------------------------------

### Install and Extract TW Patch

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/website/content/en/integration.mdx

Run these commands before enabling the plugin to prepare your project. Ensure `prepare: tw-patch install` is in your app scripts and `registry.file` points to `.tw-patch/tw-class-list.json`.

```sh
npx tw-patch install
npx tw-patch extract
```

--------------------------------

### Install and Extract Tailwind Classes

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/website/content/en/index.mdx

Install the necessary packages and run the patch command to extract Tailwind CSS class lists. This is the initial setup for the two-step workflow.

```sh
npm i -D tailwindcss-patch unplugin-tailwindcss-mangle
npx tw-patch install
npx tw-patch extract
```

--------------------------------

### Package-Specific Development Build

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/CLAUDE.md

Example command to run the development build for the 'core' package.

```bash
cd packages/core && pnpm dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/apps/solid-app/README.md

Installs project dependencies using npm, pnpm, or yarn. Ensure you have a package manager installed.

```bash
npm install # or pnpm install or yarn install
```

--------------------------------

### Run Development Server with bun

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/apps/next-app-router/README.md

Use this command to start the Next.js development server using bun.

```bash
bun dev
```

--------------------------------

### Run Development Server (yarn)

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/apps/next-app/README.md

Use this command to start the Next.js development server with yarn.

```bash
yarn dev
```

--------------------------------

### Run Development Server (pnpm)

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/apps/next-app/README.md

Use this command to start the Next.js development server with pnpm.

```bash
pnpm dev
```

--------------------------------

### Installation

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/website/content/en/patch.mdx

Install the tailwindcss-patch package and apply runtime patches using npm or yarn.

```APIDOC
## Installation

### Add the package

```sh npm2yarn
npm i -D tailwindcss-patch
```

### Apply Tailwind runtime patches

```sh npm2yarn
npx tw-patch install
```

### Keep the patch after installs

`package.json`

```json
{
  "scripts": {
    "prepare": "tw-patch install"
  }
}
```
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/AGENTS.md

Install project dependencies using pnpm. This command also links workspace packages and sets up local post-install patches.

```bash
pnpm install
```

--------------------------------

### CLI: Install runtime patches

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/README.md

Apply runtime patches to your local Tailwind CSS installation using the CLI.

```bash
pnpm dlx tw-patch install
```

--------------------------------

### Package-Specific Test Execution

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/CLAUDE.md

Example command to run tests specifically for the 'core' package.

```bash
cd packages/core && pnpm test
```

--------------------------------

### Install @tailwindcss-mangle/shared

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/shared/README.md

Install the shared package using npm, yarn, or pnpm.

```bash
<npm|yarn|pnpm> i @tailwindcss-mangle/shared
```

--------------------------------

### Install tailwindcss-patch CLI

Source: https://context7.com/sonofmagic/tailwindcss-mangle/llms.txt

Install the `tailwindcss-patch` package and apply runtime patches to Tailwind CSS. Add the `prepare` script to your `package.json` to re-run automatically after installs.

```bash
pnpm add -D tailwindcss-patch
pnpm dlx tw-patch install

# Re-run automatically after installs — add to package.json:
# "scripts": { "prepare": "tw-patch install" }

# Check which patches were applied
pnpm dlx tw-patch status --json
```

```json
# Output:
# {
#   "package": { "name": "tailwindcss", "version": "3.4.1", "root": "…/node_modules/tailwindcss" },
#   "majorVersion": 3,
#   "entries": [
#     { "name": "exposeContext", "status": "applied", "files": ["lib/processTailwindFeatures.js"] },
#     { "name": "extendLengthUnits", "status": "skipped", "reason": "not configured" }
#   ]
# }
```

--------------------------------

### Migrate Configuration: After v9

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/website/content/en/migration.mdx

Example of the new configuration structure using 'registry' and 'transformer' blocks after migrating to v9.

```ts
export default defineConfig({
  registry: {
    extract: {
      file: '.tw-patch/tw-class-list.json',
      removeUniversalSelector: true,
    },
    tailwindcss: {
      version: 4,
      v4: {
        cssEntries: ['dist/tailwind.css'],
      },
    },
  },
  transformer: {
    registry: {
      file: '.tw-patch/tw-class-list.json',
      mapping: {
        enabled: true,
        file: '.tw-patch/tw-map-list.json',
      },
    },
    preserve: {
      functions: ['twIgnore'],
    },
  },
})
```

--------------------------------

### Migrate Configuration: Before v9

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/website/content/en/migration.mdx

Example of the legacy configuration structure using 'patch' and 'mangle' blocks before migrating to v9.

```ts
export default defineConfig({
  patch: {
    output: {
      filename: '.tw-patch/tw-class-list.json',
      removeUniversalSelector: true,
    },
    tailwindcss: {
      version: 4,
      v4: {
        cssEntries: ['dist/tailwind.css'],
      },
    },
  },
  mangle: {
    classListPath: '.tw-patch/tw-class-list.json',
    classMapOutput: {
      enable: true,
      filename: '.tw-patch/tw-map-list.json',
    },
    preserveFunction: ['twIgnore'],
  },
})
```

--------------------------------

### Add prepare script to package.json

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/unplugin-tailwindcss-mangle/README.md

Configure your package.json to automatically run the tailwindcss-patch install script whenever the 'prepare' lifecycle hook is triggered, typically during package installation or publishing.

```json
{
  "scripts": {
    "prepare": "tw-patch install"
  }
}
```

--------------------------------

### Full Example Configuration

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/website/content/en/config.mdx

A comprehensive configuration object for `defineConfig`, detailing options for class `registry` (extraction, Tailwind patching, apply, cache) and `transformer` (sources, generator, registry mapping, preservation).

```typescript
import { defineConfig } from 'tailwindcss-patch'

export default defineConfig({
  registry: {
    extract: {
      file: '.tw-patch/tw-class-list.json',
      format: 'json',
      pretty: 2,
      removeUniversalSelector: true,
    },
    tailwindcss: {
      version: 4,
      v4: {
        cssEntries: ['dist/tailwind.css'],
        sources: [
          { base: 'src', pattern: '**/*.{astro,tsx,mdx}', negated: false },
        ],
      },
    },
    apply: {
      exposeContext: true,
      extendLengthUnits: {
        units: ['rpx'],
      },
    },
    cache: {
      enabled: true,
      dir: '.tw-patch/cache',
      strategy: 'merge',
    },
  },
  transformer: {
    sources: {
      include: [/
.(html|vue|tsx|jsx|mdx)$/],
    },
    generator: {
      classPrefix: 'tw-',
      reserveClassName: [/^theme-/],
    },
    registry: {
      file: '.tw-patch/tw-class-list.json',
      mapping: {
        enabled: false,
        file: '.tw-patch/tw-map-list.json',
        loose: true,
      },
    },
    preserve: {
      functions: ['twIgnore'],
    },
  },
})
```

--------------------------------

### Install unplugin-tailwindcss-mangle and tailwindcss-patch

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/unplugin-tailwindcss-mangle/README.md

Install the necessary packages for unplugin-tailwindcss-mangle and its core dependency, tailwindcss-patch, using npm, yarn, or pnpm.

```sh
<npm|yarn|pnpm> i -D unplugin-tailwindcss-mangle tailwindcss-patch
```

--------------------------------

### Webpack-like Source Include Example

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/website/content/en/config.mdx

Recommended `sources.include` configuration for Webpack-like build pipelines. This preset targets common JavaScript, Vue, and CSS file extensions to avoid unnecessary transforms on other resources.

```typescript
sources: {
  include: [
    /\.[cm]?\[jt]sx?(?:$|\\?)/,
    /\.vue(?:$|\\?)/,
    /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\\?)/,
  ],
}
```

--------------------------------

### Quick Config Diff: Before Migration

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/MIGRATION.md

Example of a configuration object before migrating to the new `tailwindcss-patch` structure. Highlights legacy fields like `registry.output` and `registry.tailwind.classic`.

```typescript
// before
export default defineConfig({
  registry: {
    output: {
      file: '.tw-patch/tw-class-list.json',
    },
    tailwind: {
      package: 'tailwindcss',
      classic: {
        cwd: 'apps/web',
      },
    },
  },
})
```

--------------------------------

### Add Prepare Script to package.json

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/draft.md

Add a 'prepare' script to your package.json to ensure the patch is persisted after npm install.

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

--------------------------------

### Code Transformation Example with Richer Metadata

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/website/content/en/recommend.mdx

Illustrates how precise code edits can be made using candidate metadata, replacing specific class names with new ones. This contrasts with broad string replacement.

```diff
- const className = `gap-y-4 bg-zinc-800/30`
+ const className = `a b`
```

--------------------------------

### CLI Workflow

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/website/content/en/patch.mdx

Utilize the `tw-patch` CLI for managing Tailwind CSS patches, including installation and class list extraction. Customize extraction with various flags.

```APIDOC
## CLI workflow

The CLI is available via `tw-patch`. Run commands from the project root that contains `tailwind.config.*`.

```sh
npx tw-patch install
npx tw-patch extract
```

By default `extract` writes `.tw-patch/tw-class-list.json`. Customise the destination or output shape with the following flags:

| Flag | Description |
| --- | --- |
| `--cwd &lt;dir&gt;` | Resolve configuration from another working directory. |
| `--output &lt;file&gt;` | Override the target file written by `extract`. |
| `--format &lt;json|lines&gt;` | Emit JSON (default) or newline-delimited text. |
| `--css &lt;file&gt;` | Provide CSS entry files used by Tailwind v4 builds. Repeat for multiple files. |
| `--no-write` | Skip writing to disk and return the class list to the caller. |
```

--------------------------------

### HTML Class Mangling Example

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/unplugin-tailwindcss-mangle/README.md

Demonstrates how Tailwind CSS utility classes are transformed into shorter, mangled versions after the plugin is applied.

```html
<!-- before -->
<div class="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex"></div>
<!-- after -->
<div class="tw-g tw-h tw-i tw-d tw-e tw-j tw-k tw-l"></div>
```

--------------------------------

### Initialize TailwindcssPatcher

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/README.md

Instantiate the TailwindcssPatcher with various configuration options for project root, caching, extraction, application, and Tailwind CSS settings. This setup is crucial for customizing the patching process.

```typescript
import { TailwindcssPatcher } from 'tailwindcss-patch'

const patcher = new TailwindcssPatcher({
  projectRoot: process.cwd(),
  cache: {
    enabled: true,
    dir: '.tw-patch/cache',
    strategy: 'merge',
    driver: 'file',
  },
  extract: {
    write: true,
    file: '.tw-patch/tw-class-list.json',
    format: 'json',
  },
  apply: {
    overwrite: true,
    exposeContext: { refProperty: 'runtimeContexts' },
    extendLengthUnits: {
      units: ['rpx'],
    },
  },
  tailwindcss: {
    version: 4,
    v4: {
      base: './src',
      cssEntries: ['dist/tailwind.css'],
    },
  },
})
```

--------------------------------

### Quick Config Diff: After Migration

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/MIGRATION.md

Example of the same configuration object after migrating to the new `tailwindcss-patch` structure. Shows the updated fields like `registry.extract` and `registry.tailwindcss.v3`.

```typescript
// after
export default defineConfig({
  registry: {
    extract: {
      file: '.tw-patch/tw-class-list.json',
    },
    tailwindcss: {
      version: 3,
      packageName: 'tailwindcss',
      v3: {
        cwd: 'apps/web',
      },
    },
  },
})
```

--------------------------------

### Patch Tailwind CSS

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/draft.md

Run the npx tw-patch install command to apply the necessary patches to your Tailwind CSS setup.

```sh
npx tw-patch install
```

--------------------------------

### Configure Tailwind CSS Patch

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/README.md

Example configuration for tailwindcss-patch using defineConfig. This setup specifies project root, extraction settings for class lists, and Tailwind CSS v4 specific options.

```typescript
import { defineConfig } from 'tailwindcss-patch'

export default defineConfig({
  registry: {
    projectRoot: '.',
    extract: {
      file: '.tw-patch/tw-class-list.json',
      removeUniversalSelector: true,
      format: 'json',
    },
    tailwindcss: {
      version: 4,
      v4: {
        cssEntries: ['dist/tailwind.css'],
        sources: [{ base: 'src', pattern: '**/*.{html,tsx}', negated: false }],
      },
    },
    apply: {
      overwrite: true,
      exposeContext: true,
      extendLengthUnits: {
        units: ['rpx'],
      },
    },
  },
})
```

--------------------------------

### Publish Packages

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/CLAUDE.md

Execute this command to build, test, version, and publish all packages.

```bash
pnpm publish-packages
```

--------------------------------

### Build the Documentation Site

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/AGENTS.md

Builds the Astro-powered documentation site located in the 'website/' directory.

```bash
pnpm build:docs
```

--------------------------------

### Install tailwindcss-patch

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/draft.md

Install the tailwindcss-patch package as a development dependency using your preferred package manager.

```sh
<yarn|npm|pnpm> add -D tailwindcss-patch
```

--------------------------------

### Initialize Configuration File

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/draft.md

Run 'npx tw-patch init' to create a 'tailwindcss-mangle.config.ts' file in your current working directory for custom configuration.

```sh
npx tw-patch init
```

--------------------------------

### Production Build Script

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/apps/solid-app/README.md

Builds the Solid app for production, optimizing for performance and creating minified files with hashes in the `dist` folder.

```bash
npm run build
```

--------------------------------

### Install tailwindcss-patch and unplugin-tailwindcss-mangle

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/website/content/en/mangle.mdx

Installs the necessary packages for Tailwind CSS patching and class name mangling using npm or yarn.

```sh
npm i -D tailwindcss-patch unplugin-tailwindcss-mangle
```

--------------------------------

### Initializing TailwindcssPatcher

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/README.md

Demonstrates how to instantiate the TailwindcssPatcher with various configuration options for project root, caching, extraction, applying patches, and Tailwind CSS settings.

```APIDOC
## Initializing TailwindcssPatcher

### Description
Instantiate the `TailwindcssPatcher` with configuration options.

### Parameters
#### Request Body
- **projectRoot** (string) - Required - The root directory of the project.
- **cache** (object) - Optional - Cache configuration.
  - **enabled** (boolean) - Optional - Whether caching is enabled.
  - **dir** (string) - Optional - Directory for cache files.
  - **strategy** (string) - Optional - Cache strategy ('merge').
  - **driver** (string) - Optional - Cache driver ('file', 'memory', 'noop').
- **extract** (object) - Optional - Configuration for extracting class lists.
  - **write** (boolean) - Optional - Whether to write extracted lists to a file.
  - **file** (string) - Optional - Output file for the token report.
  - **format** (string) - Optional - Format of the output file ('json', 'lines', 'grouped-json').
- **apply** (object) - Optional - Configuration for applying patches.
  - **overwrite** (boolean) - Optional - Whether to overwrite existing files.
  - **exposeContext** (object) - Optional - Configuration for exposing context.
    - **refProperty** (string) - Optional - Property name to expose context.
  - **extendLengthUnits** (object) - Optional - Configuration for extending length units.
    - **units** (string[]) - Optional - Array of units to extend.
- **tailwindcss** (object) - Optional - Tailwind CSS configuration.
  - **version** (number) - Optional - Tailwind CSS version.
  - **v4** (object) - Optional - v4 specific configuration.
    - **base** (string) - Optional - Base directory for v4.
    - **cssEntries** (string[]) - Optional - Array of CSS entry points.

### Request Example
```typescript
import { TailwindcssPatcher } from 'tailwindcss-patch'

const patcher = new TailwindcssPatcher({
  projectRoot: process.cwd(),
  cache: {
    enabled: true,
    dir: '.tw-patch/cache',
    strategy: 'merge',
    driver: 'file',
  },
  extract: {
    write: true,
    file: '.tw-patch/tw-class-list.json',
    format: 'json',
  },
  apply: {
    overwrite: true,
    exposeContext: { refProperty: 'runtimeContexts' },
    extendLengthUnits: {
      units: ['rpx'],
    },
  },
  tailwindcss: {
    version: 4,
    v4: {
      base: './src',
      cssEntries: ['dist/tailwind.css'],
    },
  },
})
```
```

--------------------------------

### Initialize and Use CacheStore in TypeScript

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/MIGRATION.md

Demonstrates the basic usage of the new CacheStore for managing cache entries. It shows how to initialize the store, write a set of values, and read them back. This replaces the older CacheManager for more consistent async behavior and error recovery.

```typescript
const cache = new CacheStore(normalized.cache)
await cache.write(new Set(['text-lg']))
const values = await cache.read()
```

--------------------------------

### Getting Patch Status

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/README.md

Retrieves the current patch status of the project.

```APIDOC
## Getting Patch Status

### Description
Retrieves the current patch status of the project.

### Method
`await patcher.getPatchStatus()`

### Endpoint
N/A (Programmatic API)

### Parameters
None

### Request Example
```typescript
const patchStatus = await patcher.getPatchStatus()
console.log(patchStatus.entries)
```

### Response
- **patchStatus** (object) - An object containing patch status information, typically with an `entries` array.

```

--------------------------------

### Prepare and Publish Packages

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/AGENTS.md

Uses Changesets to manage versioning and publish packages. This command orchestrates the release process.

```bash
pnpm release
```

--------------------------------

### Build All Packages

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/CLAUDE.md

Execute this command to build all packages within the monorepo.

```bash
pnpm build
```

--------------------------------

### Upgrade tailwindcss-patch and @tailwindcss-mangle/config packages

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/website/content/en/patch-v9-migration.mdx

Install the latest versions of tailwindcss-patch and @tailwindcss-mangle/config using npm or yarn.

```sh
npm i -D tailwindcss-patch@^9 @tailwindcss-mangle/config@latest
```

--------------------------------

### CLI: Capture all tokens with metadata

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/README.md

Capture every candidate token along with its file and position metadata, formatted as lines.

```bash
pnpm dlx tw-patch tokens --format lines
```

--------------------------------

### Update programmatic patcher usage (After v9)

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/website/content/en/patch-v9-migration.mdx

Example of instantiating TailwindcssPatcher with the modern constructor shape in v9.

```typescript
const patcher = new TailwindcssPatcher({
  apply: {
    overwrite: true,
    exposeContext: { refProperty: 'runtimeContexts' },
  },
  extract: {
    file: '.tw-patch/tw-class-list.json',
  },
  tailwindcss: {
    version: 4,
    v4: {
      cssEntries: ['dist/tailwind.css'],
    },
  },
})
```

--------------------------------

### Update programmatic patcher usage (Before v9)

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/website/content/en/patch-v9-migration.mdx

Example of instantiating TailwindcssPatcher with the legacy constructor shape before v9.

```typescript
const patcher = new TailwindcssPatcher({
  overwrite: true,
  output: {
    file: '.tw-patch/tw-class-list.json',
  },
  features: {
    exposeContext: { refProperty: 'runtimeContexts' },
  },
  tailwind: {
    version: 4,
    v4: {
      cssEntries: ['dist/tailwind.css'],
    },
  },
})
```

--------------------------------

### Get Patch Status

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/README.md

Retrieve and log the status of the patching process. This is useful for understanding the outcome of the patch application.

```typescript
const patchStatus = await patcher.getPatchStatus()
console.log(patchStatus.entries)
```

--------------------------------

### CLI: Restore configs from migration backup

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/README.md

Restore Tailwind CSS configurations from a migration report backup snapshot. Use `--dry-run` to preview.

```bash
pnpm dlx tw-patch restore --report-file .tw-patch/migrate-report.json --dry-run
```

--------------------------------

### Development Server Script

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/apps/solid-app/README.md

Runs the Solid app in development mode, typically on http://localhost:3000. The page auto-reloads on edits.

```bash
npm dev # or npm start
```

--------------------------------

### CLI: Check applied patches

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/README.md

Check which patches are currently applied to your Tailwind CSS installation, outputting in JSON format.

```bash
pnpm dlx tw-patch status --json
```

--------------------------------

### Rewrite config to modern registry shape (After v9)

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/website/content/en/patch-v9-migration.mdx

Example of the modern configuration shape for tailwindcss-patch in v9, using `registry.extract` and `registry.tailwindcss`.

```typescript
import { defineConfig } from 'tailwindcss-patch'

export default defineConfig({
  registry: {
    extract: {
      file: '.tw-patch/tw-class-list.json',
    },
    tailwindcss: {
      version: 3,
      packageName: 'tailwindcss',
      v3: {
        cwd: 'apps/web',
      },
    },
  },
})
```

--------------------------------

### Initialize Tailwind CSS Patch

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/CLAUDE.md

This command is automatically run post-install to patch Tailwind CSS runtime.

```bash
tw-patch install
```

--------------------------------

### CLI: Migrate deprecated config fields

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/packages/tailwindcss-patch/README.md

Migrate deprecated configuration fields to modern keys. Use `--dry-run` to preview changes.

```bash
pnpm dlx tw-patch migrate --dry-run
```

--------------------------------

### Rewrite config to modern registry shape (Before v9)

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/website/content/en/patch-v9-migration.mdx

Example of the legacy configuration shape for tailwindcss-patch before v9, using `registry.output` and `registry.tailwind`.

```typescript
import { defineConfig } from 'tailwindcss-patch'

export default defineConfig({
  registry: {
    output: {
      file: '.tw-patch/tw-class-list.json',
    },
    tailwind: {
      package: 'tailwindcss',
      classic: {
        cwd: 'apps/web',
      },
    },
  },
})
```

--------------------------------

### Build App Fixture in Production

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/website/content/en/testing.mdx

Builds a specific application fixture in production mode as part of the E2E testing process. Ensure the app directory is correctly specified.

```sh
pnpm --dir <appDir> build
```

--------------------------------

### Update Dependencies for Tailwind CSS Mangle v9

Source: https://github.com/sonofmagic/tailwindcss-mangle/blob/main/website/content/en/migration.mdx

Install the latest versions of tailwindcss-patch, unplugin-tailwindcss-mangle, and related configuration packages. Use npm2yarn for compatibility.

```sh
npm i -D tailwindcss-patch@^9 unplugin-tailwindcss-mangle@latest @tailwindcss-mangle/config@latest @tailwindcss-mangle/core@latest
```

--------------------------------

### Typed Configuration Helper for Tailwind CSS Mangle

Source: https://context7.com/sonofmagic/tailwindcss-mangle/llms.txt

Use `defineConfig` to get IntelliSense for `tailwindcss-patch.config.ts`. It accepts the full `TailwindcssMangleConfig` shape with a `registry` key.

```typescript
// tailwindcss-patch.config.ts
import { defineConfig } from 'tailwindcss-patch'

export default defineConfig({
  registry: {
    projectRoot: '.',
    tailwindcss: {
      version: 4,
      packageName: 'tailwindcss',
      v4: {
        cssEntries: ['dist/tailwind.css'],
        sources: [
          { base: 'src', pattern: '**/*.{html,tsx,vue,svelte}', negated: false },
          { base: 'src', pattern: '**/*.test.*', negated: true },
        ],
      },
    },
    apply: {
      overwrite: true,
      exposeContext: true,
      extendLengthUnits: { units: ['rpx'] },
    },
    extract: {
      write: true,
      file: '.tw-patch/tw-class-list.json',
      format: 'json',
      pretty: 2,
      removeUniversalSelector: true,
    },
    cache: {
      enabled: true,
      dir: '.tw-patch/cache',
      strategy: 'merge',
      driver: 'file',
    },
    filter: className => !className.startsWith('debug-'),
  },
})
```