using arbitrary width pixels not working when deployed on prod tailwind css, postcss, next

Question

using specific pixel width (e.g. w-[50px]) with tailwind CSS and nextjs but when deployed to production (on Vercel) the specified width doesn't show up, locally it works fine. Is there something wrong with my posts configuration that's causing it to not read tailwind's arbitrary width values?

here's my postcss.config.js

module.exports = {
  plugins: [
    "tailwindcss",
    process.env.NODE_ENV === "production"
      ? [
          "@fullhuman/postcss-purgecss",
          {
            content: [
              "./pages/**/*.{js,jsx,ts,tsx}",
              "./components/**/*.{js,jsx,ts,tsx}",
              "./stories/**/*.{js,jsx,ts,tsx}",
            ],
            defaultExtractor: (content) =>
              content.match(/[\w-/:]+(?<!:)/g) || [],
          },
        ]
      : undefined,
    "autoprefixer",
  ],
};

tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  variants: {
    extend: {
      opacity: ["disabled"],
    },
  },
};

https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

nextjs version -- "next": "12.1.0"

purgecss version -- "@fullhuman/postcss-purgecss": "^4.1.3

tailwind CSS version -- ^3.0.18

the NODE_ENV has also been set to production on Vercel when deployed and checked on production