Understanding Custom Colors & The "Gotcha" (OrganizingStyles_48)

A common pitfall is accidentally replacing Tailwind's entire default color palette instead of just adding to it.

This happens if you define your colors directly under theme.colors in your tailwind.config.js file, like this:

module.exports = {
  theme: {
    colors: { // <-- Problematic: NO 'extend' here!
      'custom-only': '#FF00FF',
    }
    // ... other theme settings
  },
  plugins: [],
}

If you do the above in your tailwind.config.js :

• You would lose all of Tailwind's built-in colors (e.g., bg-red-500 , text-blue-600 , border-gray-300 , etc.).
• Only your explicitly defined custom colors (like 'custom-only' ) would be available.

To avoid this, always use theme.extend.colors :

module.exports = {
  theme: {
    extend: { // <-- Correct: Use 'extend'
      colors: {
        'custom-one': '#ABCDEF',
        'custom-two': '#123456',
      }
    }
    // ... other theme settings
  },
  plugins: [],
}

This ensures your custom colors are added to the default palette, giving you the best of both worlds.

For instance, if the "Gotcha" occurred, the following div styled with a default Tailwind class bg-indigo-500 would not have its background color applied: