Next.js中PurgeCSS清除全部网站样式问题求助

我用Next.js v14搭配Tailwind CSS开发项目，收到PageSpeed Insights提示需要减少未使用的CSS代码。按照官网指引安装并配置PurgeCSS后，网站所有样式都被清除了。已经花了好几个小时尝试修复，并且查阅了StackOverflow相关话题，但还是没解决，现在寻求帮助！

postcss.config.js 配置 #

// my postcss.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"],
        },
      },
    ],
  ],
}

tailwind.config.ts 配置 #

// 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()],
};

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"
  }
}

内容的提问来源于stack exchange，提问作者missbells