如何在生产环境中混淆 Tailwindcss HTML 类名？

Question

使用 Tailwindcss 时如何混淆生产中的 HTML 类名？我的项目根据 tailwind 的文档使用 React.js 和 CRACO。

Answer 1

必须先检查这一点 https://github.com/tailwindlabs/tailwindcss/discussions/11179

UnoCSS 是这样做的：

通过yarn或npm安装

yarn add -D @unocss/transformer-compile-class

在项目中创建 uno.config.ts

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerCompileClass from '@unocss/transformer-compile-class'

export default defineConfig({
  // ...
  transformers: [
    transformerCompileClass(),
  ],
})

查看完整详细文档https://unocss.dev/transformers/compile-class