Mantine PostCSS preset

postcss-preset-mantine provides several CSS functions and mixins to help you write styles. It is not required to use it, but highly recommended. All demos that feature styles assume that you have this preset installed.

postcss-preset-mantine includes the following PostCSS plugins:

postcss-nested
postcss-mixins with Mantine specific mixins
Custom plugin with em/rem functions

Installation

Install postcss-preset-mantine as a dev dependency:

yarn add --dev postcss-preset-mantine

Usage

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.js file (usually it is located in the root of your project):

module.exports = {
  plugins: {
    'postcss-preset-mantine': {},
  },
};

All done! You can now use all the features of the preset.

rem/em functions

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 units conversions in this guide.

.demo {
  font-size: rem(16px);

  @media (min-width: em(320px)) {
    font-size: rem(32px);
  }
}

Will be transformed to:

.demo {
  font-size: calc(1rem * var(--mantine-scale));

  @media (min-width: 20em) {
    font-size: calc(2rem * var(--mantine-scale));
  }
}

dark and light mixins

dark and light mixins can be used to create styles that will be applied only in dark or light color scheme.

.demo {
  @mixin light {
    color: red;
  }

  @mixin dark {
    color: blue;
  }
}

Will be transformed to:

[data-mantine-color-scheme='light'] .demo {
  color: red;
}

[data-mantine-color-scheme='dark'] .demo {
  color: blue;
}

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.

.demo {
  // Value for light color scheme
  color: red;

  @mixin dark {
    // Value for dark color scheme
    color: blue;
  }
}

light-dark function

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.

.demo {
  color: light-dark(red, blue);
}

Will be transformed to:

.demo {
  color: red;
}

[data-mantine-color-scheme='dark'] .demo {
  color: blue;
}

hover mixin

hover mixin can be used to create styles that will be applied on hover.

.demo {
  @mixin hover {
    color: orange;
  }
}

Will be transformed to:

@media (hover: hover) {
  .demo:hover {
    color: orange;
  }
}

@media (hover: none) {
  .demo:active {
    color: orange;
  }
}

rtl mixin

rtl mixin can be used to create styles that will be applied when dir="rtl" is set on parent element (usually <html />).

.demo {
  margin-left: 1rem;

  @mixin rtl {
    margin-left: 0;
    margin-right: 1rem;
  }
}

Will be transformed to:

.demo {
  margin-left: 1rem;
}

[dir='rtl'] .demo {
  margin-left: 0;
  margin-right: 1rem;
}

CSS modules

Vanilla extract

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community Follow Mantine on Twitter