Mantine ❤️ Tailwind CSS : Inject Tailwind CSS styles into Mantine's theme object

[ivorpad]

I friggin love Mantine so much. I found a way to inject Tailwind CSS theme values into Mantine with:

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from '../../../tailwind.config';

// Grabs the full Tailwind CSS object
const fullConfig = resolveConfig(tailwindConfig)

Finally pass them to the color prop with a tailwind property name to avoid conflicts:

<MantineProvider
  theme={{
    colors: {
      tailwind: {
        ...fullConfig.theme.accentColor,
      },
    },
  }}
>
  <Component {...pageProps} />
</MantineProvider>

Creater your interface:

interface MantineThemeWithTailwindColor extends MantineTheme {
  colors: MantineThemeColors & { tailwind: TailwindCSSColors }
}

Get the colors from the theme object in the component

<Button
  onClick={onClick}
  leftIcon={<PencilAltIcon width={18} />}
  styles={(theme: MantineThemeWithTailwindColor) => {
    return {
      root: {
        backgroundColor: theme.colors.tailwind.indigo["600"],
        border: 0,
        height: 42,
        paddingLeft: 20,
        paddingRight: 20,

        "&:hover": {
          backgroundColor: `${theme.fn.darken(theme.colors.tailwind.indigo["600"], 0.05)}`,
        },
      },
    };
  }}
>
  {children}
</Button>

[Xapu1337]

Damn, that's really neat!
Thanks ❤️

[kwiat1990]

@ivorpad have you tried to incorporate the rest of Tailwind's config into Mantine? I think about all thing like colors, spacing, shadows and so on. I think it's possible but I'm not quite sure if it's worth the effort. After all one can still use Tailwinds classes instead of Mantine's theme object. The minus is, from my understanding, that we still will load all Mantine config although none of it is being used.

@rtivital will it look the same in the Mantine 5.0 with unstyled components?

[7iomka]

I have another workflow to integrate tailwind settings.
I splitted common settings in separate files, for example colors:

colors.js

const tailwindColors = require('tailwindcss/colors');

// Remove deprecated colors in default tailwind palette to fix warning
delete tailwindColors['lightBlue'];
delete tailwindColors['warmGray'];
delete tailwindColors['trueGray'];
delete tailwindColors['coolGray'];
delete tailwindColors['blueGray'];

/**
* Extend default Tailwind color palette with missing Mantine colors
* NOTE: Mantine supports only 10 colors in each color-shade
*/
const colors = {
...tailwindColors,
// Mantine colors, that's missing in tw palette
dark: {
  50: '#c1c2c5',
  100: '#a6a7ab',
  200: '#909296',
  300: '#5c5f66',
  400: '#373a40',
  500: '#2c2e33',
  600: '#25262b',
  700: '#1a1b1e',
  800: '#141517',
  900: '#101113',
},
grape: {
  50: '#f8f0fc',
  100: '#f3d9fa',
  200: '#eebefa',
  300: '#e599f7',
  400: '#da77f2',
  500: '#cc5de8',
  600: '#be4bdb',
  700: '#ae3ec9',
  800: '#9c36b5',
  900: '#862e9c',
},
// Override some Tailwind colors
amber: {
  // https://tailwind.simeongriggs.dev/amber/FFDA7C
  50: '#fffbf0',
  100: '#fff8e5',
  200: '#fff1cc',
  300: '#ffe9b3',
  400: '#ffe194',
  500: '#ffda7c', // primary
  600: '#ffc42e',
  700: '#e6a400',
  800: '#996e00',
  900: '#4d3700',
},
green: {
  // https://tailwind.simeongriggs.dev/green/58DD4D
  50: '#f3fdf2',
  100: '#e7fae5',
  200: '#cbf4c7',
  300: '#abeea5',
  400: '#83e67a',
  500: '#58dd4d',
  600: '#34c926',
  700: '#2eb422',
  800: '#27961d',
  900: '#1c6b14',
},
rose: {
  // https://tailwind.simeongriggs.dev/red/FE7375 (lightness, min: 15)
  50: '#fff0f0',
  100: '#ffe1e1',
  200: '#ffc7c8',
  300: '#fea9aa',
  400: '#fe9091',
  500: '#fe7375',
  600: '#fe393d',
  700: '#f80206',
  800: '#c00105',
  900: '#840103',
},
};

module.exports = { colors };

and import them in tailwind config

const { colors } = require('./colors');
module.exports = {
  theme: {
    colors
  },
 // ...
}

and in app entry (where you setup MantineProvider)

import { colors } from '@/config/colors';
import type { MantineColor, MantineTheme, MantineThemeOverride, Tuple } from '@mantine/core';
import { MantineProvider } from '@mantine/core';

type CustomColors = keyof typeof colors;

