postcss で purgecss すると tailwindcss の breakpoint が消えてしまう

tailwind.css

  .lg\:bg-red-700 {
    --bg-opacity: 1;
    background-color: #c53030;
    background-color: rgba(197, 48, 48, var(--bg-opacity));
  }

というCSSがあり、

index.html

<div class="lg:bg-red-700">Hello</div>

という HTML があります。

purgecss の設定ファイルは以下のようになっており、

postcss.config.js

const purgecss = require("@fullhuman/postcss-purgecss")

module.exports = {
  plugins: [
    purgecss({
      content: ["./**/*.html"],
    }),
  ],
}

これで postcss を実行すると tailwind.css の .lg\:bg-red-700 が消えてしまいます。

おそらく : をエスケープしている \ が入っているためヒットしないのだと思います。

なので、公式サイトを頼りに postcss.config.js の設定を書き換えます。
defaultExtractor の行を追加します。

postcss.config.js

const purgecss = require("@fullhuman/postcss-purgecss")

module.exports = {
  plugins: [
    purgecss({
      content: ["./**/*.html"],
      defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
    }),
  ],
}

これでうまくいきました。