Negative margin class doesn't work on production build

[natsathorn]

I'm using create-react-app with tailwindcss.

I ejected things and update configuration in webpack.config.js.

Here is the postcss section in my wrbpack.

{
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('tailwindcss'),
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            // Adds PostCSS Normalize as the reset css with default options,
            // so that it honors browserslist config in package.json
            // which in turn let's users customize the target behavior as per their needs.
            postcssNormalize(),
          ],
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },

in my tailwind.config.js is really simple. I'm not really change or extends anything.

Only add these line to it.

  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: ['./src/**/*.{js,ts,jsx,tsx}'],

Everything is working fine until, I set NODE_ENV=production.

Here is the Element from my browser.

<div class="absolute top-0 right-0 grid justify-center items-center cursor-pointer rounded-full bg-white w-6 h-6 -mt-3 -mr-3">

The thing is on production build, all these classes doesn't work.