Tailwindcss V3 PurgeCSS config in NextJs

Question

I am having a problem configuring Tailwindcss in NextJs. (Versions if helpful: Tailwindcss -> V3.2.7 and NextJs -> 13.1.16)

Here is My postcss.config.js file:

const purgecss = [
"@fullhuman/postcss-purgecss",
{
  // Specify the paths to all of the template files
  content: [
    "./layouts/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./constants/**/*.{js,ts,jsx,tsx}",
    "./api/**/*.{js,ts,jsx,tsx}",
  ],
  // This is the function used to extract class names from the templates
  defaultExtractor: (content) => {
    return content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
  },
},
];

module.exports = {
  plugins: [
    "postcss-import",
    "tailwindcss",
    "autoprefixer",
    "postcss-nested",
    process.env.NODE_ENV === "production" ? purgecss : undefined,
    "postcss-preset-env",
    "postcss-reporter",
  ],
};

One issue is that it does not include custom classNames I have written in global.css or other sytlesheet files. and also it does not reduce any byte from the final tailwind style file. (final tailwind style file size is 360KB)

What is the proper solution to configure purge css with tailwind v3 in nextjs?