Can I Use Mantine With Cra

import { Layout } from '@/layout';

export const meta = { title: 'Can I use Mantine with Create React App (CRA)?', description: 'Learn how to use Mantine without postcss-preset-mantine or how to eject CRA and customize webpack.config.js and use postcss-preset-mantine', slug: 'can-i-use-mantine-with-cra', category: 'tooling', tags: [ 'cra', 'create-react-app', 'rem', '@mixin', 'light-dark', 'styles', ], created_at: 'November 30, 2023', last_updated_at: 'November 30, 2023', };

export default Layout(meta);

Deprecation notice

Create React App was deprecated in early 2023 (comment from maintainers). It is not recommended to use it for new projects. We recommend using Vite or Next.js instead. Starting from version 7.0, some Mantine styling features are not officially supported in Create React App.

If you want to build a single page application, use Vite instead:

• Getting started with Vite
• A fully featured Vite + Mantine template
• Minimal Vite + Mantine template

Usage without postcss-preset-mantine

To compile styles as shown in the documentation, postcss-preset-mantine is required. Create React App does not support custom PostCSS configuration by default.

The easiest way to use Mantine with Create React App is to write styles in plain CSS without postcss-preset-mantine.

rem/em function and CSS nesting:

// ❌ Does not work with Create React App
.demo {
  font-size: rem(16px);

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

// ✅ Works with Create React App
.demo {
  font-size: calc(1rem * var(--mantine-scale));
}

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

Mixins:

// ❌ Does not work with Create React App
.demo {
  @mixin light {
    color: red;
  }

  @mixin dark {
    color: blue;
  }
}

// ✅ Works with Create React App
[data-mantine-color-scheme='light'] .demo {
  color: red;
}

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

light-dark function:

// ❌ Does not work with Create React App
.demo {
  color: light-dark(red, blue);
}

// ✅ Works with Create React App
[data-mantine-color-scheme='light'] .demo {
  color: red;
}

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

Ejecting Create React App

If you still want to use postcss-preset-mantine with Create React App, you can eject your application and add custom PostCSS configuration.

1. Eject your application – npm run eject
2. Install dependencies – yarn add postcss postcss-preset-mantine @mantine/core @mantine/hooks
3. Create postcss.config.js file in the root of your project with the following content:

module.exports = {
  plugins: {
    'postcss-preset-mantine': {},
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {},
    'postcss-normalize': {},
  },
};

4. Replace postcss-loader configuration in config/webpack.config.js with the following:

{
  loader: require.resolve("postcss-loader"),
  options: {
    postcssOptions: {
      ident: "postcss",
    },
    sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
  },
}

5. After that, follow the Vite getting started guide except for the first step (you already have a postcss.config.js file)

Ejected CRA example

You can find an example repository with ejected CRA application and full setup here.