unplugin-tailwindcss-mangle
v4.0.2
Published
mangle tailwindcss utilities class plugin. support vite and webpack!
Downloads
10,464
Maintainers
Readme
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
andwebpack
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
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
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
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'