unplugin-tailwindcss-mangle

unplugin-tailwindcss-mangle

mangle tailwindcss utilities plugin

Now Support vite and webpack

• unplugin-tailwindcss-mangle
  • Features
  • Usage
    • 1. Install Package
    • 2. Run patch script
    • 3. add prepare script in your package.json
    • 4. register this plugin
      • vite
      • webpack
  • Options
    • classGenerator
    • include / exclude
  • Notice

Features

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

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

2. Run patch script

npx tw-patch

3. add prepare script in your package.json

  "scripts": {
    "prepare": "tw-patch"
  },

4. register this plugin

vite

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

then run script:

# generate bundle
yarn build
# preview
yarn preview

You will see all class was renamed to tw-*

webpack

// esm
import { webpackPlugin as utwm } from 'unplugin-tailwindcss-mangle'
// or cjs
const { webpackPlugin: utwm } = require('unplugin-tailwindcss-mangle')
// use this webpack plugin
// for example next.config.js
const { defineConfig } = require('@vue/cli-service')
// vue.config.js
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: (config) => {
    config.plugins.push(utwm())
  }
})

Options

classGenerator

custom class generator, if you want to custom class name (default 'tw-*'), use this options

export interface IClassGeneratorOptions {
  reserveClassName?: (string | RegExp)[]
  // custom generate class name
  customGenerate?: (original: string, opts: IClassGeneratorOptions, context: Record<string, any>) => string | undefined
  log?: boolean
  exclude?: (string | RegExp)[]
  include?: (string | RegExp)[]
  ignoreClass?: (string | RegExp)[]
  // default 'tw-',for example: tw-a,tw-b, you can set any you want, like '','ice-'
  classPrefix?: string
}

include / exclude

Type: string | string[]

Default: undefined

glob string allow you to control the mangle range of bundles.

Notice

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:

const innerHTML = "i'm flex and relative and grid"
document.body.innerHTML = innerHTML

so only strings with - or : will be transformed.