I’m using Tailwind CSS and MUI in my Next.js 14 project, but the Tailwind className prop is not working with custom MUI components. Here’s an example of one of my custom component:
import Button, { ButtonProps } from ‘@mui/material/Button’;
import React from ‘react’;

type MHButtonProps = ButtonProps & {
  className?: string;
};

const MHButton: React.FC<MHButtonProps> = ({
  color = 'inherit',
  className,
  sx,
  ...props
}) => {
  return (
    <Button
      color={color}
      className={className}
      sx={sx}
      {...props}
    />
  );
};`

export default MHButton

When I try to style the button using Tailwind, the styles do not apply, but it works perfectly with the sx prop from MUI:

<MHButton
  // sx={{   // (works)
  //   backgroundColor: 'red',
  //   '&:hover': {
  //     backgroundColor: 'green',
  //   },
  //   fontFamily: 'serif',
  // }}
  className="bg-yellow-500 text-white font-mono"  // (does not work)
>
  hi
</MHButton>```

I've tried configuring my Tailwind config file, but it still doesn't work. Here’s how my layout file (layout.tsx) is set up:
`<StyledEngineProvider injectFirst>
  <AppRouterCacheProvider options={{ enableCssLayer: true }}>
    <CssBaseline />
    {children}
  </AppRouterCacheProvider>
</StyledEngineProvider>
`
Any ideas on how to get Tailwind CSS classes to apply to MUI components? Is there a conflict with the setup, or is there a specific configuration needed to make this work?