How to extend Tailwind colors?

Extending colors in Tailwind CSS allows you to add custom colors to the existing color palette provided by Tailwind.

This process involves modifying the tailwind.config.js file. Here’s a step-by-step guide on how to extend Tailwind colors:

1. Install Tailwind CSS

If you haven't already set up Tailwind CSS in your project, follow these steps to install it:

npm install tailwindcss
npx tailwindcss init

This will generate a tailwind.config.js file in the root of your project.

2. Open the tailwind.config.js file

Navigate to the tailwind.config.js file. This is where you will extend the color palette.

3. Extend the Colors

Add the custom colors within the theme.extend section of the configuration file. Here’s an example:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': {
          50: '#e3f2fd',
          100: '#bbdefb',
          200: '#90caf9',
          300: '#64b5f6',
          400: '#42a5f5',
          500: '#2196f3',
          600: '#1e88e5',
          700: '#1976d2',
          800: '#1565c0',
          900: '#0d47a1',
        },
        'brand-red': {
          50: '#ffebee',
          100: '#ffcdd2',
          200: '#ef9a9a',
          300: '#e57373',
          400: '#ef5350',
          500: '#f44336',
          600: '#e53935',
          700: '#d32f2f',
          800: '#c62828',
          900: '#b71c1c',
        },
      },
    },
  },
  plugins: [],
}

In this example, custom colors brand-blue and brand-red are added, each with different shades ranging from 50 to 900.

4. Use the Custom Colors in Your CSS

Now that the colors are defined, you can use them in your HTML and CSS. For example:

<div class="bg-brand-blue-500 text-white p-4">
  This div has a custom background color!
</div>

In this example, the bg-brand-blue-500 class applies the custom blue color with a shade of 500 to the background.

5. Build Your CSS

Ensure you build your CSS to include the changes. If you are using a build tool like postcss, run:

npx tailwindcss build src/styles.css -o dist/styles.css

Replace src/styles.css with your source CSS file and dist/styles.css with the output file where you want your built CSS to be saved

Example Configurations

Here are a few more examples of how you can customize and extend colors:

Adding a Single Custom Color

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-green': '#10B981',
      },
    },
  },
  plugins: [],
}

Overriding Default Colors

module.exports = {
  theme: {
    extend: {
      colors: {
        red: {
          50: '#ffe5e5',
          100: '#ffcccc',
          200: '#ff9999',
          300: '#ff6666',
          400: '#ff3333',
          500: '#ff0000',
          600: '#cc0000',
          700: '#990000',
          800: '#660000',
          900: '#330000',
        },
      },
    },
  },
  plugins: [],
}

In this example, the default red color is overridden with a new set of shades.

Bonus ✨ Shades Generator

For developers looking to quickly generate custom color shades, we recommend trying our Tailwind Color Shade Generator tool below. 

Refresh the page if you don't get a result

Conclusion

Extending Tailwind colors allows you to create a more personalized and brand-consistent design system. By following the steps outlined above, you can easily add custom colors to your Tailwind project, ensuring that your designs stand out while maintaining the utility-first approach of Tailwind CSS.

Feel free to experiment with different color combinations and shades to find the perfect palette for your project!