Webpack 5 Tailwind bundle too large

I have a stand-alone webpack application who's only job is to bundle s|css. The output javascript file acts as the main style for the rest of the micro-service architecture.

webpack config:

const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa");

module.exports = webpackConfigEnv => {

  const defaultConfig = singleSpaDefaults({
    orgName: "stt",
    projectName: "styleguide",
    webpackConfigEnv
  });

  return merge(defaultConfig, {
    module: {
      rules: [
        {
          test: /\.(s(a|c)ss)$/,
          use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
        }
      ]
    },
  });
};

I have imported a minified version of tailwind from my .scss (about 3MB in size) using npx tailwindcss -o tailwind.min.css --minify.

@import "tailwind.min.css";
@import "more styles..."

postcss.config:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('./tailwind.config.js'),
    require('autoprefixer')
  ],
};

After bundling, the ouput javascript is over 7MB in size.

How do I get the bundle size smaller?

UPDATE

Looking at the output js bundle, I can see there is a duplicate of all the styles/class names which seems to be the reason for the bloated file size.