Swiper not shown when purgeCSS has been used in Nextjs

[shubham-available]

I am using nextjs and applying purgeCSS to remove unused CSS. It is not removing the css for swiper but the swiper content is not showing up on the screen. The content is being loaded but not showing on the screen.
Here are my next.config.js file

  plugins: [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: { flexbox: "no-2009" },
        stage: 3,
        features: { "custom-properties": false },
      },
    ],
    [
      "@fullhuman/postcss-purgecss",
      {
        content: [
          "./components/**/*.{js,jsx,ts,tsx}",
          "./pages/**/*.{js,jsx,ts,tsx}",
          "./previews/**/*.{js,jsx,ts,tsx}",
        ],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: [
          "html",
          "body",
          ".swiper",
          ".swiper-slide",
          ".swiper-wrapper",
        ],
        // skippedContentGlobs: ["node_modules/**"],
      },
    ],
  ],
};

module.exports = environment;

Here is the postcss.config.js file

let environment = {
  plugins: [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: { flexbox: "no-2009" },
        stage: 3,
        features: { "custom-properties": false },
      },
    ],
    [
      "@fullhuman/postcss-purgecss",
      {
        content: [
          "./components/**/*.{js,jsx,ts,tsx}",
          "./pages/**/*.{js,jsx,ts,tsx}",
          "./previews/**/*.{js,jsx,ts,tsx}",
        ],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: [
          "html",
          "body",
          ".swiper",
          ".swiper-slide",
          ".swiper-wrapper",
        ],
      },
    ],
  ],
};

module.exports = environment;

Is there anything, I am missing here or any help would be great?

[ahmadharminto]

I'm also facing the same issue, and I tried this on postcss.config.js, seems it works
{ ... safelist: { standard: ['html', 'body'], deep: [ /^swiper/ ] }, ... }