next.js - Why is the custom color in tailwind not defined in NextJS production stage

Question

I created a custom color on tailwind in next js. On localhost the defined color appears fine, but when I deploy to vercel the color doesn't appear.

here's the picture localhost

production in vercel

tailwind.config.js

const colors = require('tailwindcss/colors');

module.exports = {
  purge: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: {
        DEFAULT: '#23232D'
      },
      white: colors.white,
      gray: {
        DEFAULT: '#A1A1A1',
      },
      ...
    }
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

ButtonColor/index.js

import PropTypes from 'prop-types';
import { motion } from 'framer-motion';

function ButtonColor({ color, isOpen, onClick }) {

  const variants = {
    open: { width: '100%' },
    closed: { width: '50%' },
  }

  return (
    <motion.div
      className={`bg-${color} h-6 cursor-pointer`}
      onClick={onClick}
      animate={isOpen ? "open" : "closed"}
      variants={variants}
    >
    </motion.div>
  )
}

ButtonColor.propTypes = {
  color: PropTypes.string.isRequired,
  isOpen: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired,
}

export default ButtonColor;

Any solutions for this case? thanks.

Answer 1

You can't use string concatenation to create CSS class names because PurgeCSS won't know to preserve your custom classes during the build process.

 className={`${color === 'red' ? 'bg-red' : 'bg-blue'} h-6 cursor-pointer`}

Alternatively, you can enable SCSS in Next.js and create a custom global SCSS file. In that file, define your styles using tailwindcss directives while purposely not wrapping your styles in the @layer directive. Not using the @layer directive tells tailwind to not purge those classes at build. You will need to manage the purging of these classes yourself.

global.scss

button {
  @apply h-6;
  @apply cursor-pointer;
  &.red{
    @apply bg-red-700 dark:bg-red-900;
    @apply text-white;
    @apply hover:bg-red-800 dark:hover:bg-red-800;
  }
  &.gray {
    @apply bg-gray-300 dark:bg-gray-600;
    @apply text-gray-900 dark:text-gray-200;
    @apply hover:bg-gray-400 dark:hover:bg-gray-500;
  }
}

 <motion.button className={`bg-${color}`}> ...

Side note - motion.div should be motion.button