tailwindcss-mantine

tailwindcss-mantine is a plugin that integrates Mantine's theme variables into Tailwind CSS, enabling you to use Mantine's design system with Tailwind's utility-first classes.

Installation

Install the package from npm:

npm i -D tailwindcss-mantine

Add the plugin and theme override to tailwind.config.js:

import mantinePlugin from 'tailwindcss-mantine'
import mantineTheme from 'your mantine theme override'

/** @type {import('tailwindcss').Config} */
export default {
	//...
	plugins: [mantinePlugin({ themeOverride: mantineTheme })],
}

Usage

Add Mantine's utility classes to your HTML:

check all the utility classes here

<h1 className="m-m-md text-m-heading1 text-m-primary-filled">Hello World</h1>