Webpack 5 is not working with tailwindcss, postcss-loader - WordPress

Question

I'm trying to build a webpack config that transpiles sass and utilizes the postcss, precss, autoprefixer plugin.

Having researched and tried out various solutions to this, I have come up with the following setup:

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const postcssPresetEnv = require('postcss-preset-env');

// JS Directory path.
const JS_DIR    = path.resolve(__dirname, 'src/js')
const IMG_DIR   = path.resolve(__dirname, 'src/img')
const BUILD_DIR = path.resolve(__dirname, 'build')

const entry = {
    main: JS_DIR + '/main.js'
}

const output = {
    path: BUILD_DIR,
    filename: 'js/[name].js'
}

const plugins = (argv) => [
    new CleanWebpackPlugin({
        cleanStaleWebpackAssets: ('production' === argv.mode)
    }),

    new MiniCssExtractPlugin({
        filename: 'css/[name].css'
    }),
    new CssMinimizerPlugin(),
]

const rules = [
    {
        test: /\.js$/,
        include: [JS_DIR],
        exclude: /node_modules/,
        use: 'babel-loader'
    },
    {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader',
            'sass-loader',
        ],
    },
    {
        test: /\.(png|jpg|jpeg|svg|gif|ico)$/,
        generator: {
            filename: '[path][name].[ext]',
        },
        use: [
            {
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]',
                    publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../'
                },
            },
        ],
    },
    {
        test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        exclude: [ IMG_DIR, /node_modules/ ],
        generator: {
            filename: '[path][name].[ext]',
        },
        use: [
            {
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]',
                    publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../'
                }
            }
        ]
    }
]

module.exports = (env, argv) => ({
    entry: entry,
    output: output,
    devtool: 'source-map',
    module: {
        rules: rules
    },
    optimization: {
        minimize: true,
        minimizer: [
            new CssMinimizerPlugin({
                minify: [
                    CssMinimizerPlugin.cssnanoMinify,
                    CssMinimizerPlugin.cleanCssMinify
                ]
            }),
            new TerserPlugin({
                minify: TerserPlugin.uglifyJsMinify,
                parallel: true,
            }),
        ]
    },

    plugins: plugins(argv),

    externals: {
        jquery: 'jQuery'
    }
})

Getting error while running webpack 5 with tailwindcss in Wordpress. Something is missing, anyone can help, please. I have updated some packages but still getting an error.

Errors

>     ERROR in ./src/sass/main.scss
>     Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
>     HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
>     TypeError: Cannot read property 'raws' of undefined

> Error: Module build failed (from
> ./node_modules/postcss-loader/dist/cjs.js): TypeError: Cannot read
> property 'raws' of undefined