Extend vs Override in Tailwind Config

Extend vs Override

This is one of the most important concepts in Tailwind configuration and a common source of bugs for newcomers.

The Difference

Extend adds values alongside Tailwind's defaults:

theme: {
  extend: {
    colors: {
      brand: "#1a73e8",
    },
  },
}

Result: You get all default colors (blue, red, green, etc.) plus your brand color.

Override replaces the entire section:

theme: {
  colors: {
    brand: "#1a73e8",
    white: "#ffffff",
    black: "#000000",
  },
}

Result: You only get brand, white, and black. All default colors are gone.

When to Extend

• Adding a few custom values (most common)
• You want to keep all default utilities
• Gradual customization

When to Override

• Your design system replaces the default scale entirely
• You want strict control over available values
• Reducing bundle size by eliminating unused defaults

Mixing Both

You can extend some sections and override others:

theme: {
  // Override: only these breakpoints exist
  screens: {
    mobile: "375px",
    tablet: "768px",
    desktop: "1280px",
  },
  extend: {
    // Extend: add to defaults
    colors: {
      brand: "#1a73e8",
    },
    spacing: {
      128: "32rem",
    },
  },
}

Common Mistake

Putting values in theme.colors instead of theme.extend.colors when you intended to keep defaults. This accidentally removes all of Tailwind's built-in colors.