Mantine Library ClassNames conflicts with UnoCSS and TailWind "Margin" rule

[ziongh]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.6.2

What package has an issue?

@mantine/core

What framework do you use?

create-react-app (CRA)

In which browsers you can reproduce the issue?

All

Describe the bug

When using Mantine alongside UnoCss sometimes (it is quite random, because of the nonce generator) it happens that the nonce generator outputs a string that is only numbers. And that is used to generate a classname on the format:

m-[nonce]

However, the tailwind and UnoCss use this prefix to indicate "margin" (e.g.: m-5 would represent margin-left: 1rem;)

And when the nonce is only numbers, the postcss processor of UnoCss generates the relative margin class. For example m-8983817 woudl output margin: 2245954.25rem;

And reading the docs it explicitly defines that this prefix cannot be changed: https://mantine.dev/theming/mantine-provider/#classnamesprefix

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

• Allow for custom prefix
• Allow for custom nonce on the component classes

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

Fixed in 7.1.1