有没有办法在 Vitejs 中的 React 项目中使用 PostCSS 来混淆 TailwindCSS 类名？

Question

目前正在使用 ViteJs 构建 React 项目，该项目使用 TailwindCSS 和 PostCSS。

我希望在生产版本中混淆顺风类名。喜欢。object-cover​ a2另外，我的目标不是缩小。

我尝试寻找解决方案，但没有运气。

这是 postcss 配置：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Answer 1

使用下面的代码我设法替换了类名only in the css file，我也找不到在javascript中替换它的方法，希望尽快找到一些解决方案。

vite.config.js

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import {createHtmlPlugin} from "vite-plugin-html";
import postcssRename from "postcss-rename";
import tailwindcss from "tailwindcss";
export default async ({mode}) => {
 
    return defineConfig({

        plugins: [
            react(),
            createHtmlPlugin({
                minify: true,
            }),
        ],
        css: {
            postcss: {
                plugins: [
                    tailwindcss(('./tailwind.config.cjs')),
                    postcssRename({
                        strategy:  (input)=>{
                            return random(6)
                        },
                        outputMapCallback: function (map) {
                            console.log(JSON.stringify(map));

                        }
                    })
                ]
            }
        },
        server: {
            host: '0.0.0.0',
            port: 9000
        }
    });
};

function random(length) {
    var result           = '';
    var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for ( var i = 0; i < length; i++ ) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
}