Vanilla extract | Mantine

Vanilla extract is a TypeScript CSS preprocessor that generates static CSS files at build time. It is a great alternative to CSS Modules if you prefer to write your styles in TypeScript.

Vanilla extract and CSS Modules do the same thing, but with different syntax. Common features of Vanilla extract and CSS Modules :

Differences between Vanilla extract and CSS Modules :

Note that you can use both Vanilla extract and CSS Modules in the same project; it will not cause any issues: performance will be the same and the bundle size will not be impacted.

Follow the installation instructions to install Vanilla extract. Then install the @mantine/vanilla-extract package; it exports the themeToVars function to convert the Mantine theme to CSS variables:

You can use one of the following templates to get started or as a reference for your own setup. Note that all templates include only minimal setup.

next-vanilla-extract-template

Next.js template with Vanilla extract example

vite-vanilla-extract-template

Vite template with Vanilla extract example

Vanilla extract provides createTheme function which converts given theme object into CSS variables and assigns them to :root or other selector. You should not use Vanilla extract createTheme to generate Mantine theme tokens – all Mantine theme properties are already exposed as CSS variables. Instead, use themeToVars function from @mantine/vanilla-extract package to create an object with CSS variables from Mantine theme:

Import vars object in *.css.ts files to access Mantine CSS variables :

To convert px to rem or em use rem and em functions from @mantine/core package:

vars object contains lightSelector and darkSelector properties which can be used to apply styles only in light or dark color scheme:

Note that usually it is more convenient to use only one of them: apply styles for light color scheme and then override them for dark color scheme with vars.darkSelector (or vice versa):

vars object contains largerThan and smallerThan properties which can be used in @media as a shorthand for min-width and max-width :

Use vars.rtlSelector to apply styles only in rtl direction: