colors.mdx

title	Color Palette - Material Tailwind
description	Learn how to customize the color palette for Material Tailwind.
navigation	default-color-palette customizing-the-default adding-new-color
github	colors
prev	theming
next	fonts

Customizing Colors - Material Tailwind

Customize the default color palette for @material-tailwind/react and add your own custom colors that matches your brand.

## Default Color Palette

@material-tailwind/react provides a default color palette that you can use. These colors are are the same as the ones used in Material Design.

---

## Customizing The Default Color Palette

Customizing colors for @material-tailwind/react is very easy and straightforward, it's the same as tailwindcss colors customization.

You just need to modify the colors object for the tailwind.config.js file.

module.exports = withMT({
  theme: {
    colors: {
      // Configure your color palette here
    },
  },
});

---

## Adding New Color

You can add new color to @material-tailwind/react color palette very easy and straightforward, it's the same as adding new color for tailwindcss.

You just need to add your own color to the extend and colors object for tailwind.config.js file.

module.exports = withMT({
  theme: {
    extend: {
      colors: {
        sky: {
          50: "#f0f9ff",
          100: "#e0f2fe",
          200: "#bae6fd",
          300: "#7dd3fc",
          400: "#38bdf8",
          500: "#0ea5e9",
          600: "#0284c7",
          700: "#0369a1",
          800: "#075985",
          900: "#0c4a6e",
        },
      },
    },
  },
});

For more information about tailwindcss colors customization, please check the TailwindCSS Documentation