Cannot override custom color class by basic one

[ghost]

Hey everyone!
I'm stuck when I'm trying to override a custom class (bg-primary) added into tailwind.config.js by another Tailwind class (bg-red-500).

  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#00BBFF'
        },
        secondary: {
          DEFAULT: '#5FA62C'
        }
      }
    }
  },

If I override bg-primary by another custom class bg-secondary it works.
If I override bg-primary by bg-red-500, it doesn't work. The class is present into class attribute but the bg stays the same.
If I replace bg-primary by bg-red-500 in my component and I override by a custom class bg-primary, it works.

My child component looks like that:

<button class="… bg-primary">

My parent component looks like that:

<my-component class="bg-red-500">

Do you have any idea to solve my problem ?
Thanks