Next.js css-loader module classnames do not match between html and css

Question

I'am using tailwind css for my css framework, and I'am trying to Hash my tailwind css class using webpack css-loader, the css classes is completed to hash, but the html class is still showing the regullar class

[]

this is my 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

I'am expecting the html class should match with css hash class