How can i use tailwind css and mantine together ??

[elamandeep]

Hello Team 👋 !! while working on big project . I'm facing big trouble for every single thing such as notification , modal etc . For All those stuff i have to write it from scratch which is very painful for developer who is handling frontend and backend both . Then i found fireship video on Mantine (he brief described about mantine) .

How can i use Tailwind CSS and Mantine together in single project??

[rtivital]

You can use mantine with tw without any additional setup, just install both libraries. Make sure not to include tw base styles as they will mess up with some components.

[rtivital]

@ilhamgepe https://mantine.dev/theming/mantine-provider/#css-reset-and-global-styles

[ilhamgepe]

@ilhamgepe https://mantine.dev/theming/mantine-provider/#css-reset-and-global-styles
<MantineProvider withCSSVariables withGlobalStyles withNormalizeCSS theme={{ colorScheme: "dark", }} >

yes sir, I've used that. but it must be helped with css reset by meyerweb. I don't know where I went wrong 🤣

[PauliCZ44]

I will just hook into the answer. You can look here:
https://github.com/PauliCZ44/MantineTW

The trick is to use @layer rule.

@layer tailwind {
  @tailwind base;
}
@tailwind components;
@tailwind utilities;

[Navin009]

Worked for me tailwind and mantine button transparent issue is fixed

[SweydManaf]

Finally ❤️

[elamandeep]

Here's the screenshot of my react project ( just testing )

App.js file

I haven't used @taiwind base etc stuffs

tailwind config file

Mantine is working but tailwind isn't 😞 .

[elamandeep]

Thanks for you precious time @kwiat1990

[elamandeep]

Tried it's working 🥳 . Again Thank you 🙏

But i want to ask what was the reason that it was not working earlier even after i followed you ??

[kwiat1990]

@amandeep2603 all I did was to include postcss and autoprefixer dependencies and then to created postcss.config.js. Just like in Tailwind docs. You can compare your code from before and after to see all differences.

[asher-lab]

Will follow this procedure as well thanks @kwiat1990

[omerson-cruz]

Thanks for the tip @kwiat1990. I also need this :)

[elamandeep]

Here's example by @kwiat1990

How to Configure tailwind with mantine ?

https://github.com/kwiat1990/mantine-tailwind-demo

[melvinalmonte]

Thanks for this example, lets not forget though to leave out the @tailwind base from your global css as it will override some Mantine defaults i.e: Buttons will be invisible unless you pass a custom tailwind class.

[0xox]

None of the above solutions worked for us. We had to use a custom Emotion cache with prepend: false so that Mantine doesn't load the css at the top of the head.

This works but causes a flash of css on production. For this you need to make sure you are rendering that same emotion Cache during SSR build.

[Darathor17]

Hey @0xox ! Thx for the tip! Care to give some hint on how to fix the flash of css? what do you mean make sure we rendering the same emotion cache? (using nextJS 13 if it does matter)

[AliDayi97]

I am using Mantine with Tailwind and had no issues until today. I was working on a functionality to scale an image on hover and since using Next Image I used tailwind to configure the hover behaviour via className. The issue I encountered is the scale functionality (transform function to be more specific) didn't work. After a bit of research I found out that '@tailwind base' should be imported in global styles to make it work. The problem is base styles of tailwind overrides/clashes with the Mantine's so I couldn't find a proper solution to use tailwind fully with Mantine given this constraint.

[rtivital]

See https://mantine.dev/theming/emotion-cache/

[AliDayi97]

I am already using emotion-cache, is there a specific configuration that I am missing to resolve the problem I described above?

[rtivital]

https://mantine.dev/theming/emotion-cache/#change-styles-insertion-point

[AliDayi97]

I already tried "prepend: false" option, still importing tailwind base would override some of the Mantine styles (for example carousel arrows)

[rtivital]

Cannot tell anything without reproduction

[MiljkovicMarko]

