Broken tailwind classname when built to production, NextJs 14

Question

Im working on a project using:

• Next.JS 14.1.0
• Tailwind 3.3.2
• MantineUI 7.6.1 as my UI library

Everything works find when I build my components when running next dev. But when the app is deployed to production, I noticed some of my styling is missing.

I started to investigate why that happened and that's when I notice some of the classname when built is broken.

Brokent Tailwind Classname

Is there any fix to this issue or did i misconfigure anything?

Any help is appreciated

I had faced this problem before but never really noticed about the broken classname.

What i did to get around this was using react css properties to style my components rather than using the tailwind class.

This solution works for me but it is very tedious because I have to search every component that uses that classname and change to using normal CSS for each components.

This is how I structure my global.css

// globals.css
@layer tailwind {
  @tailwind base;
}
@import '@mantine/core/styles.css';
@import '@mantine/carousel/styles.css';
@import '@mantine/notifications/styles.css';
@import '@mantine/dates/styles.css';
@tailwind components;
@tailwind utilities;

My tailwind config

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*!(*.stories|*.spec).{js,ts,jsx,tsx,mdx}'
  ],
  safelist: ['border', 'shadow'],
  theme: {
    extend: {
      borderRadius: {
        DEFAULT: '12px',
        xl: '25px',
      },
      dropShadow: {
        DEFAULT: '0px 2px 12px rgba(183, 189, 196, 0.503551)',
        bt: ' 0px 2px 15px rgba(183, 189, 196, 0.570852)',
      },
      boxShadow: {
        DEFAULT: '0px 4px 12px rgba(183, 189, 196, 0.503551)',
      },
      ... // More theme
    },
  },
  plugins: [
    require('@tailwindcss/container-queries'),
  ],
};