mantine: Conflict with other CSS package

What package has an issue

Describe the bug

I’m using TailwindCSS which injects things like this in a CSS sheet

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

This results in conflicts with mantine button styles that get overwritten. The issue is that mantine generate inlines styles that get overrides by the stylesheet of tailwind. I could disable tailwind rules, but i Rather having the one from mantine be specifically applied on mantine specific button.

In order to achieve that I would like to know if there is a way to inject the css of mantine after the one from tailwind using a directive or something like that ? Didn’t found anything related to this in the documentation.

Thanks

In which browser did the problem occur

Ever

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

Having capability to inject mantine css after tailwind one

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 3
Comments: 15 (4 by maintainers)

Most upvoted comments

The current workaround is to add prepend false in mantine provider.

emotionOptions={{ key: "mantine", prepend: false }}

so mantine will be loaded after tailwind, this will load mantine button styles correctly, but i haven’t dig deep to see other things goes wrong or not.

e.g. _app.tsx

export default function App(props: AppProps) {
  const { Component, pageProps } = props;

  return (
    <>
      <Head>
        <title>Page title</title>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width"
        />
      </Head>

      <MantineProvider
        withGlobalStyles
        withNormalizeCSS
        emotionOptions={{ key: "mantine", prepend: false }}
        theme={{
          colorScheme: "dark",
        }}
      >
        <Component {...pageProps} />
      </MantineProvider>
    </>
  );
}

+24

dexcell on Mar 12, 2022

emotionOptions are not supported in v5, you need to provide your own emotion cache – https://v5.mantine.dev/theming/emotion-cache/

+19

rtivital on Jul 2, 2022

Sorry to re-open a closed issue, but I thought that this might help others that wants to use this library but do not want to sacrifice TailwindCSS:

There is this section in TailwindCSS docs that helps you to solve this conflict in a smooth way: https://tailwindcss.com/docs/configuration#important

And I think that the best solution is this: https://tailwindcss.com/docs/configuration#selector-strategy but make sure to use "#__next" if you are using NextJS.

+12

twosaturdayscode on Feb 16, 2022

Yes, you can inject styles at the end of head element, see documentation on how to configure emotion – https://mantine.dev/theming/mantine-provider/#configure-emotion Note that in this case, you will not be able to override Mantine styles without !important.

rtivital on Feb 9, 2022

Hi @theMasix It’s always annoying to use workarounds, but if you are not planning on using theming libraries you should not face any problem.

twosaturdayscode on May 1, 2022

@aliseidev My workaround is adding a root id to the body tag inside _document file. then use the #root value inside tailwind config.

// tailwind.config.js
module.exports = {
  ...
  important: '#root',
};

What problems can I face in the future? And what’s the issue this this workaround?

theMasix on Apr 28, 2022

Thanks for your answers guys 😃

ScreamZ on Mar 17, 2022

Guys maybe the problem is that if you create a layout using a custom _document.jsx you should know that the components will be outside the <Main /> (the one of NextJS that include all the components of your main index.jsx page) in the image you can see that I’ve created a Header and a Footer and they will not be under the div with id __next. At the moment I don’t know what a solution could be.

@hyusetiawan make sure you remove the trailing whitespace in important: "#__next(here)". @dexcell make sure you added double underscore # _ _ next

immagine

twosaturdayscode on Mar 11, 2022