Load mantine styles after Tailwind preflight

Question

I'm trying to use Mantine and Tailwind together, however Tailwind's "preflight" base styles are overriding Mantine's resulting in a simple button being invisible.

You can disable preflight:

  corePlugins: {
    preflight: true
  }

But I'd rather keep it enabled and load Mantine CSS after, per this suggestion.

Is there any way to specify order for this?

Answer 1

Create an Emotion cache using createEmotionCache from Mantine core, and set prepend to false. Then, call it inside MantineProvider's emotionCache prop:

import {
  MantineProvider,
  createEmotionCache
} from '@mantine/core';

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

<MantineProvider emotionCache={myCache}>{children}</MantineProvider>