unplugin-tailwindcss-mangle

unplugin-tailwindcss-mangle

mangle tailwindcss utilities plugin

It is recommended to read the documentation of tailwindcss-patch first, unplugin-tailwindcss-mangle depends on this tool.

Now Support vite, webpack, esbuild, and nuxt

• unplugin-tailwindcss-mangle
  • Docs
  • Features
  • Usage
    • 1. Install Package
    • 2. Run install script
    • 3. add prepare script in your package.json
    • 4. Run extract command
    • 5. Register this plugin
      • vite
      • webpack
      • esbuild
      • Nuxt 3
  • Options
  • Notice
  • Migration form v1 to v2

Docs

mangle.icebreaker.top

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 install script

npx tw-patch install

3. add prepare script in your package.json

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

4. Run extract command

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

npx tw-patch extract

See more options in tailwindcss-patch

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

5. Register this plugin

vite

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:

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

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

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

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:

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

// 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'