focus-visible works during dev but not available on build

[mwmcode]

Hello,

Has anyone got focus-visible working with webpack/postcss config?

It is working fine during development but not when i build/bundle the app which means it's a config-issue, but I'm not sure what exactly i'm doing wrong (or not doing)?!

this is a rep for reference.

// tailwind.config.js
module.exports = {
  future: {
    uniformColorPalette: true,
    applyComplexClasses: true,
    removeDeprecatedGapUtilities: true,
  },
  purge: {
    content: [
      './src/**/*.tsx',
      './src/html/index.template.html',
    ],
    options: {
     // 👇
      whitelist: [/leaflet/, /.*focus-visible.*/],
    },
  },
  variants: {
    // 👇 enabled all the below in case it was purging it
    backgroundColor: ['responsive', 'hover', 'focus', 'active'],
    accessibility: ['responsive', 'focus', 'focus-visible'],
    outline: ['responsive', 'focus', 'focus-visible'],
    borderOpacity: ['responsive', 'hover', 'focus', 'focus-visible'],
    boxShadow: ['responsive', 'hover', 'focus', 'focus-visible'],
    borderColor: ['responsive', 'hover', 'focus', 'focus-visible'],
    borderOpacity: ['responsive', 'hover', 'focus', 'focus-visible'],
    opacity: ['responsive', 'hover', 'focus', 'focus-visible'],
    textDecoration: ['responsive', 'hover', 'focus', 'focus-visible'],
  },
  plugins: [],
};
/* ==================================== */
// postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('postcss-focus-visible'),
    require('autoprefixer'),
  ],
};
/* ==================================== */
// webpack.config.js
{
// ...
module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              import: true,
              importLoaders: 1,
            },
          },
          'postcss-loader',
        ],
      },
    ],
  },
}

// app/index.tsx
import './index.css';
// 👇
import 'focus-visible';

ReactDOM.render(
  <Suspense fallback={<p />}>
    <div>
      <button className="p-2 m-4 bg-gray-100 rounded-sm focus:outline-none focus-visible:shadow-outline">
        focus-visible-me
      </button>
    </div>
  </Suspense>,
  document.getElementById('root'),
);

I can see .focus-visible classes as well as the focus-vislble polyfill are included in the bundles output