Extend vs Overwrite

Hello, today we’re going to talk about managing colors in Tailwind CSS. Tailwind provides a vast array of predefined colors, but often, you might not need the majority of these for your projects. This guide will help you understand how to tailor the color palette to better suit your specific needs by either expanding or overwriting the default settings.

Dealing with the Default Color Palette

When working with Tailwind CSS and you start to add a class for a background color to a div, you’re presented with a long list of colors. For many developers, this extensive palette can be overwhelming and largely unnecessary.

Creating Custom Colors

To address this, you can create your own custom colors that better match your brand or design requirements. For example, using a tool like the UI Colors App lets you define a primary color that you can then integrate into your Tailwind configuration. This is done by adding your custom color under theme.extend.colors, which adds it alongside the existing colors.

export default {
  theme: {
    colors: {
      brand: '#eef1ff'
    },
  },
}

Extending Colors

Here’s an example of how you might extend your color palette in Tailwind:

export default {
  theme: {
    extend: {
      colors: {
        brand: '#eef1ff',
      },
    },
  },
}

This method allows you to keep the full range of default colors while introducing your own.

Overwriting Default Colors

Alternatively, you might prefer to simplify your palette by starting with a fresh set of colors. This is useful for projects that require a specific or minimalistic approach.

export default {
  theme: {
    extend: {
      colors: {
        brand: '#eef1ff',
        neutrals: {
          50: '#f7f7f8',
          100: '#eeeef0',
          200: '#d9d9de',
          300: '#b8b9c1',
          400: '#92939e',
          500: '#747583',
          600: '#5e5f6b',
          700: '#4d4d57',
          800: '#42424a',
          900: '#3a3a40',
          950: '#2e2e33',
        },
      },
    },
  },
}

By doing this, you replace all default palette colors with your own, but it’s important to remember that this removes even basic colors like white and black.

Adding Essential Colors Manually

If you choose to overwrite, it’s important to manually add back any essential colors you still need, such as white, black, transparent, and current. Here’s an example of how to include these:

export default {
  theme: {
    extend: {
      colors: {
        white: '#ffffff',
        black: '#000000',

        transparent: 'transparent',
        current: 'currentColor',

        brand: '#eef1ff',
        neutrals: {
          50: '#f7f7f8',
          100: '#eeeef0',
          200: '#d9d9de',
          300: '#b8b9c1',
          400: '#92939e',
          500: '#747583',
          600: '#5e5f6b',
          700: '#4d4d57',
          800: '#42424a',
          900: '#3a3a40',
          950: '#2e2e33',
        },
      },
    },
  },
}

Conclusion

Deciding whether to extend or overwrite your color palette in Tailwind CSS depends on your project needs. Customizing your settings can help keep your stylesheet manageable and focused on your visual identity. It can also simplify your development process and ensure consistency in your designs.

Thanks for reading, and I hope this guide assists you in managing colors effectively in your Tailwind CSS projects.

WP Tailwind Hero