Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

163
Views
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: [],
}
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!