Material UI CssBaseline conflicting with twin.macro GlobalStyles in Next.js

I'm trying to use Material UI as my UI library in a Next.js project. I style custom components with the styled import from twin.macro.

The GlobalStyles setup recommended by twin.macro is overriding the CssBaseline component provided by Material UI. If I remove GlobalStyles then CssBaseline seems to work fine but it makes the Tailwind classes stop working.

How do I make sure that Material UI CssBaseline takes precedence but Tailwind classes still work? Or is using Tailwind with Material UI a bad idea altogether?

Before removing GlobalStyles:

// _app.tsx
import CssBaseline from "@material-ui/core/CssBaseline";
import { TwGlobalStyles } from "../src";
import "../src/styles/globals.css";

export default function App({ Component, pageProps }) {
  return (
    <>
      <TwGlobalStyles /> // <GlobalStyles /> from twin.macro
      <CssBaseline />
      <Component {...pageProps} />
    </>
  );
}

After removing TwGlobalStyles: