README-zh.md

unplugin-tailwindcss-shortener

缩短 Tailwind CSS 的类名

• 支持 Vue and React (TODO)
• 支持 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 Starter from 'unplugin-tailwindcss-shortener/vite'

export default defineConfig({
  plugins: [
    Starter({ /* 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()],
})

使用

如果项目中不仅使用了静态类名，还用到了动态类名。那么使用动态类名的代码，你可能需要做一些代码调整。

• 针对动态类名，有两个主要规则

1. 在 template、js、jsx 里，动态类名必须需要使用 cx、cva 包裹
2. cx、cva (support class-variance-authority) 可以使用 class-variance-authority、classanems、clsx、tailwind-merge等等用来 类名拼接的工具，你可以自定义一个。但是名字必须是 cx 或者 cva

Vue

1. template

   1. template 静态类名

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

   2. template 动态类名

      1. 表达式 (*必须使用 cx、cva 包裹)

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

      2. 变量

      <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. template 里自定义组件的属性作为类名处理

      <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. 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 同 1

3. js 里的类名

   1. 同 3.1

目前不支持在模板字符串,

React

TODO

配置项

type UserOptions = {
  /**
   * @default [/\.vue$/, /\.[jt]sx?$/, /tailwind.css$/]
   */
  include?: RegExp[];
  /**
   * @default [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]
   */
  exclude?: RegExp[];
  /**
   * tailwind 的配置文件路径
   * @default './tailwind.config.js'
   */
  tailwindConfig?: string;
  /**
   * Tailwind 的指令文件路径
   * @default './src/tailwind.css'
   */
  tailwindCSS?: string;
  /**
   * @default 'build'
   * webpack don't support this
   */
  apply?: "build" | "serve";
  /**
   * @default false
   * 用来调试的信息
   * - /.tailwindcss-shortener
   *  - tailwind.css (Tailwind CSS 生成的 CSS 文件)
   *  - cssMap.json (原类名与短类名映射关系)
   */
  output?: boolean;
};