Load mantine styles after Tailwind preflight

user_1751977 0
Viewed 1391

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.

enter image description here

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?

mantine tailwind-css next.js reactjs
1 Answers

Create a 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>
user_165729970
Related