Remove unused style tag CSS issue in Next.js

Can we remove unused CSS in Next.js? Code is available on CodeSandbox.

Here is my component:

import Link from "next/link";

export default function IndexPage() {
  return (
    <div>
      Hello World.{" "}
      <Link href="/about">
        <a className="red">About</a>
      </Link>
      <style jsx>{`
        .container {
          margin: 50px;
        }
        p {
          color: blue;
        }
        .red {
          color: red;
        }
        .blue {
          color: red;
        }
      `}</style>
    </div>
  );
}

And here is my PostCSS config:

module.exports = {
  plugins: [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009"
        },
        stage: 3,
        features: {
          "custom-properties": false
        }
      }
    ],
    [
      "@fullhuman/postcss-purgecss",
      {
        content: [
          "./pages/**/*.{js,jsx,ts,tsx}",
          "./components/**/*.{js,jsx,ts,tsx}"
        ],
        extractors: ["vue", "js", "html"]
      }
    ]
  ]
};

I only used the red class in my component, so it should remove all the other classes, but in my case it is not removing anything.

I am using PurgeCSS to remove unused CSS.