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 and webpack

- 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
- Nuxt 3
- Options
- Notice
- Migration form v1 to v2

Docs

mangle.icebreaker.top

Features

``html



`

Usage

$3

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

$3

`sh
npx tw-patch install
`

$3

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

$3

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

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

$3

#### 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())
}
}
})
`

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

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