What is Overriding color palette in Tailwind?

Tailwindmarkup~5 mins

Overriding color palette in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Changing the default colors helps you match your website's style. It makes your design unique and consistent.

You want your brand colors to show on buttons and backgrounds.

You need specific shades that Tailwind doesn't have by default.

You want to keep your color names but change their shades.

You want to simplify colors for a minimal design.

You want to add new colors alongside the default ones.

Syntax

Tailwind

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1DA1F2',
        secondary: '#14171A'
      }
    }
  }
}

Use extend to add or change colors without removing Tailwind's defaults.

Define colors as hex codes, rgb, or named colors.

Examples

Adds a new color called brandBlue without removing default colors.

Tailwind

module.exports = {
  theme: {
    extend: {
      colors: {
        brandBlue: '#0d47a1'
      }
    }
  }
}

Replaces the entire color palette with only red and green.

Tailwind

module.exports = {
  theme: {
    colors: {
      red: '#ff0000',
      green: '#00ff00'
    }
  }
}

Overrides only some shades of the gray color.

Tailwind

module.exports = {
  theme: {
    extend: {
      colors: {
        gray: {
          100: '#f5f5f5',
          900: '#111111'
        }
      }
    }
  }
}

Sample Program

This example shows how to override Tailwind's color palette by adding primary and secondary colors. The page background uses the primary color, and the button uses the secondary color. The button changes color on hover.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Custom Color Palette</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#1DA1F2',
            secondary: '#14171A'
          }
        }
      }
    }
  </script>
</head>
<body class="bg-primary text-white min-h-screen flex flex-col items-center justify-center">
  <h1 class="text-4xl font-bold mb-4">Welcome to My Site</h1>
  <button class="bg-secondary px-6 py-3 rounded hover:bg-gray-700 transition">Click Me</button>
</body>
</html>

OutputSuccess

Important Notes

Always use extend unless you want to replace all default colors.

Test your colors for good contrast to keep text readable.

You can use the Tailwind Play tool to try colors live in the browser.

Summary

Override colors by adding or changing them in the Tailwind config.

Use extend to keep default colors and add your own.

Custom colors help your site look unique and match your brand.