Tailwindcss ships with it’s own color palette, but it’s super simple to switch that color palette out to the Material Design color palette in 2 minutes.

You can seamlessly switch out an existing tailwind project or a new one.

Create a tailwind.config.js file

Make sure you have a tailwind.config.js file in the root of your project. If you don’t have anything in that file, it can be pretty basic at this point:

// tailwind.config.js
module.exports = {}

Install the material-ui-colors npm package:

npm install material-ui-colors --save-dev

Import the colors into your tailwind config

// tailwind.config.js
const colors = require('material-ui-colors')
module.exports = {
  theme: {
    extend: {
      colors: { ...colors }
  }
} 

You can add any additional colors you like in the colors object.

That’s it! You now have access to the full color palette throughout your whole project for all colors in the palette in gradients 50 and 100 through 900, as well as A100, A200, A400, and A700.

So, bg-deepOrange-A200 and text-lightBlue-50 works too. Anywhere you have access to the tailwind color palette, you can now use Material colors.

Happy coding!