tailwind-preset-mantine

If you need to manually manage CSS layers (e.g., to ensure Mantine styles aren't overridden by Tailwind's base reset), use the following structure. The preset's theme.css should be imported after the Mantine core styles.

@layer theme, base, mantine, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

@import "@mantine/core/styles.layer.css";
@import "tailwind-preset-mantine/theme.css";

Install the preset via npm to integrate Tailwind CSS (v4) with Mantine UI (v7, v8, or v9).

npm install tailwind-preset-mantine

For the simplest setup, import the preset directly in your CSS file. This includes all necessary Tailwind and Mantine styles (including @mantine/core/styles.layer.css) automatically.

@import "tailwind-preset-mantine";

Once imported, Tailwind utility classes will map to Mantine CSS variables. For example, bg-red-500 will resolve to background-color: var(--mantine-color-red-5).

If a page does not use <MantineProvider /> but still requires Mantine CSS variables (e.g., for custom components or landing pages), use the standalone format. This generates both Mantine CSS variables (like --mantine-color-*) and Tailwind aliases (like --color-*).

Configuration (PostCSS or Vite):

mantineTheme({
  input: "./src/mantine-theme.ts",
  format: "standalone",
});

Note: standalone defaults to the light color scheme. To use dark mode on these pages, add data-mantine-color-scheme="dark" to the document root or host element.

The preset provides a custom dark variant that targets elements when the Mantine color scheme is set to dark. It works by checking for the [data-mantine-color-scheme="dark"] attribute on the element or its ancestors.

Use it in your Tailwind classes like dark:bg-black or dark:text-white to apply styles specifically for dark mode.

To use the styles provided by tailwind-preset-mantine via CSS @import statements, import the main entrypoint. This file manages the CSS layer order to ensure Tailwind utilities and Mantine styles interact correctly without specificity conflicts.

Note: This file is autogenerated and should not be edited manually.

@import "tailwind-preset-mantine/src/index.css";

If you use extra Mantine packages (like @mantine/dates or @mantine/carousel), import their styles after the preset to ensure they are part of the correct CSS layers.

@import "tailwind-preset-mantine";

@import "@mantine/dates/styles.layer.css";
@import "@mantine/dropzone/styles.layer.css";
@import "@mantine/carousel/styles.layer.css";
@import "@mantine/notifications/styles.layer.css";
@import "mantine-react-table/styles.css";

When configuring the mantineTheme plugin (PostCSS, Vite, or Next.js), use the following options:

If you are not using PostCSS or Vite, you can use the CLI to generate the theme stylesheet.

npx tailwind-preset-mantine mantine-theme.ts

Options:

• -o, --output <file>: Output file name/location (defaults to input filename with .css extension).
• --format <theme|standalone>:
  • theme (default): Generates Tailwind aliases only.
  • standalone: Generates Mantine variables plus Tailwind aliases (use this for pages without MantineProvider).

Usage: After generating, import the file in your CSS:

@import "./mantine-theme.css";

npx tailwind-preset-mantine mantine-theme.ts --format standalone

The mantineTheme plugin automates the generation of Mantine theme files during the Vite development cycle. It watches for changes in your theme configuration and dependencies, automatically regenerating the theme output to ensure your Tailwind styles stay in sync with your Mantine theme.

When used in Vite, the plugin:

1. Generates theme output on build start.
2. Watches all files that the theme depends on.
3. Automatically triggers a regeneration and updates the Vite watcher when a dependency changes.

import mantineTheme from 'tailwind-preset-mantine/vite';

export default {
  plugins: [
    mantineTheme({
      input: 'path/to/your/theme.ts',
      output: 'path/to/output/theme.css',
      format: 'theme'
    }),
  ],
};

The mantineTheme function is a Vite plugin used to integrate Mantine theme generation into your Vite build pipeline. It accepts a MantineThemePluginOptions object to define how the theme is processed and output.

import mantineTheme from 'tailwind-preset-mantine/vite';

export default {
  plugins: [
    mantineTheme({
      input: 'path/to/your/theme.ts',
      output: 'path/to/output/theme.css',
      format: 'theme' // or 'standalone'
    }),
  ],
};