classpack

Minify Tailwind CSS class names in production builds.

flex items-center justify-between gap-4 → ab cd ef gh

Install

npm install tw-classpack

Setup (Next.js)

1. Add the PostCSS plugin

// postcss.config.js
module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    require("tw-classpack/postcss"),
  ],
};

2. Wrap your Next.js config

// next.config.js
const withClasspack = require("tw-classpack/next");

module.exports = withClasspack({
  // your config
});

3. Generate the class map before building

{
  "scripts": {
    "build": "classpack && next build"
  }
}

That's it. In production, all Tailwind classes are compressed — in CSS selectors, className attributes, cn(), cva(), clsx(), and template literals.

CLI

# Auto-detects tailwind.config.js, writes to node_modules/.cache/classpack/
classpack

# Custom paths
classpack --config ./tailwind.config.js --output ./class-map.json

Advanced API

For custom setups (non-Next.js, custom webpack configs), the programmatic API is also available:

const { generateClassMap, createPostcssPlugin, createWebpackLoader } = require("tw-classpack");

See the source for options.

How it works

1. classpack CLI — Processes your Tailwind config, extracts all utility class names, and maps each to a short name (a, b, ..., aa, ab, ...)
2. PostCSS plugin — Rewrites .flex → .ab in CSS selectors
3. Webpack loader — Rewrites "flex" → "ab" in className attributes, cn(), cva(), clsx(), template literals, and any string composed entirely of Tailwind classes

Only active when NODE_ENV=production. Zero impact in development.

License

MIT