'Ant design css not loading on next.js build

I am using AntD components in my Next project and during development everything works fine, but when I build the project, Ant-Design css does not load properly. I have tried adding "import 'antd/dist/antd.css'" in _app, all the components and pages that use AntD components to no avail. Inspecting the source, for some reason only antd keyframes are loaded in e.g. antSlideUpIn, antdDrawerFadeIn

Is there something that I'm missing? Does it have anything to do with the fact that I'm using tailwind? But with tailwind removed it still does not work.

top of _app.tsx

import '../styles/index.css';
import 'antd/dist/antd.css';

index.css

/* purgecss start ignore */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* purgecss end ignore */

Does it have anything to do with the fact that I am using Tailwind?

postcss.config.js

module.exports = {
      parser: 'postcss-scss',
      plugins: [
        'tailwindcss',
        process.env.NODE_ENV === 'production' ?
          [ '@fullhuman/postcss-purgecss', {
              content: [
                './pages/**/*.{js,jsx,ts,tsx}',
                './components/**/*.{js,jsx,ts,tsx}',
              ],
              defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
            },
          ] : undefined,
        'postcss-preset-env',
      ],

tailwind.config.js

module.exports = {
  important: true,
  content: ["./pages/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}",],
  theme: {
    extend: {
      colors: {
        "gamestreet-teal-1": "#59f5ff",
        "gamestreet-purple-1": "#7774ff",
        "gamestreet-purple-2": "#a98bff",
        "gamestreet-purple-3": "#291749",
        "gamestreet-pink-1": "#ff0ff5",
      },
    },
  },
  plugins: [],
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source