@rtivital @AliDayi97 I've found, after long hours of trying, maybe even days, that https://mantine.dev/theming/emotion-cache/#server-side-rendering-with-custom-cache doesn't work for me (and possibly others like AliDayi97).
I've found a solution thanks to this issue and fix by same guy #21
As he mentions the most important thing is to run the createEmotionCache function inside the _app.tsx (or in _document.tsx?)(which we aren't doing if we follow the mentioned matine docs ssr guide). But unfortunately he didn't make that very clear and buried that by changing other things like insertionPoint, so lost some more time to figure that out...
This works with tailwind base (preflight).
You should also maybe add important: #app or something similar to tailwind config (then place that selector in html...), that way you can have tailwind on top of mantine on top of tailwind preflight (tailwind normalize/reset styles)).
Tested on Mantine v5.10 and Next.js v13
I've shorten the version of the fix:

// emotionCache.ts (in my case; equivalent to rtl-cache.ts in the docs)

import { createEmotionCache, EmotionCache } from '@mantine/core';

let cache: EmotionCache | undefined;

export const emotionCache = () => {
  if (!cache) {
    cache = createEmotionCache({
      key: 'mantine',
      prepend: false,
    });
  }
  return cache;
}

use:

// _document.tsx
import { emotionCache } from '/src/emotionCache';
import { createStylesServer, ServerStyles } from '@mantine/next';
import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
} from 'next/document';
// ...
const stylesServer = createStylesServer(emotionCache());

export default class _Document extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);

    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          <ServerStyles
            html={initialProps.html}
            server={stylesServer}
            key="styles"
          />
        </>
      ),
    };
  }

  render() {
 // ...

[cosmtrek]

This solution works for me. The Mantine docs for ssr guide should be updated.

[ianshk]

Sorry to bump this but you probably don't need to remove @base but just set preflight to false in the tailwind config like so:

export default { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], corePlugins: { preflight: false, }, theme: { extend: {}, }, plugins: [], };

Ref: https://tailwindcss.com/docs/preflight

[ruslanguns]

OMG thank you so much!

[najibghadri]

This is the right answer

[hunterwilhelm]

This worked for me too!

[gengjiawen]

corePlugins: { preflight: false, } fixed for me, thx.

[JeremyKennedy]

Anyone who wants preflight, check this answer: https://github.com/orgs/mantinedev/discussions/1672?sort=top#discussioncomment-6428444

[ianshk]

I spent the time last night to make a repro with the latest version of Mantine and Tailwind together. There is a button and slider example in there.

https://github.com/ianshk/MantineTW

[mengxi-ream]

Better yet, you can also now use the layers.css variant with this appropriate. Change the above to:

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

This provides even greater flexibility.

Layer css doesn't work for me. Only non-layer css does (like your code)

[TheKnightCoder]

Here is how I setup my layers

global.css

@layer base, mantine, tailwind;

@layer base {
  @tailwind base;
}

@layer tailwind {
  @tailwind components;
  @tailwind utilities;
}

layout.tsx file (or file where importing css

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

...

So the line @layer base, mantine, tailwind; defines the order of precedence, and anything outside a layer has precedence over styles within a layer. We want the tailwind base first as this resets the page (setting margins to 0 ect), then mantine which will give us our mantine component styles, and then tailwind components and utilities which allow us to apply our tailwind classes ontop of mantine components.

Also be sure to layer.css imports such as import '@mantine/core/styles.layer.css' as this wraps the mantine styles into a mantine layer. Where the order of precedence for mantine and tailwind is defined in the global.css

[TheKnightCoder]

Also don't forget the semicolon when defining the layers @layer base, mantine, tailwind; This may be why @Crayon-Shinchan snippet is not working above

[Jdruwe]

@TheKnightCoder thanks for the awesome explanation, this works well. I learned a lot about CSS layers now. I wonder why your answer has no upvotes, let me change that ;)

[Jdruwe]

@TheKnightCoder in my case, ring classes are now broken, are they still working for you? Even if I remove Mantine it's still an issue.

[TruePadawan]

@layer { @tailwind base; }
This fixed it for me

[isaacdarcilla]

This works for me!

[duyrk]

this works like a charm thank you

[jhirn]

When using this I get this warning

@import must precede all other statements (besides @charset or empty @layer)

I think it's just a warning but not sure if it will cause problems. Too soon to tell at this point.

[nuruddinshohan83]

@PauliCZ44, your forked setup works great! I've tested loads of configurations from this Github Issue, but yours nailed it. Thanks a bunch!

[parnexcodes]

It doesn't work for me, I'm using Page router in NextJS + TailwindCSS.

[BenSilver1337]

Thanks, that helped me too!

[vKongv]

Hi, i would like to style with tailwind for non-mantine components, is there a way for us to sync the variables used in mantine (eg: spacing size, colors, etc) to tailwind so both have consistent style?

[Sajarin-M]

Consider creating a custom Tailwind plugin to for this.
I've developed one and made it available on npm as tailwind-plugin-mantine. Please note that it's currently experimental, and its effectiveness may vary.
Feel free to check it or use the source code to create your own solution.
Your feedback would be appreciated for improvements.

