# unplugin-tailwindcss-mangle

mangle tailwindcss utilities plugin

It is recommended to read the documentation of [tailwindcss-patch](https://github.com/sonofmagic/tailwindcss-mangle/tree/main/packages/tailwindcss-patch) first, `unplugin-tailwindcss-mangle` depends on this tool.

> Now Support `vite`, `webpack`, `esbuild`, and `nuxt`

- [unplugin-tailwindcss-mangle](#unplugin-tailwindcss-mangle)
  - [Docs](#docs)
  - [Features](#features)
  - [Usage](#usage)
    - [1. Install Package](#1-install-package)
    - [2. Run install script](#2-run-install-script)
    - [3. add `prepare` script in your `package.json`](#3-add-prepare-script-in-your-packagejson)
    - [4. Run extract command](#4-run-extract-command)
    - [5. Register this plugin](#5-register-this-plugin)
      - [vite](#vite)
      - [webpack](#webpack)
      - [esbuild](#esbuild)
      - [Nuxt 3](#nuxt-3)
  - [Options](#options)
  - [Notice](#notice)
  - [Migration form v1 to v2](#migration-form-v1-to-v2)

## Docs

[mangle.icebreaker.top](https://mangle.icebreaker.top)

## Features

```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>
```

## Usage

### 1. Install Package

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

### 2. Run install script

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

### 3. add `prepare` script in your `package.json`

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

### 4. Run extract command

cd to the same directory as `package.json` and `tailwind.config.js`, then run:

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

> See more options in [tailwindcss-patch](https://github.com/sonofmagic/tailwindcss-mangle/tree/main/packages/tailwindcss-patch)

Then there will generate a json file: `.tw-patch/tw-class-list.json`

### 5. Register this plugin

#### vite

```js
import vue from '@vitejs/plugin-vue'
import utwm from 'unplugin-tailwindcss-mangle/vite'
// for example: vue vite project
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), utwm()]
})
```

then run script:

```sh
# generate bundle
yarn build
# preview
yarn preview
```

You will see all class was renamed to `tw-*`

#### webpack

```js
// esm
import { webpackPlugin as utwm } from 'unplugin-tailwindcss-mangle'
// or cjs
// const utwm = require('unplugin-tailwindcss-mangle/webpack')
// use this webpack plugin
// for example next.config.js
// eslint-disable-next-line perfectionist/sort-imports
const { defineConfig } = require('@vue/cli-service')
// vue.config.js
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(utwm())
    }
  }
})
```

#### esbuild

```js
import { build } from 'esbuild'
import utwm from 'unplugin-tailwindcss-mangle/esbuild'

await build({
  entryPoints: ['src/main.ts'],
  bundle: true,
  outfile: 'dist/index.js',
  plugins: [utwm()]
})
```

#### Nuxt 3

```ts
import nuxtPlugin from 'unplugin-tailwindcss-mangle/nuxt'

export default defineNuxtConfig({
  // ...
  // https://github.com/nuxt/nuxt/issues/20428
  // you must set this option to false to enable vite extract css
  experimental: {
    inlineSSRStyles: false
  },
  modules: [
    [
      nuxtPlugin,
      {
        // options
      }
    ]
  ]
})
```

## Options

[types.ts](src/types.ts)

## Notice

By default, only the build will take effect. Due to some restrictions, it cannot take effect in the development mode.

This plugin only transform those classes which name contain `-` or `:`, like `w-32`, `before:h-[300px]`,`after:dark:via-[#0141ff]/40`. some classes like `flex`,`relative` will not be mangled.

because plugin will **traverse** all `html class attr` and `js StringLiteral` to find `utilities` generated by `tailwindcss`.

it's dangerous to mangle some `js StringLiteral` like:

```js
const innerHTML = 'i\'m flex and relative and grid'
document.body.innerHTML = innerHTML
```

so only strings with `-` or `:` will be transformed.

## Migration form v1 to v2

```diff
// vite
- import { vitePlugin } from 'unplugin-tailwindcss-mangle'
+ import utwm from 'unplugin-tailwindcss-mangle/vite'

// webpack
- import { webpackPlugin } from 'unplugin-tailwindcss-mangle'
+ import utwm from 'unplugin-tailwindcss-mangle/webpack'
```