How do I extend the default theme in Tailwind?

Based on the repository data, there are two main ways to extend the default theme in Tailwind:

1. Using theme.extend in Your Config

The most common approach is to use the extend key in your config's theme object. This merges your custom values with the default theme without replacing it.

For example, from [packages/tailwindcss/src/compat/config.test.ts:L447-L486], you can see:

{
  theme: {
    extend: {
      colors: {
        red: 'very-red',
        blue: 'very-blue',
      },
    },
  },
}

This adds custom color values while keeping all the default colors available.

2. Using Theme Functions in Config

You can also use callback functions that reference other theme values. From [packages/tailwindcss/src/compat/config/create-compat-config.ts:L5-L64], you can see examples like:

theme: {
  extend: {
    fontSize: ({ theme }) => ({
      ...theme('text', {}),
    }),
    boxShadow: ({ theme }) => ({
      ...theme('shadow', {}),
    }),
  },
}

This allows you to derive theme values from other theme keys dynamically.

3. Extending Nested Values

From [packages/tailwindcss/src/compat/config.test.ts:L288-L366], you can see how to extend nested theme values:

theme: {
  extend: {
    fontSize: {
      base: ['200rem', { lineHeight: '201rem' }],
      md: ['200rem', { lineHeight: '201rem' }],
    },
  },
}

The key principle is: use extend to add or override values while preserving the defaults, rather than replacing the entire theme object.

FOLLOW_UPS:

• How do I override default theme values completely?
• Can theme callbacks reference plugin-defined theme keys?
• What's the difference between theme and extend?