How can i use tailwind css and mantine together ?? #1672

elamandeep · 2022-06-24T03:03:34Z

elamandeep
Jun 24, 2022

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??

Answered by rtivital

Jun 24, 2022

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.

View full answer

rtivital · 2022-06-24T07:49:09Z

rtivital
Jun 24, 2022
Maintainer

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.

9 replies

rtivital Sep 10, 2022
Maintainer

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

ilhamgepe Sep 10, 2022

@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 Dec 16, 2023

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 Feb 25, 2024

Worked for me tailwind and mantine button transparent issue is fixed

SweydManaf Mar 3, 2024

Finally ❤️

elamandeep · 2022-06-30T03:55:04Z

elamandeep
Jun 30, 2022
Author

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 😞 .

14 replies

elamandeep Jul 1, 2022
Author

Thanks for you precious time @kwiat1990

elamandeep Jul 1, 2022
Author

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 Jul 1, 2022

@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 Jan 13, 2023

Will follow this procedure as well thanks @kwiat1990

omerson-cruz May 18, 2023

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

elamandeep · 2022-07-04T03:10:12Z

elamandeep
Jul 4, 2022
Author

Here's example by @kwiat1990

How to Configure tailwind with mantine ?

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

1 reply

melvinalmonte Nov 6, 2022

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 · 2022-10-24T14:43:44Z

0xox
Oct 24, 2022

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.

1 reply

Darathor17 Jan 11, 2023

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 · 2023-01-25T13:44:18Z

AliDayi97
Jan 25, 2023

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.

5 replies

rtivital Jan 25, 2023
Maintainer

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

AliDayi97 Jan 25, 2023

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

rtivital Jan 25, 2023
Maintainer

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

AliDayi97 Jan 25, 2023

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

rtivital Jan 25, 2023
Maintainer

Cannot tell anything without reproduction

MiljkovicMarko · 2023-03-07T21:56:50Z

MiljkovicMarko
Mar 7, 2023

@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() {
 // ...

1 reply

cosmtrek Apr 12, 2023

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

ianshk · 2023-05-17T01:03:35Z

ianshk
May 17, 2023

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

5 replies

ruslanguns May 18, 2023

OMG thank you so much!

najibghadri Jul 6, 2023

This is the right answer

hunterwilhelm Jul 18, 2023

This worked for me too!

gengjiawen Aug 11, 2023

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

JeremyKennedy Nov 28, 2023

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

ianshk · 2023-05-19T06:38:16Z

ianshk
May 19, 2023

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

13 replies

mengxi-ream Nov 17, 2023

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 Feb 12, 2024

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 Feb 12, 2024

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 Sep 13, 2024

@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 Sep 16, 2024

@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 · 2023-07-12T15:00:18Z

TruePadawan
Jul 12, 2023

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

13 replies

isaacdarcilla Dec 5, 2023

This works for me!

duyrk Jan 8, 2024

this works like a charm thank you

jhirn Feb 1, 2024

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 Apr 15, 2024

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

parnexcodes Apr 18, 2024

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

BenSilver1337 · 2023-07-18T11:31:25Z

BenSilver1337
Jul 18, 2023

Thanks, that helped me too!

0 replies

vKongv · 2024-02-17T17:16:11Z

vKongv
Feb 17, 2024

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?

3 replies

Sajarin-M Feb 26, 2024

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 Feb 26, 2024

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

also do you have a readme or example?

Sajarin-M Feb 26, 2024

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 · 2024-09-16T14:11:59Z

TheKnightCoder
Sep 16, 2024

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: ***@***.***>

0 replies

songkeys · 2024-09-27T15:34:06Z

songkeys
Sep 27, 2024

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

7 replies

Jdruwe Sep 27, 2024

@Jdruwe

I also assume you have been using your library in some way?

I use this preset in many internal products within my team. I just extracted it into this library today.

And thank you for pointing the darkMode selector issue. I've just fixed it. :)

Damn you are fast, awesome work ;)

Jdruwe Sep 28, 2024

@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 Sep 29, 2024

@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 Oct 27, 2024

@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 Nov 2, 2024

@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.

Igor-Arefev · 2024-11-10T18:36:39Z

Igor-Arefev
Nov 10, 2024

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

0 replies

Visualizeit · 2024-11-25T13:35:13Z

Visualizeit
Nov 25, 2024

TailwindCSS V4 + Mantine V7 Example:

app.css

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

@import 'tailwindcss';

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

0 replies

How can i use tailwind css and mantine together ?? #1672

Replies: 15 comments · 72 replies

rtivital Jun 24, 2022 Maintainer

rtivital Sep 10, 2022 Maintainer

elamandeep Jun 30, 2022 Author

elamandeep Jul 1, 2022 Author

elamandeep Jul 1, 2022 Author

elamandeep Jul 4, 2022 Author

rtivital Jan 25, 2023 Maintainer

rtivital Jan 25, 2023 Maintainer

rtivital Jan 25, 2023 Maintainer

Replies: 15 comments 72 replies

rtivital
Jun 24, 2022
Maintainer

rtivital Sep 10, 2022
Maintainer

elamandeep
Jun 30, 2022
Author

elamandeep Jul 1, 2022
Author

elamandeep Jul 1, 2022
Author

elamandeep
Jul 4, 2022
Author

rtivital Jan 25, 2023
Maintainer

rtivital Jan 25, 2023
Maintainer

rtivital Jan 25, 2023
Maintainer