declare module '@mantine/core' {
  export interface MantineThemeColorsOverride {
    colors: Record<CustomColors, Tuple<string, 10>>;
  }
}

const mantineColors = Object.fromEntries(
  Object.entries(colors)
    .filter(([k, v]) => typeof v !== 'string')
    .map(([k, v]) => [k, Object.values(v)]),
);

const themeConfig: MantineThemeOverride = {
  colorScheme: 'light',
  colors: mantineColors,
  primaryColor: 'amber',
  primaryShade: 5,
}

// ...

<MantineProvider theme={themeConfig}> // .... </MantineProvider>

[kwiat1990]

I came up today with a very similar idea but I only overwrite matching colors names and omitted non-tuple one. It gave me a few type errors though because I used for of loop for mapping, which I fixed but it doesn’t feel clean.

Did you also integrate spacing or any other config property?

[7iomka]

I came up today with a very similar idea but I only overwrite matching colors names and omitted non-tuple one. It gave me a few type errors though because I used for of loop for mapping, which I fixed but it doesn’t feel clean.

Did you also integrate spacing or any other config property?

For spacing I don't know how be a good practice to integrate.
In my case I had scss module as source of truth, and I parsed it fs.readFileSync, so, this config file can't be used in react component.
As a workaround now I need somehow to change source of truth to js file settings, and after, go something like this in MantineProvider theme

import { DEFAULT_THEME, MantineProvider } from '@mantine/core';

// ...
spacing: {
    ...DEFAULT_THEME.spacing,
    ...spacing,
  },

Problem in my case is that I use scacers system with fixed base (offset) and values (like tailwind like) was in rem

// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.
$spacerBaseInRem: 0.125; // 2px 

// Spacers generator
@function getSpacers($spacerBaseInRem: $spacerBaseInRem, $count: 200) {
  $spacers_arr: (
    0: 0px,
    // tailwind require unit
  );
  // Generate stepped map (from 1 to $count)
  @for $i from 1 through $count {
    $spacers_arr: map-merge(
      $spacers_arr,
      (
        $i: $spacerBaseInRem * $i * 1rem,
      )
    );
  }

  @return $spacers_arr;
}

$spacers: getSpacers($spacerBaseInRem, 200);

In tailwind I used mt-5, as eq to margin-top: 10px (2x multiply is simple to calculate)
But, Mantine support string keys ('xs', 'md', ...) AND Number keys (1 = 1px) and no supported 'rem'.
So, in this case I don't see any solution to identical integration step.

Other settings can be merged in similar way, if their don't have the same issue with dimmensions

[pdevito3]

👋 fellow Tailwind fans.

How did you manage things given that the preflight setup wipes out the mantine styles? I'm able to apply tailwind styles to the controls with something like the below, but they're against an unstyled mantine control which doens't let you touch everything. Works fine for the button in @ivorpad's case, but nothing more complex than that.

Obviously i could take out preflight, but wondering if there is an alternative.

import resolveConfig from "tailwindcss/resolveConfig";
import tailwindConfig from "../../tailwind.config.js";

const fullConfig = resolveConfig(tailwindConfig);

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <title>New Wrapt App in Next</title>

      <SessionProvider session={pageProps.session} refetchInterval={0}>
        <QueryClientProvider client={new QueryClient()}>
          <RouteGuard isPublic={Component.isPublic}>
            <MantineProvider
              withGlobalStyles
              withNormalizeCSS
              theme={{
                other: {
                  tailwind: {
                    ...fullConfig,
                  },
                },
              }}
            >
              <Component {...pageProps} />
              <ReactQueryDevtools initialIsOpen={false} />
              <Notifications />
            </MantineProvider>
          </RouteGuard>
        </QueryClientProvider>
      </SessionProvider>
    </>
  );
}

        <Controller
          name="visibility"
          control={control}
          render={({ field, fieldState }) => (
            <Autocomplete
              data={["public", "private"]}
              {...field}
              styles={(theme: any) => ({
                root: {
                  width: theme.other.tailwind.theme?.width["80"],
                  backgroundColor:
                    theme.other.tailwind.theme.colors.indigo["600"],
                  border: 0,
                  // height: 42,
                  borderRadius: theme.other.tailwind.theme?.borderRadius["md"],
                  // marginLeft: theme.other.tailwind.theme?.margin["5"],
                  // marginRight: theme.other.tailwind.theme?.margin["5"],

                  "&:hover": {
                    backgroundColor: `${theme.fn.darken(
                      theme.other.tailwind.theme.colors.indigo["600"],
                      0.05
                    )}`,
                  },
                },
                input: {
                  backgroundColor:
                    theme.other.tailwind.theme.colors.indigo["600"],
                  height: 42,
                  borderRadius: theme.other.tailwind.theme?.borderRadius["md"],

                  "&:hover": {
                    backgroundColor: `${theme.fn.darken(
                      theme.other.tailwind.theme.colors.indigo["600"],
                      0.05
                    )}`,
                  },
                },
              })}
            />
          )}
        />

