Generated custom theme doesn't work on pages without MantineProvider.

[jhirn]

Hello. Thanks for this great plugin. I'm looking for a suggestion or work around to a problem I'm having with the custom theme generator.

My application mostly SPA in React but I have some pages like my login form and some emails templates that do not load the application. Because the app is not loaded, Mantine never injects the <style> tags with theme colors and the --mantine-color-XXX variables do not exist.

/** This file is autogenerated by the script. Do not edit it manually. */
@theme {
  /* colors - all */
  
  --color-senex-50: var(--mantine-color-senex-0); 
  --color-senex-100: var(--mantine-color-senex-1);
...etc

Prior to Tailwind v4 i was using Tailwind's resolveConfig to inject colors into Mantine and my chart components but they took that away from us.

As a work around I created a mini app with just <MantineProvider theme={myTheme]/> to my login forms. It would be kind of nice if the generated styles could use the theme values instead of referring to the Mantine variables, but I could see how that may affect things like light/dark mode.

If there's a simpler way I'd love to know. Thanks in advance.

[songkeys]

Hi. You can "partially" "load" the mantine "app" by only importing the styles, not the <MantineProvider> if you don't need any components from mantine but only need the styles (css variables) from it and use with tailwind.

Let me know if @import "tailwind-preset-mantine"; in those pages works for you.

[jhirn]

I don't think that will work for me because the colors are custom and defined in a theme.js which generates theme.css with --mantine-color-senex-0, etc... which are not in the base Mantine styles. I have to use the MantineProvider to inject them, which honestly is fine, but it would be nice to have the generator use color literals.

I'm honestly in a bad place with Mantine/Tailwind because adding @import tailwind-preset-mantine sets spacing and a few other things that make my styles go nuts. I'm only using the generator for now and will have to go through the app to make decisions on how to resolve that. It's frankly driving me insane but it wouldn't be CSS if it wasn't 😉

[songkeys]

I completely understand your perspective now!

I took another look at MantineProvider - it’s the component that injects all the styles using MantineCssVariables. Therefore, we need to use it for Mantine and Tailwind to function together. Perhaps we could utilize a generator to create the equivalent styles, allowing users to bypass the MantineProvider, but that would require some effort. The only reason to pursue this in your case is that you prefer not to import the MantineProvider and only want to use its CSS styles. We'll explore if more use cases are there to see if we really need this. For now, importing it is the only way to ensure everything works smoothly.

adding @import tailwind-preset-mantine sets spacing and a few other things that make my styles go nuts

This seems to be a separate issue. I’ve merged a PR (#22) today to address the spacing problem and released it in v2.0.4. Could you please check if it resolves the spacing issue? Regarding "a few other things" - if you could specify what else is affecting Tailwind's default styles, that would be really helpful.

Thank you!

[jhirn]

Ha.. I'll be completely honest here, I'm not confident I was ever setup correctly to begin with. My app looks the way I want, but there are a few workarounds I'm not proud of. My setup for tailwind v3 was like this which was based on this discussion thread. I'm providing for context, not asking you to debug my mess.

Tailwind 3

application.css

/* mantine/tailwind setup */
@import "tailwindcss/base";

@import "tailwindcss/components";
@import '@mantine/core/styles.css';
@import "tailwindcss/utilities";

/* Some global styles to deal with what are probably configuration errors */
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
}

img {  height: 100%}

h1 {  @apply text-xl font-bold uppercase lg:text-3xl xl:text-4xl;}

h2 {  @apply uppercase p-0 text-center;}

h3 {  @apply text-sm uppercase p-0 text-center;}

App.jsx

import tailwindConfig from '@tailwindConfig'
const twConfig = resolveConfig(tailwindConfig) // replaced with useMantineTheme() in 4.0

const theme = createTheme(
    {
      colors: {
        senex: Object.values(twConfig.theme.colors.senex) // replaced with theme.colors.red in 4.0
      },
      primaryColor: 'senex',
      fontFamily: "'source-sans-pro', sans-serif",
      headings: {
        fontFamily: "'source-sans-pro', sans-serif",
        fontWeight: 300
      }
    }
  )
 // these styles are removed after tw4 update. 
  const styles = {  /* 
    '@global': {
      'h1, h2, h3, h4, h5, h6': {
        margin: 0,
        padding: 0,
        fontSize: 'inherit',
        fontWeight: 'inherit'
      }
    }
  }
  <MantineProvider theme={theme} style={styles}/>

postcss.config.js Probably wholesale useless as these are defaults but including just in case.

module.exports = {
  plugins: {
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    'postcss-preset-mantine': {},
    'postcss-simple-vars': {
      variables: {
        'mantine-breakpoint-xs': '36em',
        'mantine-breakpoint-sm': '48em',
        'mantine-breakpoint-md': '62em',
        'mantine-breakpoint-lg': '75em',
        'mantine-breakpoint-xl': '88em'
      }
    },
    autoprefixer: {}
  }
}

Tailwind 4

Application.css. Note tailwind-mantine-preset is commented out. I've tried it before and after my custom theme.css

@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 "../css/theme.css";
/* @import "tailwind-preset-mantine/theme.css"; */

@source "../../views";

/* Same display:block and h1 overrides as above */

Generated theme (shortened, but it's colors only).

@theme {
  /* colors - all */
  --color-senex-50: var(--mantine-color-senex-0);
  --color-senex: var(--mantine-color-senex-filled);

  --color-national-50: var(--mantine-color-national-0);
  --color-national: var(--mantine-color-national-filled);

  --color-regional-50: var(--mantine-color-regional-0);
  --color-regional: var(--mantine-color-regional-filled);

  /* colors - variant specific */
  --color-senex-filled: var(--mantine-color-senex-filled);
  --color-senex-outline-hover: var(--mantine-color-senex-outline-hover);

  --color-national-filled: var(--mantine-color-national-filled);
  --color-national-outline-hover: var(--mantine-color-national-outline-hover);

  --color-regional-filled: var(--mantine-color-regional-filled);
  --color-regional-outline-hover: var(--mantine-color-regional-outline-hover);

  /* breakpoints */
  /* Empty as the seemed to be Mantine defaults */
}

Relevant Javascript

//theme.js
import { colorsTuple, createTheme } from '@mantine/core'

export const globalStyles = {
}

export default createTheme(
  {
    colors: {
      senex: [
        '#f7f8f7',
        '#eaecea',
        '#daddda',
        '#bac0b9',
        '#949d93',
        '#778176',
        '#5f6a5f',
        '#4e564e',
        '#434943',
        '#3a403a',
        '#272a27'
      ],
      national: colorsTuple('#597463'),
      regional: colorsTuple('#c0d4c7')
    },
    primaryColor: 'senex',
    fontFamily: "'source-sans-pro', sans-serif",
    headings: {
      fontFamily: "'source-sans-pro', sans-serif",
      fontWeight: 300
    }
  }

<MantineProvider theme={theme} styles={globalStyles}/>

That said....

Looking at tailwind-preset-mantine/theme.css and running some variable diffs in console:

// With preset
getComputedStyle(document.documentElement).getPropertyValue("--spacing") => 'calc(1rem * 1)' 
getComputedStyle(document.documentElement).getPropertyValue("--shadow") => ''
getComputedStyle(document.documentElement).getPropertyValue("--radius") => '' // Shouldn't this be --mantine-radius-default ?
getComputedStyle(document.documentElement).getPropertyValue("--mantine-radius-default") => 'calc(0.25rem * 1)'
getComputedStyle(document.documentElement).getPropertyValue("--text-base") => ''
getComputedStyle(document.documentElement).getPropertyValue("--color-default") => ''
getComputedStyle(document.documentElement).getPropertyValue("--font-sans") => "'source-sans-pro', sans-serif"
getComputedStyle(document.documentElement).getPropertyValue("--font-headings")
// These are set directly in preset theme. Why are they unset?
getComputedStyle(document.documentElement).getPropertyValue("--breakpoint-xs") => '' 
getComputedStyle(document.documentElement).getPropertyValue("--breakpoint-lg") => ''

// Without preset
getComputedStyle(document.documentElement).getPropertyValue("--spacing") => '0.25rem' // different but understandble
getComputedStyle(document.documentElement).getPropertyValue("--shadow") => ''
getComputedStyle(document.documentElement).getPropertyValue("--radius") => ''
getComputedStyle(document.documentElement).getPropertyValue("--mantine-radius-default") => 'calc(0.25rem * 1)'
getComputedStyle(document.documentElement).getPropertyValue("--mantine-spacing-default") => 
getComputedStyle(document.documentElement).getPropertyValue("--mantine-spacing-md") => 'calc(1rem * 1)'
// No idea why these aren't picked up by tailwind default theme
getComputedStyle(document.documentElement).getPropertyValue("--breakpoint-sm") => '' 
getComputedStyle(document.documentElement).getPropertyValue("--breakpoint-lg") => ''

I'm not asking you to troubleshoot my app. You've been helpful enough to provide this preset at all. I was kinda hoping typing this out would rubber duck me out of the situation, but it only raised a few more questions. Feels like the hardest problem I've ever had to solve. I also have this burden of preferring to actually understand wth is going on but I can get over it.

Hopefully something in here is helpful to you.

[songkeys]

Thank you for providing these info. As i said in the previous comment -

I’ve merged a PR (#22) today to address the spacing problem and released it in v2.0.4

Could you try install the latest version of this preset and re-generate the theme to see if the problem is still there?

[jhirn]

I can't believe you replied in like 30 seconds to all that.

Uncommented preset and it works! I even went down to just:

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

I still have the original issue with the custom theme not getting colors without injecting a <MantineProvider /> but I'm comfortable closing the issue. It's here for posterity if someone has the same edge case.

[songkeys]

Glad it works!

I still have the original issue with the custom theme not getting colors without injecting a <MantineProvider />

Yes. I need some time to find a good way to solve for this use case. Let's leave this issue open. :)

[jhirn]

Literally the best maintainer of all time🥇