postcss-preset-mantine provides several CSS functions and mixins to help you write styles. It is not required to use it, but is highly recommended. All demos that feature styles assume that you have this preset installed.
postcss-preset-mantine includes the following PostCSS plugins:
Install postcss-preset-mantine as a dev dependency:
Note that setting up PostCSS may be different depending on your build tool/framework. Check a dedicated framework guide to learn more. Add postcss-preset-mantine to your postcss.config.cjs file (usually it is located in the root of your project):
All done! You can now use all the features of the preset.
rem and em functions can be used to convert pixels to rem/em units. 16px = 1rem and 16px = 1em . em values are supposed to be used in media queries, rem everywhere else. You can learn more about unit conversions in this guide .
Will be transformed to:
autoRem option can be used to automatically convert all pixel values to rem units in .css files:
This option works similar to rem function. The following code:
Note that autoRem converts only CSS properties, values in @media queries are not converted automatically – you still need to use em function to convert them.
autoRem option does not convert values in the following cases:
If you want to convert above values to rem units, use rem function manually.
dark and light mixins can be used to create styles that will be applied only in dark or light color scheme.
Note that usually you do not need to use both light and dark mixins at the same time. It is easier to define styles for light color scheme and then use dark mixin to override them in dark color scheme.
To define values for light/dark color scheme on the :root / html element, use light-root and dark-root mixins instead:
smaller-than and larger-than mixins can be used to create styles that will be applied only when the screen is smaller or larger than specified breakpoint.
You can also use smaller-than and larger-than mixins with mantine breakpoints :
light-dark function is an alternative to light and dark mixins. It accepts two arguments: first argument is rule that will be applied in light color scheme, second argument is rule that will be applied in dark color scheme.
Note that light-dark function does not work on :root / html element. Use light-root and dark-root mixins instead:
alpha function can be used to add alpha channel to color. Note that it uses color-mix which is not supported in some older browsers.
lighten and darken functions work similar to alpha function, but instead of adding alpha channel they add white or black color to the color with color-mix .
hover mixin can be used to create styles that will be applied on hover.
rtl mixin can be used to create styles that will be applied when dir="rtl" is set on parent element (usually <html /> ).
ltr mixin works the same way, but for dir="ltr" :
not-rtl / not-ltr mixins can be used to create styles that will be applied when the direction is set to the opposite value or not set at all. For example, not-rtl styles will be applied when dir="ltr" or when dir is not set at all.
where-* mixins are alternative to light , dark , rlt and hover mixins. They work exactly the same, but produced CSS is less specific. These mixins are useful when you want to easily override styles, for example, when you are building a library or extension.
Example of using where-light mixin:
You can define custom mixins that are not included in the preset by specifying them in the mixins option. To learn about mixins syntax, follow postcss-mixins documentation .
Example of adding clearfix and circle mixins:
Then you can use these mixins in your styles:
You can disable specific features of the preset by setting them to false :