mui-tw-merge v1.0.1

mui-tw-merge

Installation

1. Install @mui/material and tailwindcss:

npm:

npm i @mui/material @emotion/react @emotion/styled

npm i -D tailwindcss postcss autoprefixer

yarn:

yarn add @mui/material @emotion/react @emotion/styled

yarn i -D tailwindcss postcss autoprefixer

pnpm:

pnpm i @mui/material @emotion/react @emotion/styled

pnpm i -D tailwindcss postcss autoprefixer

2. Install mui-tw-merge as a dev dependency:

npm:

npm i -D mui-tw-merge

yarn:

yarn add -D mui-tw-merge

pnpm:

pnpm i -D mui-tw-merge

Usage

1. Create a new Material UI theme in tailwind.config.ts

import { Config } from "tailwindcss";
import { createTheme } from "@mui/material/styles";
import {
  mergeSpacing,
  mergeScreens,
  mergePalette,
  mergeShadows,
  mergeTransitionEasing,
  mergeTransitionDuration,
} from "mui-tw-merge";

const materialTheme = createTheme({ /* your MUI theme config */ })

const config: Config = {
  content: [],
  theme: {
    extend: {
      spacing: mergeSpacing(materialTheme),
      screens: mergeScreens(materialTheme),
      colors: mergePalette(materialTheme),
      boxShadow: mergeShadows(materialTheme),
      dropShadow: mergeShadows(materialTheme),
      transitionTimingFunction: mergeTransitionEasing(materialTheme),
      transitionDuration: mergeTransitionDuration(materialTheme),
    },
  },
};

export default config;

2. Use MUI theme's properties as tailwind classes

import Button from "@mui/material/Button";

export const MyComponent = () => {
  return (
    <div className="flex flex-col gap-3">
      <p className="mb-1">My margin-bottom is theme.spacing(1)</p>

      <button type="button" className="bg-primary-main">
        My background-color is theme.palette.primary.main
      </button>

      <Button className="duration-shortest ease-sharp transition-shadow hover:shadow-18">
        It also works with MUI Components
      </Button>
    </div>
  );
};