colors.mdx

title	description	navigation	github	prev	next
Color Palette - Material Tailwind	Learn how to customize the color palette for Material Tailwind.	default-color-palette customizing-the-default adding-new-color	colors	theming	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