Tailwind default color classes not working

I’m building a React application using Tailwind CSS Framework. I have used NPM to install tailwind in my react app in the following manner:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then I have also edited my tailwind.config.js file in the following manner:

module.exports = {

  content: [
  "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

And updated my index.css file in the following manner:

@tailwind base;
@tailwind components;
@tailwind utilities;

Then I tried to use default color classes that tailwind CSS provides in the following manner:

<h1 className='text-white'>...</h1>

Or

<div className='bg-white'>
    ...
</div>

But using this class is not changing the color of the text or the background of the div. Please, tell me how to solve this problem? Thanks in advance.

For your kind information, I can use custom color classes by writing them in the tailwind.config.js in the following manner:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    colors: {
      'custom-base-red': '#ff2f23',
      'custom-light-red': '#fb4a40',
      'custom-white': '#fefcfb',
      'custom-dark-gray': '#5f5f6c',
      'custom-light-gray': '#f7f7f7',
      'custom-border-gray': '#eeeeee',
      'custom-footer-bg': '#1d2124',
    },
    fontFamily: {
      'poppins': ["'Poppins'", 'sans-serif'],
    },
    dropShadow: {
      'custom-btn-shadow': '0px 5px 15px rgba(255, 47, 35, 0.4)',
    },
    extend: {},
  },
  plugins: [],
}

Answer

Tailwind’s default classes are not working because the custom ones you set in themes is overwriting them. To add custom classes move them into the extend object.

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        'custom-base-red': '#ff2f23',
        'custom-light-red': '#fb4a40',
        'custom-white': '#fefcfb',
        'custom-dark-gray': '#5f5f6c',
        'custom-light-gray': '#f7f7f7',
        'custom-border-gray': '#eeeeee',
        'custom-footer-bg': '#1d2124',
      },
      fontFamily: {
        poppins: ["'Poppins'", 'sans-serif'],
      },
      dropShadow: {
        'custom-btn-shadow': '0px 5px 15px rgba(255, 47, 35, 0.4)',
      },
    },
  },
  plugins: [],
};