[zmrfzn]

@Sajarin-M are there any known issues that you can highlight?

also do you have a readme or example?

[Sajarin-M]

Thanks for your interest!
So far, I haven't come across any issues with the plugin. I haven't created one yet as I primarily developed this plugin for personal use.
However, your feedback is valuable, and if there's any interest and feedback, I'll certainly create a readme and example to provide more guidance on usage.

[TheKnightCoder]

Sorry I couldn't say as I'm no longer using this in my projects, maybe someone else can help with this?

…

On Mon, 16 Sept 2024, 12:45 Jeroen, ***@***.***> wrote: @TheKnightCoder <https://github.com/TheKnightCoder> in my case, ring classes are now broken, are they still working for you? Even if I remove Mantine it's still an issue. — Reply to this email directly, view it on GitHub <#1672 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFZLCCGZDZRHOAOQAWVIELLZW3AG7AVCNFSM5ZWKS5YKU5DIOJSWCZC7NNSXTOSENFZWG5LTONUW63SDN5WW2ZLOOQ5TCMBWGU4DMMRX> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[songkeys]

I've created a package tailwind-preset-mantine to seamlessly integrate Mantine styles with Tailwind:

// `bg-red-500` will be `background-color: var(--mantine-color-red-5)`
// `text-white` will be `color: var(--mantine-color-white)`
<Button className="bg-red-500 text-white">Hello</Button>

Additionally, I've put together a guide on how to use @layer to resolve style conflicts. A quick overview:

@layer tw_base, mantine, tw_components, tw_utilities;

/* import tailwind */
@import "tailwindcss/base" layer(tw_base);
@import "tailwindcss/components" layer(tw_components);
@import "tailwindcss/utilities" layer(tw_utilities);

/* import mantine */
@import "@mantine/core/styles.layer.css";

For more details, check out https://github.com/Songkeys/tailwind-preset-mantine#prevent-style-conflicts.

I've been using this layering method in many of my projects for months, and it works wonderfully!

A minimal template: https://github.com/songkeys/next-app-mantine-tailwind-template

[Jdruwe]

@songkeys I have no clue why but I tried your library but it's not working seems like the classes are not going anything. Probably something on my end. I think it might be related to https://github.com/Songkeys/tailwind-preset-mantine#prevent-style-conflicts

Update: seems like I was missing postcss-import, I did see it in your config but it's required to make the layer(... syntax work, maybe also highlight in green?

[songkeys]

@Jdruwe

I think postcss-import is already included in tailwindcss?

Here’s a minimal template: https://github.com/songkeys/next-app-mantine-tailwind-template. I can get it to work without needing to install it. Please let me know if there’s anything I might have overlooked.

Feel free to leave any issues in that repository if you have any questions. I’d like to avoid disturbing those who are subscribed to this discussion.

[pedrocarlos-ti]

@Jdruwe

I think postcss-import is already included in tailwindcss?

Here’s a minimal template: https://github.com/songkeys/next-app-mantine-tailwind-template. I can get it to work without needing to install it. Please let me know if there’s anything I might have overlooked.

Feel free to leave any issues in that repository if you have any questions. I’d like to avoid disturbing those who are subscribed to this discussion.

Thank you @songkeys , it's working like a charm ❤️

I was trying few days ago a solution to combine the Mantine specs with Tailwind specs, and here is a great solution for that.

[songkeys]

@artemchs Hi. It'd be helpful if you could provide the whole project setup. Could you please use this minimal template to reproduce this error and raise the issue at https://github.com/songkeys/tailwind-preset-mantine/issues ? Let's make this thread clean. Thank you so much.

edit: it looks like you are using the tailwind themeConfig variable in your mantine theme? Please check the minimal template mentioned above. You should use mantine's theme created by the createTheme method.

[felixmueller-cnnctvstn]

@songkeys I don't know why, but I also had problems with the postcss layer(abc) syntax. They were compiled to "@media" rules.

yarn why postcss-import
└─ tailwindcss@npm:3.4.16
   └─ postcss-import@npm:15.1.0 [ed67e] (via npm:^15.1.0 [ed67e])

[Igor-Arefev]

I'm using Mantine 7.13.4, tailwind ^3.4.14 and next js 14.2.11.

I am facing a problem that the Slider component on Safari is running very slow in both dev and prod. But works good on Chrome. Has anyone encountered this issue?

global.css

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

@layer tailwind {
  @tailwind base;
}

