Adding Colors to Tailwind CSS

Want to add custom colors in Tailwind CSS? It's super easy! Just follow these steps.

To add your colors to Tailwind, you need to update the tailwind.config.js file. There are two main ways to do it.

Option 1: Replace the Default Color Palette

If you want to replace Tailwind’s default colors with your own, update your config like this:

// tailwind.config.js
export default {
  theme: {
    colors: {
      primary: "#FF69b4",  // Also can use CSS variables, like "var(--color-primary)"
      secondary: "#333333",
      brand: "#243c5a",
    },
  }
}

Now, you can use the .bg-primary, .bg-secondary, and .bg-brand utility classes in your HTML:

<div class="bg-primary">This is a primary background</div>

⚠ Note: This replaces Tailwind’s default colors, so if you want to keep those, check out Option 2!

Option 2: Add New Colors Without Removing Default Ones

If you want to add new colors but keep Tailwind’s default ones, use the extend option in your config:

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        primary: "#FF69b4",
        secondary: "#333333",
        brand: "#243c5a",
      },
    },
  }
}

Now, you’ll get your new colors alongside the default Tailwind colors, so you can still use things like .bg-red-500, .bg-blue-700, etc.

Option 3: Modify Existing Color Stacks

If you want to merge your custom colors into Tailwind’s existing color palette, you can do that too. Here’s how:

// tailwind.config.js
import defaultTheme from 'tailwindcss/defaultTheme'

export default {
  theme: {
    colors: {
      primary: "#FF69b4",
      secondary: "#333333",
      brand: "#243c5a",
      ...defaultTheme.colors, // This keeps all the default colors
    },
  }
}

This will keep all of Tailwind’s default colors at the bottom of the list, with your custom colors on top.

/* Generated CSS */
.bg-primary {
  background-color: #ff69b4;
}

.bg-secondary {
  background-color: #333333;
}

That's it! 🎉 Now you can use your custom colors in Tailwind CSS however you like. 🚀