unplugin-tailwindcss-shortener

zh-CN

Shorten the classes of Tailwind CSS

• Support Vue and React (TODO)
• Support Vite、Vue Cli and Webpack

HTML

<!-- before -->
<div class="flex items-center justify-center h-screen px-6 bg-gray-200"></div>
<!-- after -->
<div class="h u bu i s j"></div>

JavaScrip

// before
import { cx } from 'class-variance-authority';

const boxClass = cx('flex items-center justify-center h-screen px-6 bg-gray-200');

// after
import { cx } from 'class-variance-authority';

const boxClass = cx('h u bu i s j');

CSS

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

.h-screen {
  height: 100vh;
}

.flex {
    display: flex;
}

/* after */
.s {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.j {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.bu {
  justify-content: center;
}

.u {
  align-items: center;
}

.i {
  height: 100vh;
}

.h {
  display: flex;
}

Install

npm i unplugin-tailwindcss-shortener

Vite

// vite.config.ts
import TailwindcssShortener from 'unplugin-tailwindcss-shortener/vite'

export default defineConfig({
  plugins: [
    TailwindcssShortener({ /* options */ }),
  ],
})

Example: playground/

Rollup

// rollup.config.js
import TailwindcssShortener from 'unplugin-tailwindcss-shortener/rollup'

export default {
  plugins: [
    TailwindcssShortener({ /* options */ }),
  ],
}

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-tailwindcss-shortener/webpack').default({ /* options */ })
  ]
}

Nuxt

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    ['unplugin-tailwindcss-shortener/nuxt', { /* options */ }],
  ],
})

This module works for both Nuxt 2 and Nuxt Vite

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-tailwindcss-shortener/webpack').default({ /* options */ }),
    ],
  },
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'
import TailwindcssShortener from 'unplugin-tailwindcss-shortener/esbuild'

build({
  plugins: [TailwindcssShortener()],
})

Usage

If your project not only uses static class names but also dynamic class names, you may need to make some adjustments to the code.

• There are two main rules for dynamic class names:

1. In template, js, jsx files, dynamic class names must be wrapped with cx or cva.
2. cx, cva (support class-variance-authority) can use tools such as class-variance-authority, classanems, clsx, tailwind-merge, etc., for class name concatenation, you can customize one. But the name must be cx or cva.

Vue

1. template

   1. Static class names in template

   <div class="flex items-center justify-center h-screen px-6 bg-gray-200"></div>

   2. Dynamic class names in template

      1. Expressions (*must use cx or cva to wrap)

      <div :class="cx(!open && 'hidden', 'flex items-center justify-center h-screen px-6 bg-gray-200')"></div>

      2. Variables

      <template>
        <div :class="boxClass"></div>
      </template>
      <script setup>
      import { cx } from 'class-variance-authority';
      
      const boxClass = cx(!open && 'hidden', 'flex items-center justify-center h-screen px-6 bg-gray-200')
      </script>

      3. Custom component attributes in template are treated as class names

      <template>
        <Select :dropdown-class="boxClass" />
      </template>
      <script setup>
      import { cx } from 'class-variance-authority';
      
      const boxClass = cx(!open && 'hidden', 'flex items-center justify-center h-screen px-6 bg-gray-200')
      </script>

2. Class names in jsx

   1. cx、cva

   import { cx } from 'class-variance-authority';
   
   export boxClass = cx(!open && 'hidden', 'flex items-center justify-center h-screen px-6 bg-gray-200');

   2. HTML in js same as 1

3. Class names in js

   1. Same as 3.1

Currently does not support in template strings

React

TODO

Options

type UserOptions = {
  /**
   * @default [/\.vue$/, /\.[jt]sx?$/, /tailwind.css$/]
   */
  include?: RegExp[];
  /**
   * @default [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]
   */
  exclude?: RegExp[];
  /**
   * @default './tailwind.config.js'
   */
  tailwindConfig?: string;
  /**
   * @default './src/tailwind.css'
   */
  tailwindCSS?: string;
  /**
   * @default 'build'
   * webpack don't support this
   */
  apply?: "build" | "serve";
  /**
   * @default false
   * Information for debugging
   * - /.tailwindcss-shortener
   *  - tailwind.css (The generated CSS file from Tailwind CSS.)
   *  - cssMap.json (Mapping of original class names to shortened class names)
   */
  output?: boolean;
};