ゴール

下記ディレクトリ構造で src/index.html で使われていない CSS を　src/styles/main.css から削除して dist/styles/main.css に書き出す。

ディレクトリ構造

.
├── dist
│   └── styles
│       └── main.css
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
└── src
    ├── index.html
    └── styles
            └── main.css

下準備

src/index.html

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body class="test1">

  </body>

</html>

src/styles/main.css

.test1 {}

.test2 {}

.test3 {}

.test4 {}

src/index.html で使っている CSS は test1 のみです。
期待する実行結果は dist/styles/main.css の内容が下記のようになることです。

.test1 {}

手順

NPM をイニシャライズする

npm init -y

必要なパッケージをインストールする

npm install postcss postcss-cli @fullhuman/postcss-purgecss --save-dev

PostCSSの設定

postcss.config.js を作成して下記のように設定

// postcss.config.js
module.exports = {
  plugins: [
    // 他の必要なプラグインがあればここに追加
    require('@fullhuman/postcss-purgecss')({
      // PurgeCSSの設定を追加
      content: [
        './src/**/*.html',
        './src/**/*.vue',
        './src/**/*.jsx',
        // 使っているファイルの拡張子を追加
      ],
      // 他のPurgeCSSのオプションを追加
    }),
  ],
};

スクリプトの追加

package.json に NPMScript を追加します。

{
  "scripts": {
    "build:css": "postcss src/styles/main.css -o dist/styles/main.css"
  }
}

ビルドの実行

npm run build:css

dist/styles/main.css には　test1 のみ書き出されているはずです。