I am using Tailwind CSS and have extended some colors in my tailwind.config.js file. However, when I add the bg-white class or any other class, no color appears until I comment out all the extended colors. Here’s my configuration:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./dist/*.html'],
  theme: {
    extend: {
      fontFamily: {
        'jost': ['Jost', 'sans-serif'],
        'poppins': ['Poppins', 'sans-serif']
      },
      fontSize: {
        sm: ['14px', '20px'],
        base: ['16px', '24px'],
        lg: ['20px', '28px'],
        xl: ['24px', '32px'],
      },
      colors: {
        primary: '#f97150',
        heading: {
          light: '#383838',
          dark: '#333333',
        },
        gray: {
          light: "#e1e1e1",
          lightTwo:"#f2f2f2",
          medium: '#999999',
          dark: '#8c8c8c',
        }
      },
      container: {
        center: true,
        padding: "20px"
      },
      html: {
        fontSize: "14px",
      }
    }
  },
}

How can I resolve the issue so that bg-white and other default Tailwind classes work correctly without needing to comment out the extended colors?:

`
test

`