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?

Mae

This GH issue might be relevant to your issue: github.com/mantinedev/mantine/issues/823. – Purely

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>

Linder

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... – Envoi

this solution still doesn't work when deploying to production (without the preflight fix above) – Consignor

It starts working after enabling both fixes (disable preflight and this one) – Consignor

Answer 2

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

Copy out https://unpkg.com/[email protected]/src/css/preflight.css refereed by https://tailwindcss.com/docs/preflight and import it in your entry point

Athalia

module.exports = { mode: "jit", content: ["./src/**/*.{js,ts,jsx,tsx}"], corePlugins: { preflight: false // avoid conflict with mantine theming, #72083881 }, theme: { extend: {}, }, plugins: [], }; – Consignor

@Consignor not sure what are you talking about... – Athalia

I tried to copy the content of my tailwind config how preflight disable looks – Consignor

Another method to fix this issue is to add your own mantine emotion cache and disable prepend: github.com/mantinedev/mantine/issues/823 – Consignor

This looked promising but didn't help. I tried preflight: false and replacing @import 'tailwind'; with @import 'tailwindcss/lib/css/preflight.css'. It found that file successfully, but my styles are pretty messed up. – Enrage

Answer 3

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;

Bungalow

Answer 4

My SCSS is:

/* styles/globals.scss */
@tailwind components;
@tailwind utilities;

@layer tailwind {
  @tailwind base;
}

And I do not disable preflight in tailwind.config.ts.

See https://github.com/orgs/mantinedev/discussions/1672.

Enrage

Works with Mantine v5. I tried it on v7 and it did not work. My tailwind.css file was a normal css file, not a scss. – Ravishing

@Ravishing Mine is ` "@mantine/core": "^7.2.1", "@mantine/hooks": "^7.2.1",` with "tailwindcss": "^3.3.0",. – Enrage

I tried it with "tailwindcss": "^3.3.6" and "@mantine/core": "^7.3.0", the Mantine Group and Grid weren't working right. The tailwind base styles were overriding them. – Ravishing

Answer 5

The way I solved it was by changing the order of 'globals.css' and '@mantine/core/styles.css'.

Below is the code sample:

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import '@mantine/core/styles.css'; // import before globals.css
import './globals.css'
import { MantineProvider, ColorSchemeScript } from '@mantine/core';
import { Providers } from './providers';
const inter = Inter({ subsets: ['latin'] })

Here you can read more Mantine

Leukas

Answer 6

I used this solution to get it to work inside index.css add these

@layer base {
button[type="button"]:where([data-active]) {
    background-color: #2563eb;
}

}

Windtight