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 in your theme configuration.

Basic Pattern

In your Tailwind config file, you use theme.extend to add or override theme values without replacing the entire default theme [packages/tailwindcss/src/compat/config/resolve-config.test.ts:L71-L110]:

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

This approach merges your custom values with the default theme rather than replacing it completely. For example, if the default theme already defines red: 'red' and you extend with blue: 'blue', both colors will be available [packages/tailwindcss/src/compat/config/resolve-config.test.ts:L71-L110]:

theme: {
  colors: {
    red: 'red',
  },
},
// ...
extend: {
  colors: {
    blue: 'blue',
  },
}
// Results in both red and blue being available

How It Works

When resolving config, Tailwind applies explicit theme configurations first, then merges values from the extend section. The resolveConfig function processes these in order to create a unified theme object that combines default values with your extensions [packages/tailwindcss/src/compat/config/resolve-config.test.ts:L36-L75].

You can extend any theme property this way—colors, fontSize, spacing, borderRadius, animation, and more—as shown in the compat config setup [packages/tailwindcss/src/compat/config/create-compat-config.ts:L5-L64].