← All posts

Tailwind Config: Override vs Extend Colors (Winden)

winden

You add one brand color to your Tailwind config, and suddenly text-blue-600 and text-red-500 don't work anymore. That happens because you overrode the theme instead of extending it. This video shows both options side by side in Tailwind Play, so you know which one keeps the default palette and when you'd want to remove it on purpose.

Adding a brand color under theme.colors (override)

Most people start with this approach, and it's the one that removes colors without warning. In the demo we generate a brand palette with a Tailwind color shades generator, copy the config code, and paste it into the Config tab of Tailwind Play.

  1. Open the Config tab.
  2. Inside theme, add a colors key.
  3. Paste the brand object inside colors.
module.exports = {
  theme: {
    colors: {
      'brand': {
        '50': '#f5f2fd',
        '100': '#ebe6fb',
        '200': '#cebff6',
        '300': '#b099f1',
        '400': '#754de6',
        '500': '#3a00db',
        '600': '#3400c5',
        '700': '#2c00a4',
        '800': '#230083',
        '900': '#1c006b'
      },
    },
    extend: {
      // ...
    },
  },
}

In the first try Tailwind Play showed a Config Error (SyntaxError: Unexpected token '{' on line 3) because the colon after colors was missing. If you see that error, look for a missing : first.

With the config fixed, the preview has three headings: "Blue Color", "Red Color" and "Brand Color". Only "Brand Color" gets a color. Blue and red go back to black, because any values you put directly under theme.colors replace Tailwind's whole default color palette. Only the colors you pasted are left.

Moving it under theme.extend.colors (extend)

If you want your brand color and Tailwind's defaults, you have to extend the theme. Move the same colors object inside extend:

module.exports = {
  theme: {

    extend: {
      colors: {
        'brand': {
          '50': '#f5f2fd',
          '100': '#ebe6fb',
          '200': '#cebff6',
          '300': '#b099f1',
          '400': '#754de6',
          '500': '#3a00db',
          '600': '#3400c5',
          '700': '#2c00a4',
          '800': '#230083',
          '900': '#1c006b'
        },
      },
    },
  },
}

Now all three headings are colored: blue and red come from the default palette, and the brand color comes from your config. Extending adds to the defaults. Overriding replaces them.

When overriding is the right choice

So why not always extend? Because sometimes you want to limit the palette on purpose. Tailwind's default palette includes Slate, Gray, Zinc, Neutral, Stone and many more. On a project with strict branding you may want only a gray and your brand color. If you override, the next designer or developer on the project can't use slate or zinc by mistake, because those classes don't exist. The design stays consistent because the config enforces it.

The same rule applies to breakpoints, spacing and more

Override and extend work the same way for every key in the theme. Breakpoints (screens) are a good example. You can extend them to keep the defaults and add more, or override them to use only your own set. The Tailwind docs, under Screens → Overriding the defaults, show a config that keeps just three breakpoints:

module.exports = {
  theme: {
    screens: {
      'sm': '576px',
      'md': '960px',
      'lg': '1440px',
    },
  },
}

Because screens sits directly under theme, the other default breakpoints are gone. That's what you want if your design only has three layouts. The same applies to spacing, font families, shadows and anything else you can configure in Tailwind CSS.

Works the same in Winden

We used Tailwind Play here because it makes the result easy to see. The same configuration works in Winden, so you can override or extend your theme in the Winden config the same way on your WordPress site.

Who is this for

  • WordPress developers using Winden or Tailwind CSS whose default color classes stopped working after they added a custom color.
  • Site builders who want to add brand colors while keeping Tailwind's full palette.
  • Teams that want to limit colors or breakpoints to a fixed set so every page stays on-brand.

FAQ

Why did my Tailwind default colors disappear after I added a custom color?

You put the color directly under theme.colors. That replaces the whole default palette. Move it to theme.extend.colors to keep the defaults.

What is the difference between theme and theme.extend in tailwind.config.js?

Values directly under theme replace Tailwind's defaults for that key. Values under theme.extend get added to the defaults.

When should I override instead of extend?

When you want a fixed set of values, for example only a gray and a brand color, or only three breakpoints. Anything you didn't define won't be available, and that keeps the design consistent.

Does this apply to breakpoints and spacing too?

Yes. screens, spacing, font families, shadows and every other theme key follow the same override/extend rule.

Does the same config work in Winden?

Yes. The video confirms the same configuration works in Winden. Tailwind Play is only used here to show the result.

Get Winden → dplugins.com

Related posts