How do I extend the default theme in Tailwind?

Based on the repository data, you extend the default theme in Tailwind using the extend property in your config file.

In a JavaScript config file, you structure it like this:

module.exports = {
  theme: {
    extend: {
      // Your extended theme values here
    },
  },
}

Examples

Extending colors: You can extend color values while keeping defaults. For instance, from [packages/tailwindcss/src/compat/config.test.ts:L447-L456], a config with:

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

will extend the default color palette with these new values.

Extending other theme properties: You can extend any theme property similarly. From [packages/tailwindcss/src/compat/config.test.ts:L315-L325], examples include:

theme: {
  extend: {
    fontSize: {
      base: ['200rem', { lineHeight: '201rem' }],
    },
    spacing: {
      // custom spacing values
    },
  },
}

Key difference: When you use extend, your custom values are added to the default theme values (like those defined in [packages/tailwindcss/src/compat/default-theme.ts]). If you replace theme.extend with just theme, you would override the defaults entirely.

FOLLOW_UPS:

• How do theme callback functions work in extend?
• Can you override default theme values completely?
• What theme properties can be extended?