Part 51: Deep Dive into tailwind.config.js: Extending Themes

The configuration file is the control room of your design system.

1. theme.extend vs theme Overrides

• theme.extend: Adds your custom values alongside Tailwind's defaults.
• theme (direct): Completely wipes out the defaults for that property!

module.exports = {
  theme: {
    // ❌ DANGEROUS: Wipes out all default colors! (Only 'brand' will exist)
    // colors: { brand: '#2563eb' }

    //  CORRECT: Extends the existing color palette
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        }
      }
    }
  }
}

Key Takeaways

• Always place customizations inside theme.extend unless you explicitly want to discard default scales.

In Part 52, we will customize Color Palettes, Fonts & Spacing Scales!