[pdevito3]

📢‼️ Y'all there is a MUCH easier way that leverages the built in mantine options:

import { createStyles, MantineProvider, TextInput } from "@mantine/core";

const useStyles = createStyles({
  input: {  }
  }
});

export default function App() {
  const { classes, cx } = useStyles();
  return (
    <MantineProvider withGlobalStyles withNormalizeCSS>
      <p className="text-blue-500">test</p>
      <TextInput
        classNames={{ input: cx(classes.input, "bg-blue-500") }}
      />
    </MantineProvider>
  );
}

[pdevito3]

Note that you might still need something like the OP, but not nearly as involved. For example, I made a hook to get TW colors:

import resolveConfig from "tailwindcss/resolveConfig";
import tailwindConfig from "../../tailwind.config.js";

const fullConfig = resolveConfig(tailwindConfig);

export function useTailwindColors() {
  return fullConfig.theme?.colors;
}

export function useTailwindConfig() {
  return fullConfig;
}

and I can use that in a component like so for something like data-hovered:

import { FormControlState } from "@/components/types";
import { useTailwindColors } from "@/hooks/useTailwindConfig";
import {
  ChevronDownIcon,
  ExclamationCircleIcon,
} from "@heroicons/react/24/solid";
import { createStyles, Select, SelectProps } from "@mantine/core";
import clsx from "clsx";

const twColors = useTailwindColors();

interface ComboBoxProps extends SelectProps {
  testSelector?: string;
}

function ComboBox({
  // testSelector = getTestSelector(labelProps.),
  ...rest
}: ComboBoxProps) {
  const useStyles = createStyles({
    item: {
      "&[data-hovered]": {
        backgroundColor: twColors?.green["500"],
      },
    },
  });
  const { classes, cx } = useStyles();

  let inputState = "valid" as typeof FormControlState[number];
  if (rest.error) inputState = "invalid";
  if (rest.disabled) inputState = "disabled";

  const showClearable =
    rest.clearable && rest.value !== null && rest.value !== undefined;
  console.log(showClearable);

  return (
    <Select
      {...rest}
      size="md"
      transition="pop"
      transitionDuration={80}
      transitionTimingFunction="ease"
      classNames={{
        input: cx(
          clsx(
            "block w-full p-2 text-sm rounded-md outline-none font-sans",
            inputState === "valid" &&
              "text-gray-900 bg-gray-50 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 border-gray-300 focus:border-violet-500 focus:ring-violet-500 dark:focus:border-violet-500 dark:focus:ring-violet-500 dark:border-gray-600 border",
            inputState === "invalid" &&
              "text-gray-900 bg-gray-50 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 border-red-400 border focus:border-red-400 focus:ring-red-400 dark:focus:border-red-400 dark:focus:ring-red-400 focus:ring-1"
          )
        ),
        disabled: cx(
          "cursor-not-allowed border bg-slate-200/60 text-slate-300 dark:bg-slate-700 dark:text-slate-50"
        ),
        error: cx("text-sm text-red-400 -mt-1"),
        dropdown: cx(
          "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-r-lg border-l-gray-100 dark:border-l-gray-700 border-l-2 focus:ring-violet-500 focus:border-violet-500 block w-full py-1 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-violet-500 dark:focus:border-violet-500"
        ),
        itemsWrapper: cx("p-0 text-sm text-gray-700 dark:text-gray-200 w-full"),
        item: cx(
          clsx(
            classes.item,
            "py-2 w-full text-sm text-gray-700 dark:text-gray-400"
          )
        ),
        rightSection: cx(clsx(!showClearable && "pointer-events-none")),
        label: cx("text-slate-900 dark:text-white pb-1 font-sans"),
        required: cx("text-red-400"),
      }}
      rightSection={
        !showClearable && (
          <div className="flex items-center justify-center space-x-2">
            {inputState === "invalid" && (
              <ExclamationCircleIcon className="w-6 h-6 text-red-400" />
            )}
            <ChevronDownIcon
              className={clsx(
                "w-4 h-4",
                inputState === "invalid" && "text-red-400"
              )}
            />
          </div>
        )
      }
      rightSectionWidth={inputState === "invalid" ? 70 : 40}
    />
  );
}

export default ComboBox;

[ruslanguns]

Thanks for sharing it, wondering if is there any wrap up repository with a running sample?

[pdevito3]

There's a working one here. https://github.com/pdevito3/next-template-wrapt

[ruslanguns]

OMG that was fast!