@tailwind components;
@tailwind utilities;`

tailwind.config.js

import type { Config } from 'tailwindcss';

import { mantine_tw_preset } from './tailwind.mantine.preset';


const config: Config = {
  darkMode: ['class', '[data-mantine-color-scheme="dark"]'],
  presets: [mantine_tw_preset],
  content: [
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/entities/**/*.{js,ts,jsx,tsx,mdx}',
    './src/features/**/*.{js,ts,jsx,tsx,mdx}',
    './src/widgets/**/*.{js,ts,jsx,tsx,mdx}',
    './src/shared/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  plugins: [],
};
export default config;

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-preset-mantine': {},
    'postcss-simple-vars': {
      variables: {
        'mantine-breakpoint-xs': '36em',
        'mantine-breakpoint-sm': '48em',
        'mantine-breakpoint-md': '62em',
        'mantine-breakpoint-lg': '75em',
        'mantine-breakpoint-xl': '88em',
      },
    },
  },
};

[Visualizeit]

TailwindCSS V4 + Mantine V7 Example:

app.css

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

@import 'tailwindcss';

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

[realfresh]

For anyone struggling to make the above solutions work in a way which:

1. allows your overrides provided to MantineProvider to work
2. allow you to override component styles with tailwind utility classes

Try this out. I haven't tested it fully but it seems to work so far:

Your CSS file:

/**
 *
 * ~----------------------------------------~
 * ~~ Using TailwindCSS with Mantine
 * ~----------------------------------------~
 *
 * ## Requirements:
 * - Use the `@layer` directive to define the order of the layers
 * - Use Mantines `.layer.css` files which define styles in the `mantine` layer
 *
 * ## In order of priority, the layers are:
 * 1. layer(_root_): Tailwind `components` and `utilities`
 * 2. layer(mantine): Mantine's styles
 * 3. layer(tw-base): Tailwind's `base` styles
 *
 * ## Doing this allows:
 * - Tailwind base/preflight styles to be included without conflicting with mantine
 * - Tailwind utility classes to override mantine component styles without using `!important`
 *
**/

/* 1. Define the layer order */
@layer tw-base, mantine;

/* 2. Import Mantine styles defined in `mantine` layer */
@import "@mantine/core/styles.layer.css";
@import "@mantine/dates/styles.layer.css";
@import "@mantine/dropzone/styles.layer.css";
@import "@mantine/notifications/styles.layer.css";

/* 3. Import Tailwind preflight styles into lowest priority layer */
@layer tw-base {
  @tailwind base;
}

/* 4. Import Tailwind components and utilities into root layer (highest priority) */
@tailwind components;
@tailwind utilities;

Then on your MantineProvider, your cssVariableSelector should be:

const providerProps = {
  /**
   * To use Mantine with TailwindCSS, Tailwind's base styles need to be on layer
   *  below Mantine's styles (`@layer tw-base, mantine`).
   *
   * However, by doing this, the variables defined in Mantine's stylesheets
   *  `@mantine/core/styles.layer.css` get put under `:root:not(#\#)`.
   *
   * And since the values defined in the `MantineProvider` theme get put into
   *  CSS vars on `:root`, the result is they get overridden by the
   *  defaults from Mantine's stylesheet.
   *
   * To fix this, we must set `cssVariablesSelector` (default is `:root`) to have
   *  higher specificity than the `mantine` layer.
   */
  cssVariablesSelector: `:root${":not(#\\#)".repeat(3)}`,
}

[felixmueller-cnnctvstn]

For all those who still have problems with the layers (in combination with Mantine, Tailwind CSS + Next.js) and have not found a working guide.
My problem was that the layer order didn't work at all. The reason for this was, that the compiler was not quite up to speed at some point and always added the tailwind layer imports to the end of the generated file. I couldn't find out exactly where the error was or which package was responsible for it. However, I was able to work around this bug by extracting the tailwind layers into a new file.

global.css

/* 1. Define the layer order */
@layer tw-base, mantine, mantine-datatable, tw-components, tw-utilities;

/* 2. Create new layers for tailwindcss */
@import './tailwind';

/* 3. Import existing layers */
@import '@mantine/core/styles.layer.css'; /* mantine */
@import '@mantine/tiptap/styles.layer.css'; /* mantine */
@import 'mantine-datatable/styles.layer.css'; /* mantine-datatable */

tailwind.css

@layer tw-base {
  @tailwind base;
}

@layer tw-components {
  @tailwind components;
}

@layer tw-utilities {
  @tailwind utilities;
}