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

Two steps: Add preflight: false in tailwind.config.js to disable the default

Copy out https://unpkg.com/tailwindcss@3.2.4/src/css/preflight.css refereed by https://tailwindcss.com/docs/preflight and import it in your entry point

Answer 2

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>