Next.js css-loader 模块类名在 html 和 css 之间不匹配

Question

我正在为我的 css 框架使用 tailwind css，我正在尝试使用 webpack css-loader 散列我的 tailwind css 类，css 类已完成散列，但 html 类仍显示常规类

[]

这是我的 next.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

const nextConfig = {
    reactStrictMode: true,
    // distDir: 'build', custom output build
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    console.log("is develop", dev)
        config.module.rules.push(
      {
        test: /\.(css|s[ac]ss)$/i,
        use: [
          !dev ? MiniCssExtractPlugin.loader : 'style-loader',
          {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName: "_[hash:base64:5]",
                            },
                        }
                    },
          'postcss-loader',
                    'sass-loader',
        ]
      }
    )
        config.optimization.minimizer.push(
            new CssMinimizerPlugin(),
        )
        config.plugins.push(
      new MiniCssExtractPlugin({
        filename: 'static/css/[contenthash].css'
      }),
    )
        return config
    },
    env: {
        WORDPRESS_BE: process.env.WORDPRESS_BE,
        API_URL: process.env.API_URL,
        ASSET_URL: process.env.ASSET_URL,
        CRYPTO_SECRET_KEY: process.env.CRYPTO_SECRET_KEY,
        API_SAMPLE: process.env.API_SAMPLE,
    },
}

module.exports = nextConfig

我期待 html 类应该与 css 哈希类匹配