How to extend tailwind color palette with material-ui/core theme palette

user_9279682 0
Viewed 392

I've a create-react-app project which uses @material-ui/core. How can I extend the tailwind css theme colors with the @material-ui/core pallete.

This is my tailwind.config.js file where I want tailwind to extend @material-ui/core pallete colors.

const { makeStyles, createStyles } = require('@material-ui/core');

let materialTheme = {};

const useHeaderStyles = makeStyles((theme) => {
  materialTheme = theme; // I'm not able to get this theme
  return createStyles(theme);
});

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        ...materialTheme.palette
      }
    },
  },
  plugins: [],
}
tailwind-css material-ui reactjs
1 Answers

The @material-ui/core colors are exported from @material-ui/core/colors, so the tailwind.config.js should be like:

const colors = require('@material-ui/core/colors'); // for mui v4
// const colors = require('@mui/material/colors'); for mui v5

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        ...colors
      }
    },
  },
  plugins: [],
}
user_92796820
Related