How do I extend the default theme in Tailwind?

Based on the repository data, you extend the default theme in Tailwind using the extend key within your theme configuration.

Here's how it works:

In your config file, you structure your theme like this:

{
  theme: {
    extend: {
      colors: {
        primary: 'blue',
      },
    },
  },
}

This approach merges your extended values with the default theme values rather than replacing them. For example, in [packages/tailwindcss/src/compat/config/resolve-config.test.ts:L71-L110], you can see a test demonstrating this:

{
  config: {
    theme: {
      colors: {
        red: 'red',
      },
      fontFamily: {
        sans: 'SF Pro Display',
      },
    },
  },
},
{
  config: {
    theme: {
      extend: {
        colors: {
          blue: 'blue',
        },
      },
    },
  },
}

The result is that both the base red color and the extended blue color are available, along with the extended fontFamily.

You can also extend theme values in plugins using the same pattern [packages/tailwindcss/src/compat/plugin-api.test.ts:L895-L934]:

plugin(
  ({ theme }) => { /* ... */ },
  {
    theme: {
      extend: {
        myAccentColor: ({ theme }) => theme('accentColor'),
      },
    },
  },
)

This allows you to add or override theme values while preserving defaults—as opposed to directly setting theme: { colors: { ... } }, which would replace the entire colors palette.

FOLLOW_UPS:

• How do I override default theme values instead of extending?
• Can theme values reference other theme values?
• How do plugins define custom theme keys?