Mantine with Tailwind 4

[cbschuld]

All, has anyone successfully figured out a clean way to use both Mantine and Tailwind CSS 4? In Tailwind 3 you could use it fine via a layer:

@import '@mantine/core/styles.css';

@layer tailwind {
  @tailwind base;
}

@tailwind components;
@tailwind utilities;

Then you had to turn off preflight in tailwind.config.js

corePlugins: {
preflight: false,
},

But I have not successfully figured out how to do it with the latest version (v4) of Tailwind.

Thanks!

[Visualizeit]

In Your main css file, import tailwindcss and mantine styles layer.

@layer theme, base, mantine, components, utilities;

@import 'tailwindcss';

@import '@mantine/core/styles.layer.css';