About

tailwindcss-mantine logo

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

  1. Install the package from npm:

    npm i -D tailwindcss-mantine
  2. 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 })],
    }

Utilities

scale

ClassProperties
scale-m

cursor

ClassProperties
cursor-m

font-family

ClassProperties
font-m
font-m-monospace
font-m-headings

font-size

ClassProperties
text-m-heading1
text-m-heading2
text-m-heading3
text-m-heading4
text-m-heading5
text-m-heading6
text-m-xs
text-m-sm
text-m-md
text-m-lg
text-m-xl

line-height

ClassProperties
leading-m-heading1
leading-m-heading2
leading-m-heading3
leading-m-heading4
leading-m-heading5
leading-m-heading6
leading-m
leading-m-xs
leading-m-sm
leading-m-md
leading-m-lg
leading-m-xl

font-weight

ClassProperties
font-heading
font-m-heading1
font-m-heading2
font-m-heading3
font-m-heading4
font-m-heading5
font-m-heading6

colors

ClassProperties
text-m-white
text-m-black
text-m-primary-filled
text-m-primary-filled-hover
text-m-primary-light
text-m-primary-light-hover
text-m-primary-light-color
text-m-primary-0
text-m-primary-1
text-m-primary-2
text-m-primary-3
text-m-primary-4
text-m-primary-5
text-m-primary-6
text-m-primary-7
text-m-primary-8
text-m-primary-9
text-m-dark-0
text-m-dark-1
text-m-dark-2
text-m-dark-3
text-m-dark-4
text-m-dark-5
text-m-dark-6
text-m-dark-7
text-m-dark-8
text-m-dark-9
text-m-gray-0
text-m-gray-1
text-m-gray-2
text-m-gray-3
text-m-gray-4
text-m-gray-5
text-m-gray-6
text-m-gray-7
text-m-gray-8
text-m-gray-9
text-m-red-0
text-m-red-1
text-m-red-2
text-m-red-3
text-m-red-4
text-m-red-5
text-m-red-6
text-m-red-7
text-m-red-8
text-m-red-9
text-m-pink-0
text-m-pink-1
text-m-pink-2
text-m-pink-3
text-m-pink-4
text-m-pink-5
text-m-pink-6
text-m-pink-7
text-m-pink-8
text-m-pink-9
text-m-grape-0
text-m-grape-1
text-m-grape-2
text-m-grape-3
text-m-grape-4
text-m-grape-5
text-m-grape-6
text-m-grape-7
text-m-grape-8
text-m-grape-9
text-m-violet-0
text-m-violet-1
text-m-violet-2
text-m-violet-3
text-m-violet-4
text-m-violet-5
text-m-violet-6
text-m-violet-7
text-m-violet-8
text-m-violet-9
text-m-indigo-0
text-m-indigo-1
text-m-indigo-2
text-m-indigo-3
text-m-indigo-4
text-m-indigo-5
text-m-indigo-6
text-m-indigo-7
text-m-indigo-8
text-m-indigo-9
text-m-blue-0
text-m-blue-1
text-m-blue-2
text-m-blue-3
text-m-blue-4
text-m-blue-5
text-m-blue-6
text-m-blue-7
text-m-blue-8
text-m-blue-9
text-m-cyan-0
text-m-cyan-1
text-m-cyan-2
text-m-cyan-3
text-m-cyan-4
text-m-cyan-5
text-m-cyan-6
text-m-cyan-7
text-m-cyan-8
text-m-cyan-9
text-m-teal-0
text-m-teal-1
text-m-teal-2
text-m-teal-3
text-m-teal-4
text-m-teal-5
text-m-teal-6
text-m-teal-7
text-m-teal-8
text-m-teal-9
text-m-green-0
text-m-green-1
text-m-green-2
text-m-green-3
text-m-green-4
text-m-green-5
text-m-green-6
text-m-green-7
text-m-green-8
text-m-green-9
text-m-lime-0
text-m-lime-1
text-m-lime-2
text-m-lime-3
text-m-lime-4
text-m-lime-5
text-m-lime-6
text-m-lime-7
text-m-lime-8
text-m-lime-9
text-m-yellow-0
text-m-yellow-1
text-m-yellow-2
text-m-yellow-3
text-m-yellow-4
text-m-yellow-5
text-m-yellow-6
text-m-yellow-7
text-m-yellow-8
text-m-yellow-9
text-m-orange-0
text-m-orange-1
text-m-orange-2
text-m-orange-3
text-m-orange-4
text-m-orange-5
text-m-orange-6
text-m-orange-7
text-m-orange-8
text-m-orange-9
text-m-primary-contrast
text-m-bright
text-m-text
text-m-body
text-m-error
text-m-placeholder
text-m-anchor
text-m-default
text-m-default-hover
text-m-default-color
text-m-default-border
text-m-dimmed
text-m-dark-text
text-m-dark-filled
text-m-dark-filled-hover
text-m-dark-light
text-m-dark-light-hover
text-m-dark-light-color
text-m-dark-outline
text-m-dark-outline-hover
text-m-gray-text
text-m-gray-filled
text-m-gray-filled-hover
text-m-gray-light
text-m-gray-light-hover
text-m-gray-light-color
text-m-gray-outline
text-m-gray-outline-hover
text-m-red-text
text-m-red-filled
text-m-red-filled-hover
text-m-red-light
text-m-red-light-hover
text-m-red-light-color
text-m-red-outline
text-m-red-outline-hover
text-m-pink-text
text-m-pink-filled
text-m-pink-filled-hover
text-m-pink-light
text-m-pink-light-hover
text-m-pink-light-color
text-m-pink-outline
text-m-pink-outline-hover
text-m-grape-text
text-m-grape-filled
text-m-grape-filled-hover
text-m-grape-light
text-m-grape-light-hover
text-m-grape-light-color
text-m-grape-outline
text-m-grape-outline-hover
text-m-violet-text
text-m-violet-filled
text-m-violet-filled-hover
text-m-violet-light
text-m-violet-light-hover
text-m-violet-light-color
text-m-violet-outline
text-m-violet-outline-hover
text-m-indigo-text
text-m-indigo-filled
text-m-indigo-filled-hover
text-m-indigo-light
text-m-indigo-light-hover
text-m-indigo-light-color
text-m-indigo-outline
text-m-indigo-outline-hover
text-m-blue-text
text-m-blue-filled
text-m-blue-filled-hover
text-m-blue-light
text-m-blue-light-hover
text-m-blue-light-color
text-m-blue-outline
text-m-blue-outline-hover
text-m-cyan-text
text-m-cyan-filled
text-m-cyan-filled-hover
text-m-cyan-light
text-m-cyan-light-hover
text-m-cyan-light-color
text-m-cyan-outline
text-m-cyan-outline-hover
text-m-teal-text
text-m-teal-filled
text-m-teal-filled-hover
text-m-teal-light
text-m-teal-light-hover
text-m-teal-light-color
text-m-teal-outline
text-m-teal-outline-hover
text-m-green-text
text-m-green-filled
text-m-green-filled-hover
text-m-green-light
text-m-green-light-hover
text-m-green-light-color
text-m-green-outline
text-m-green-outline-hover
text-m-lime-text
text-m-lime-filled
text-m-lime-filled-hover
text-m-lime-light
text-m-lime-light-hover
text-m-lime-light-color
text-m-lime-outline
text-m-lime-outline-hover
text-m-yellow-text
text-m-yellow-filled
text-m-yellow-filled-hover
text-m-yellow-light
text-m-yellow-light-hover
text-m-yellow-light-color
text-m-yellow-outline
text-m-yellow-outline-hover
text-m-orange-text
text-m-orange-filled
text-m-orange-filled-hover
text-m-orange-light
text-m-orange-light-hover
text-m-orange-light-color
text-m-orange-outline
text-m-orange-outline-hover

spacing

ClassProperties
p-m-xs
p-m-sm
p-m-md
p-m-lg
p-m-xl

screens

ClassProperties
m-xs:w-auto
m-sm:w-auto
m-md:w-auto
m-lg:w-auto
m-xl:w-auto

border-radius

ClassProperties
rounded-m
rounded-m-xs
rounded-m-sm
rounded-m-md
rounded-m-lg
rounded-m-xl

box-shadow

ClassProperties
shadow-m-xs
shadow-m-sm
shadow-m-md
shadow-m-lg
shadow-m-xl

z-index

ClassProperties
z-m-app
z-m-modal
z-m-popover
z-m-overlay
z-m-max