Not possible to override custom colors with built in color

[garth]

When extending the tailwind colors and using one the the custom colors, it is not possible to override with a built in color. For example the following does not work.

      classNames(
        'dark:border-my-custom-color', // using a built in color works
        {
          'dark:border-red-500': !isValid, // this has no effect
        }
      )

The workaround is to remove 'dark:border-my-custom-color', but I would expect it to be possible to override both built in and extended colors with either built in or extended colors.

[javifm86]

move 'dark:border-my-custom-color', but I would expect it to be possible to override both built in and extended colors

Can you share your tailwind.config.js please?

[garth]

module.exports = {
  theme: {
    transitionDuration: {
      default: '300ms',
      '0': '0ms',
      '100': '100ms',
      '200': '200ms',
      '300': '300ms',
    },
    transitionDelay: {
      default: '0ms',
      '0': '0ms',
      '100': '100ms',
      '200': '250ms',
      '300': '500ms',
    },
    extend: {
      colors: {
        app: {
          primary: '#22859b',
          'primary-dark': '#014e5e',
          secondary: '#fc7244',
          'secondary-dark': '#9e4629',
        },
      },
    },
  },
  variants: {
    backgroundColor: [
      'responsive',
      'first',
      'last',
      'odd',
      'even',
      'hover',
      'focus',
      'active',
      'disabled',
      'dark',
      'dark:odd',
      'dark:even',
      'dark:hover',
      'dark:focus',
      'dark:active',
      'dark:disabled',
    ],
    borderColor: [
      'responsive',
      'first',
      'last',
      'odd',
      'even',
      'hover',
      'focus',
      'active',
      'disabled',
      'dark',
      'dark:odd',
      'dark:even',
      'dark:hover',
      'dark:focus',
      'dark:active',
      'dark:disabled',
    ],
    textColor: [
      'responsive',
      'first',
      'last',
      'odd',
      'even',
      'hover',
      'focus',
      'active',
      'disabled',
      'dark',
      'dark:odd',
      'dark:even',
      'dark:hover',
      'dark:focus',
      'dark:active',
      'dark:disabled',
    ],
  },
  plugins: [require('tailwindcss-prefers-dark-mode')(), require('tailwindcss-transitions')()],
}

[javifm86]

I don´t understand exactly what are you trying to do. With your config colors, I am using this classes and everything is working as expected:
border-t-4 border-green-500 dark:border-app-secondary

By default border is default green-500, with user preference dark, border is app-secondary extended color ('#fc7244').

It is this behaviour which is not working for you? Perhaps you are trying to do something more advanced with Tailwind.

[garth]

Thanks for looking into this. The problem occurs when you try to override an extended color with a build in one (I think you tried the other way around).

I think that it may be a bug in tailwind, the way that it implements extend. Since the workaround is so easy I don't think that it's worth spending more time on.

BTW: this plugin is working really well, thanks for taking the time to make and publish it!

[javifm86]

Ok, I suppose you can open an issue in TailwindCSS repo. Thanks!