Viteを使用して作成されたReactアプリでPurgeCSSを組み込む場合、設定はWebpackベースのプロジェクトとは異なります。
Viteは、デフォルトでRollupまたはesbuildを使ってバンドルを行うため、Webpackのプラグインを直接使用することはできません。
しかし、PostCSSを介してPurgeCSSを使用することができます。

npm i -D postcss postcss-cli @fullhuman/postcss-purgecss

vi postcss.config.js

postcss.config.js

import purgecss from '@fullhuman/postcss-purgecss';

export default {
  plugins: [
    purgecss({
      variables:true, // true: delete unused variables
      safelist: { // safelist
        standard: ['html', 'body'],
      },
      content: [
        'YOUR/DIR/bigsize.css',
        './src/**/*.tsx',
        './src/**/*.jsx',
      ],
    }),
  ],
};

オプションはこちら

https://purgecss.com/plugins/postcss.html

ViteはデフォルトでPostCSSをサポートしており、プロジェクトのルートディレクトリにpostcss.config.jsまたはpostcss.config.cjsファイルを配置することで、PostCSSの設定を行うことができます。

● next.js の場合

https://www.linkedin.com/pulse/removing-unused-css-purgecss-hasibul-islam

postcss は next.js が元々持っているので、インストール不要です。

パッケージのインストール

npm i -D @fullhuman/postcss-purgecss

npm i -D postcss-flexbugs-fixes postcss-preset-env        

// 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: ["./src/app/**/*.{js,jsx,ts,tsx}"],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: {
          standard: ["html", "body"],
        },
      },
    ],
  ],
};