Next.js 13 app + tailwind | Mantine | Page 1

I'm trying to get mantine to play nice with next and tailwind.

To do this, I'm trying to combine a pre-made Emotion Cache with prepend set to false (https://stackoverflow.com/a/73681886/219604) so mantine and tailwind get along.

To get it working with SSR + Next app directory, I'm trying to use useServerInsertedHTML (per this example https://github.com/mantinedev/mantine-next-template/blob/next-13-app/app/emotion.tsx#L7).

The Mantine <Button> is invisible until I mouseover it. Any idea what I'm doing wrong?

Here's what I have so far:

// emotion.tsx
import { createEmotionCache, MantineProvider } from '@mantine/core';
import { useServerInsertedHTML } from 'next/navigation';

const cache = createEmotionCache({
  key: 'mantine',
  prepend: false,
});

export default function RootStyleRegistry({ children }: { children: React.ReactNode }) {
  cache.compat = true;

  useServerInsertedHTML(() => (
    <style
      data-emotion={`${cache.key} ${Object.keys(cache.inserted).join(' ')}`}
      dangerouslySetInnerHTML={{
        __html: Object.values(cache.inserted).join(' '),
      }}
    />
  ));

  return (
    <MantineProvider withGlobalStyles withNormalizeCSS emotionCache={cache}>
      {children}
    </MantineProvider>
  );
}

// layout.tsx
import RootStyleRegistry from './emotion';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head />
      <body id="__next">
        <RootStyleRegistry>
          <Navbar />
          <div className="container p-4 m-auto">{children}</div>
        </RootStyleRegistry>
      </body>
    </html>
  );
}

#Next.js 13 app + tailwind