12

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?

Ashbury
  • 2,160
  • 3
  • 27
  • 52

3 Answers3

8

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>
tony19
  • 125,647
  • 18
  • 229
  • 307
yash shukla
  • 81
  • 1
  • 4
  • 1
    When using this solution, it causes layout shift (my CSS jumps) when the page is loaded initially, seems like the emotionCache is loaded in afterwards... – Julius Sep 30 '22 at 10:40
  • this solution still doesn't work when deploying to production (without the preflight fix above) – Pencilcheck Feb 28 '23 at 22:48
  • It starts working after enabling both fixes (disable preflight and this one) – Pencilcheck Feb 28 '23 at 22:48
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

Guichi
  • 2,150
  • 1
  • 19
  • 27
  • module.exports = { mode: "jit", content: ["./src/**/*.{js,ts,jsx,tsx}"], corePlugins: { preflight: false // avoid conflict with mantine theming, https://stackoverflow.com/questions/72083381/load-mantine-styles-after-tailwind-preflight }, theme: { extend: {}, }, plugins: [], }; – Pencilcheck Jan 17 '23 at 01:14
  • @Pencilcheck not sure what are you talking about... – Guichi Jan 18 '23 at 02:49
  • I tried to copy the content of my tailwind config how preflight disable looks – Pencilcheck Jan 30 '23 at 01:47
  • Another method to fix this issue is to add your own mantine emotion cache and disable prepend: https://github.com/mantinedev/mantine/issues/823 – Pencilcheck Jan 30 '23 at 01:57
1

So, in your global stylesheet where you imported the tailwind styles remove the base styles as they will override some mantine styles. It should look like this

@tailwind components;
@tailwind utilities;
Teshane Crawford
  • 15
  • 1
  • 7