Code QuizIntermediate

Extend vs Override Theme Colors

A config meant to add a brand color accidentally wipes out Tailwind's default palette.

Codejavascript

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      brand: '#1DA1F2',
    },
  },
  plugins: [],
};

The team only wanted to ADD a 'brand' color, but now classes like bg-red-500 no longer work. What is the bug?

Next →Structure of tailwind.config.js