songkeys / tailwind-preset-mantine

A Tailwind CSS preset for seamless integration with Mantine UI components.
MIT License
14 stars 2 forks source link

Clarification needed on custom theme usage with MantineProvider #6

Closed artemchs closed 2 hours ago

artemchs commented 3 hours ago

Reproduction

I've created a minimal repository that demonstrates this issue: next-app-mantine-tailwind-template-issue

Steps to reproduce:

  1. Clone the repository
  2. Install dependencies (pnpm install)
  3. Check the TypeScript error in src/app/layout.tsx on line 50

Description

There seems to be a disconnect between the documentation for custom theme usage and how it should be implemented with MantineProvider. The current documentation shows how to configure the Tailwind preset with a custom Mantine theme, but it's not clear how this should work with MantineProvider.

Current Behavior

Following the documentation, I created a theme configuration like this:

// theme.ts
import tailwindPresetMantine from "tailwind-preset-mantine";
import { createTheme } from "@mantine/core";

const mantineTheme = createTheme({
  // custom theme options
});

const themeConfig = {
  presets: [
    tailwindPresetMantine({
      mantineColors: mantineTheme.colors,
      mantineBreakpoints: mantineTheme.breakpoints,
    }),
  ],
};

export default themeConfig;

However, when trying to use this configuration with MantineProvider:

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

I get the following TypeScript error:

Type '{ presets: Config[]; }' has no properties in common with type 'PartialObjectDeep<MantineTheme, {}>'.ts(2559)

Expected Behavior

I expect to be able to use my custom theme with MantineProvider without any type issues.

Environment

songkeys commented 2 hours ago

Hi there! It looks like there might be a little misunderstanding in how to use it.

I've made some updates to the template to include the custom theme code in this commit.

Please take a look, and let me know if you have any questions!

artemchs commented 2 hours ago

Thank you for clarifications. Yes, not it works as expected with no type issues.

songkeys commented 2 hours ago

I've also updated the docs to make it more clear for custom themes:

https://github.com/songkeys/tailwind-preset-mantine#custom-mantine-theme