Adding @fullhuman/postcss-purgecss in postcss.config.js breaks the css next.js

Question

My project is built with react(^18.2.0) and next JS(^13.1.6). I was reviewing my website performance on https://pagespeed.web.dev/ and got a recommendation to remove unused CSS. I tried configuring postcss.config.js and adding @fullhuman/postcss-purgecss but it's breaking the whole website css. For css, we are using antd library. Below is the full postcss.config.js code:

module.exports = {
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 3,
        "features": {
          "custom-properties": false,
          "nesting-rules": true
        }
      }
    ],
    [
      '@fullhuman/postcss-purgecss',
      {
        content: [
            './pages/**/*.{js,jsx,ts,tsx}',
            './components/**/*.{js,jsx,ts,tsx}'
        ],
        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body"]
      }
    ],
  ]
}

Please suggest as I have been struggling with this for the past week. Thanks in advance :)