Adding Custom Color Themes to Tailwind CSS

Do the Tailwind colors not fit your brand? Well, it's easy to fix! We just need to extend the default configuration, particularly the color palette. This can be done by modifying your tailwind.config.js file. Here's how:

Modify tailwind.config.js

I'll assume you have Tailwind set up, but if not, you can find the installation guide at the official Tailwind CSS documentation.

In the tailwind.config.js file, you can extend the default theme to include your custom colors. You can either add new colors or override existing ones. Here’s how you can add a custom color theme:

module.exports = {
  theme: {
    extend: {
      colors: {
        'lochmara': '#007ace',    // Add a single custom color
        'flamingo': {
          100: '#fee2e2',
          200: '#fecaca',
          300: '#fca5a5',
          400: '#f87171',
          500: '#ef4444', // Standard color for 'flamingo'
          600: '#dc2626',
          700: '#b91c1c',
          800: '#991b1b',
          900: '#7f1d1d',
        },
        // You can add as many custom colors as needed
      },
    },
  },
  plugins: [],
}

Here I've added a blue called "lochmara" and a red shades I've called "flamingo". Quick note: I give these odd names to help me remember that they are my own custom colors and avoid clashing with regular names in Tailwind.

Use Your Custom Colors

Once you've defined your custom colors, you can use them in your HTML by referencing the color names you've set:

<button class="bg-lochmara text-white">Blue Button</button>
<p class="text-flamingo-500">This is a red paragraph.</p>

Quick Tip

• Generate your colors: Tools like [Tailwind Shades] make it quick and easy to get a color palette with all the expected variables so it'll mirror your default Tailwind color behavior.