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

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.

Answer 2

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

Answer 3

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

Answer 4

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;

Answer 5

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;
}

}

Answer 6

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>