Overriding colour values

[haztakki]

I originally created a Tweet for this but then figured it would be better to use the forums in case someone else is facing the same issue.

I have always used the Tailwind default colours but now I'm working on a project that requires custom colour values. After looking at the Tailwind documentation, I overriden some colour values (e.g. blue), however this breaks other non-set values (they don't work at all - e.g. bg-transparent and text-white)?

I'm probably missing something minor. I have tried to import all the default colours and only override the ones I need to like so:

I tried to do this:

const { colors } = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    colors: {
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      red: colors.red,
      yellow: colors.yellow,
      green: colors.green,
      blue: {
        lighter: '#2992d6',
        default: '#052545',
        darker: '#031221',
      },
      orange: {
        lighter: '#e17507',
        default: '#e17507',
        darker: '#e17507',
      },
      indigo: colors.indigo,
      purple: colors.purple,
    }
  }
}

This throws an error when I run npm run dev

https://tailwindcss.com/docs/customizing-colors/#disabling-a-default-color

This is what I have in my tailwind.config.js file:

  theme: {
    extend: {},
    colors: {
      blue: {
        lighter: '#2992d6',
        default: '#052545',
        darker: '#031221',
      },
      orange: {
        lighter: '#e17507',
        default: '#e17507',
        darker: '#e17507',
      },
    },
  },
  variants: {
    outline: ['focus', 'responsive', 'hover']
  },
  plugins: [
      require('@tailwindcss/ui'),
  ],
};```

[haztakki]

Oh, I figured it out... It is now really obvious and a very silly mistake. I had colours: {...} outside of the extend: {}
It's just gone 2 AM here, time to sleep and rest my brain ready for more coding tomorrow! 😁

[jalendport]

If all you're wanting to do is update certain colors in the default config, than you'll want to use extend like so:

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          lighter: '#2992d6',
          default: '#052545',
          darker: '#031221',
        },
        orange: {
          lighter: '#e17507',
          default: '#e17507',
          darker: '#e17507',
        },
      }
    }
  }
}

The method you're currently using where you import all the colors and then overwrite them as needed is only best if you want to remove some of the colors entirely from the config - otherwise it's more error-prone and messy than just using extend (case and point: you forgot to import the transparent color, hence why bg-transparent isn't working for you).

[jalendport]

Ah, looks like you actually solved it as I was typing this up 😄

[haztakki]

Ah, looks like you actually solved it as I was typing this up smile

Yeah, it was a really stupid mistake I made. I blame my tiredness and lack of sleep! 😆 Though to be honest, I don't think I would of noticed it so soon if I hadn't posted it here, the Tweet version was very dumbed down. Only after providing the tailwind.config.js contents in my reply here that I had noticed the mistake.