Why PurgeCSS in Next.js removes all website styles? Need assistance with the configuration

Question

I'm using NextJs v.14 with Tailwind CSS and have encountered an issue where PageSpeed Insights warns me to reduce the amount of unused CSS. After some investigation, I found recommendations to install the PurgeCSS plugin to address this issue.

I installed and configured it according to the recommendations from the NextJs official website, but now it purges all styles from my website.

I've spent many hours trying to fix the issue and have explored all similar topics on StackOverflow, but I haven't been able to find an appropriate solution, and I'm really frustrated now. I would appreciate any help!

// my postss.config.js

module.exports = {
  plugins: [
    // restore the Next.js default behavior
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009",
        },
        stage: 3,
        features: {
          "custom-properties": false,
        },
      },
    ],
    [
      // configure PurgeCSS
      "@fullhuman/postcss-purgecss",
      {
        content: [
          "./pages/**/*.{js,ts,jsx,tsx,mdx}",
          "./components/**/*.{js,ts,jsx,tsx,mdx}",
          "./app/**/*.{js,ts,jsx,tsx,mdx}",
          "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx,mjs}",
        ],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: {
          standard: ["html", "body"],
        },
      },
    ],
  ],
}

And also for now I kept tailwid config file

// my tailwind.config.ts   
import { nextui } from "@nextui-org/react";

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx,mjs}",
  ],
  safelist: {
    standard: ["html", "body"],
  },
  theme: {
    extend: {
    },
  },
  darkMode: [],
  plugins: [nextui()],
};

And just in case my package json

// my package.json
{
  "name": "charmy",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@nextui-org/react": "^2.2.9",
    "firebase": "^10.7.1",
    "framer-motion": "^10.16.16",
    "next": "14.0.4",
    "next-sitemap": "^4.2.3",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^9.5.0",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^5.0.0",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}