tailwind-preset-mantine 1.3.2 → 2.0.0-beta.2

package/README.md

@@ -2,7 +2,16 @@
 
 [![npm version](https://img.shields.io/npm/v/tailwind-preset-mantine.svg)](https://www.npmjs.com/package/tailwind-preset-mantine)
 
-A Tailwind CSS preset for seamless integration with Mantine UI components.
+A Tailwind CSS (v4) preset for seamless integration with Mantine UI (v7) components.
+
+## Compatibility
+
+| Tailwind CSS Version | Mantine Version | Preset Version |
+|---------------------|-----------------|----------------|
+| v4                  | v7             | v2 (current)             |
+| v3                  | v7             | ([v1](https://github.com/songkeys/tailwind-preset-mantine/tree/v1))* |
+
+*Note: you can still use v1 for Tailwind CSS via [`@config`](https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file) directive.
 
 ## Installation
 
@@ -14,144 +23,95 @@ npm install tailwind-preset-mantine
 
 ### Default mantine theme
 
-To use the preset in your Tailwind CSS configuration, add it to the `presets` array:
-
-```ts
-// tailwind.config.ts
-import tailwindPresetMantine from 'tailwind-preset-mantine';
+1. All-in-one import (recommended)
 
-export default {
-	presets: [
-		tailwindPresetMantine(),
-	],
-};
-```
-
-Now you can use tailwind with mantine's style applied:
+To use the preset in your Tailwind CSS configuration, add it to the css file:
 
-```tsx
-import { Button } from '@mantine/core';
-
-export default function Page() {
-	// `bg-red-500` will be `background-color: var(--mantine-color-red-5)`
-	// `text-white` will be `color: var(--mantine-color-white)`
-	return <Button className="bg-red-500 text-white">Hello</Button>
-}
+```css
+@import "tailwind-preset-mantine";
 ```
 
-### Custom mantine theme
-
-If you have a custom mantine theme (https://mantine.dev/theming/theme-object/), you should pass it as an option to make custom colors and custom breakpoints available to tailwind.
+2. Manual import (advanced)
 
-Let's define your custom mantine `colors` and `breakpoints` first:
+Note that you don't have to import tailwind or mantine styles, this preset will handle that for you. If you want to import it yourself, you can use the `./theme.css` file:
 
-```tsx
-// src/theme.ts
-import {
-  type MantineThemeColors,
-  type MantineBreakpointsValues,
-} from "@mantine/core";
+```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);
 
-export const colors: MantineThemeColors = {
-	// ...your custom colors
-}
-export const breakpoints: MantineBreakpointsValues = {
-	// ...your custom breakpoints
-}
-```
+@import "@mantine/core/styles.layer.css";
 
-Pass your custom `colors` and `breakpoints` to `MantineProvider`:
-
-```tsx
-// src/mantine-provider.tsx
-import {
-	MantineProvider,
-	mergeMantineTheme,
-	DEFAULT_THEME,
-} from '@mantine/core';
-import { colors, breakpoints } from './theme';
-
-const theme = mergeMantineTheme(
-  DEFAULT_THEME,
-  createTheme({
-    breakpoints,
-    colors,
-  }),
-);
-
-export default function MantineProvider({ children }: { children: React.ReactNode }) {
-	return <MantineProvider theme={{ colors, breakpoints }}>{children}</MantineProvider>
-}
+@import "tailwind-preset-mantine/theme.css"; /* <-- import the preset */
 ```
 
-Then pass them to `tailwind-preset-mantine`:
+> What's `@layer`?
+>
+> Note that here we setup tailwind slightly different from [the official docs](https://arc.net/l/quote/eifghbsm). We use the [CSS `@layer` directive](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to control the order of the css. This is because we want to make sure that the mantine styles doesn't get overridden by tailwind reset (tw_base). In this case, the order is `tw_base -> mantine -> tw_components -> tw_utilities`
 
-```ts
-// tailwind.config.ts
-import tailwindPresetMantine from 'tailwind-preset-mantine'
-import { colors, breakpoints } from './src/theme';
+### Custom mantine theme
 
-export default {
-	presets: [tailwindPresetMantine({
-		mantineColors: colors,
-		mantineBreakpoints: breakpoints
-	})],
-};
+If you have a custom mantine theme (<https://mantine.dev/theming/theme-object/>), you can create a theme file using `@mantine/core`'s `createTheme` function and generate the CSS using our CLI:
+
+1. Create a theme file (e.g., `theme.js`):
+
+```js
+import { createTheme } from "@mantine/core";
+
+const theme = createTheme({
+  colors: {
+    // your custom colors
+    "brand-blue": [
+      "#e6f7ff",
+      "#bae7ff",
+      "#91d5ff",
+      "#69c0ff",
+      "#40a9ff",
+      "#1890ff",
+      "#096dd9",
+      "#0050b3",
+      "#003a8c",
+      "#002766",
+    ],
+  },
+  breakpoints: {
+    // your custom breakpoints
+    xs: "360px",
+    sm: "480px",
+    md: "768px",
+    lg: "960px",
+    xl: "1200px",
+  },
+  // other theme customizations
+});
+
+export default theme;
 ```
 
-> Why separate the `colors` and `breakpoints` definition in a single file?
->
-> Because if passing the whole `mantineTheme` object, the property [`mantineTheme.components`](https://mantine.dev/theming/theme-object/#components) might include (s)css modules, which could fail to resolve due to the absence of an (s)css loader when loading the Tailwind config file.
->
-> If you have a better solution, please let me know in the [issue](https://github.com/songkeys/tailwind-preset-mantine/issues).
-
-## Prevent style conflicts
+2. Generate the CSS using our CLI:
 
-You will encounter style conflicts when using mantine and tailwind together. (See this [tough discussion](https://github.com/orgs/mantinedev/discussions/1672).) To prevent this, you can follow the steps below:
+```bash
+npx tailwind-preset-mantine theme.js -o theme.css
+```
 
-### 1. global.css
+Options:
+- `-o, --output`: Output file name (default: "theme.css")
+- `-w, --watch`: Watch for changes (coming soon)
 
-Change your global.css to use CSS layers to prevent style conflicts:
+3. Import the generated CSS file in your application:
 
 ```css
-@layer tw_base, mantine, tw_components, tw_utilities;
-
-/* import tailwind */
-@import "tailwindcss/base" layer(tw_base);
-@import "tailwindcss/components" layer(tw_components);
-@import "tailwindcss/utilities" layer(tw_utilities);
-
-/* import mantine */
-@import "@mantine/core/styles.layer.css";
-```
-
-> What's `@layer`?
->
-> Note that here we setup tailwind slightly different from [the official docs](https://arc.net/l/quote/eifghbsm). We use the [CSS `@layer` directive](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to control the order of the css. This is because we want to make sure that the mantine styles doesn't get overridden by tailwind reset (tw_base). In this case, the order is `tw_base -> mantine -> tw_components -> tw_utilities`
-
-### 2. postcss.config.js
-
-To make it work, you also need to change the postcss config like this:
-
-```diff
-// postcss.config.js
-module.exports = {
-	plugins: {
-		'postcss-import': {},
-		'postcss-preset-mantine': {},
-		// for tailwind
-+		autoprefixer: {},
-+		'tailwindcss/nesting': {},
-+		tailwindcss: {},
-	},
-}
+@import "./theme.css";
 ```
 
 ## Minimal template
 
-Here's a minimal template that you can use to get started:
+<!-- Here's a minimal template that you can use to get started:
+
+<https://github.com/songkeys/next-app-mantine-tailwind-template> -->
 
-<https://github.com/songkeys/next-app-mantine-tailwind-template>
+TODO
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-preset-mantine",
-  "version": "1.3.2",
+  "version": "2.0.0-beta.2",
   "description": "Integrate Mantine with Tailwind CSS",
   "keywords": [
     "mantine",
@@ -17,21 +17,31 @@
   },
   "license": "MIT",
   "author": "Songkeys",
-  "main": "src/index.js",
-  "types": "src/index.d.ts",
+  "main": "src/index.css",
+  "exports": {
+    ".": "./src/index.css",
+    "./theme.css": "./src/theme.css"
+  },
+  "bin": {
+    "tailwind-preset-mantine": "./src/cli.js"
+  },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@mantine/core": "^7.14.3",
-    "bumpp": "^9.8.1",
-    "tailwindcss": "^3.4.16"
+    "@mantine/core": "^7.16.2",
+    "bumpp": "^10.0.1"
   },
   "peerDependencies": {
     "@mantine/core": "^7",
-    "tailwindcss": "^3"
+    "tailwindcss": "^4"
+  },
+  "type": "module",
+  "dependencies": {
+    "tsx": "^4.19.2"
   },
   "scripts": {
     "lint": "biome check .",
     "lint:fix": "biome check . --write",
-    "release": "bumpp"
+    "release": "bumpp",
+    "generate": "node scripts/generate.js"
   }
 }

package/scripts/generate.js

@@ -0,0 +1,16 @@
+// this file is to generate the theme.css and index.css file for the preset
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { generateDefaultImports, generateTheme } from "../src/generate.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const defaultImports = generateDefaultImports();
+const theme = generateTheme();
+
+fs.writeFileSync(path.join(__dirname, "../src/theme.css"), theme);
+fs.writeFileSync(
+	path.join(__dirname, "../src/index.css"),
+	defaultImports + theme,
+);

package/src/cli.js

@@ -0,0 +1,61 @@
+#!/usr/bin/env -S npx tsx
+
+import { writeFile } from "node:fs/promises";
+import { resolve } from "node:path";
+import { parseArgs } from "node:util";
+import { generateTheme } from "./generate.js";
+
+const pwd = process.cwd();
+
+// Define CLI options
+const options = {
+	output: {
+		type: "string",
+		short: "o",
+		default: "theme.css",
+		description: "Output file name",
+	},
+	watch: {
+		type: "boolean",
+		short: "w",
+		default: false,
+		description: "Watch for changes",
+	},
+};
+
+// Parse command line arguments
+const { values, positionals } = parseArgs({ options, allowPositionals: true });
+
+if (positionals.length === 0) {
+	console.error("Please provide a theme file path");
+	process.exit(1);
+}
+
+const inputFile = positionals[0];
+const outputFile = values.output;
+
+if (values.watch) {
+	console.log(`Watching ${inputFile} for changes...`);
+	// TODO: Implement file watching
+}
+
+try {
+	// Read the input theme file
+	const themePath = resolve(pwd, inputFile);
+
+	// Execute the theme file content to get the theme object
+	const themeModule = await import(themePath);
+	const theme = themeModule.default;
+
+	// Generate CSS from theme object
+	const css = generateTheme(theme);
+
+	// Write to output file
+	const outputPath = resolve(pwd, outputFile);
+	await writeFile(outputPath, css);
+
+	console.log(`Successfully generated ${outputFile}`);
+} catch (error) {
+	console.error("Error generating theme:", error.message);
+	process.exit(1);
+}

package/src/generate.js

@@ -0,0 +1,189 @@
+// for reference:
+// https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/global.css
+// https://tailwindcss.com/docs/theme#default-theme-variable-reference
+
+import { DEFAULT_THEME } from "@mantine/core";
+
+export function generateDefaultImports() {
+	return `
+/** This file is autogenerated by the script. Do not edit it manually. */
+@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";
+`;
+}
+
+/**
+ * @param {import("@mantine/core").MantineTheme} theme
+ */
+export function generateTheme(theme = DEFAULT_THEME) {
+	// check if the object is deeply equal to DEFAULT_THEME
+	const isDefault = JSON.stringify(theme) === JSON.stringify(DEFAULT_THEME);
+
+	return `
+/** This file is autogenerated by the script. Do not edit it manually. */
+${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"], [data-mantine-color-scheme="dark"] *));' : ""}
+
+@theme {
+  ${
+		isDefault
+			? `
+  /* font */
+  --font-sans: var(--mantine-font-family);
+  --font-mono: var(--mantine-font-family-monospace);
+  --font-headings: var(--mantine-font-family-headings);
+
+  /* colors - primary */
+  --color-primary-50: rgb(from var(--mantine-primary-color-0) r g b / <alpha-value>);
+  --color-primary-100: rgb(from var(--mantine-primary-color-1) r g b / <alpha-value>);
+  --color-primary-200: rgb(from var(--mantine-primary-color-2) r g b / <alpha-value>);
+  --color-primary-300: rgb(from var(--mantine-primary-color-3) r g b / <alpha-value>);
+  --color-primary-400: rgb(from var(--mantine-primary-color-4) r g b / <alpha-value>);
+  --color-primary-500: rgb(from var(--mantine-primary-color-5) r g b / <alpha-value>);
+  --color-primary-600: rgb(from var(--mantine-primary-color-6) r g b / <alpha-value>);
+  --color-primary-700: rgb(from var(--mantine-primary-color-7) r g b / <alpha-value>);
+  --color-primary-800: rgb(from var(--mantine-primary-color-8) r g b / <alpha-value>);
+  --color-primary-900: rgb(from var(--mantine-primary-color-9) r g b / <alpha-value>);
+  --color-primary: rgb(from var(--mantine-primary-color-filled) r g b / <alpha-value>);
+
+  /* colors - variant specific primary */
+  --color-primary-filled: rgb(from var(--mantine-primary-color-filled) r g b / <alpha-value>);
+  --color-primary-filled-hover: var(--mantine-primary-color-filled-hover);
+  --color-primary-light: var(--mantine-primary-color-light);
+  --color-primary-light-hover: var(--mantine-primary-color-light-hover);
+  --color-primary-light-color: rgb(from var(--mantine-primary-color-light-color) r g b / <alpha-value>);
+  --color-primary-outline: rgb(from var(--mantine-primary-color-outline) r g b / <alpha-value>);
+  --color-primary-outline-hover: var(--mantine-primary-color-outline-hover);
+
+  /* colors - others */
+  --color-white: rgb(from var(--mantine-color-white) r g b / <alpha-value>);
+  --color-black: rgb(from var(--mantine-color-black) r g b / <alpha-value>);
+  --color-body: rgb(from var(--mantine-color-text) r g b / <alpha-value>);
+  --color-error: rgb(from var(--mantine-color-error) r g b / <alpha-value>);
+  --color-placeholder: rgb(from var(--mantine-color-placeholder) r g b / <alpha-value>);
+  --color-anchor: rgb(from var(--mantine-color-anchor) r g b / <alpha-value>);
+  --color-default: rgb(from var(--mantine-color-default-color) r g b / <alpha-value>);
+
+  /* spacing */
+  --spacing-xs: var(--mantine-spacing-xs);
+  --spacing-sm: var(--mantine-spacing-sm);
+  --spacing-md: var(--mantine-spacing-md);
+  --spacing-lg: var(--mantine-spacing-lg);
+  --spacing-xl: var(--mantine-spacing-xl);
+  --spacing: var(--mantine-spacing-md);
+
+  /* container */
+  /* TODO: */
+
+  /* font size */
+  --text-xs: var(--mantine-font-size-xs);
+  --text-sm: var(--mantine-font-size-sm);
+  --text-md: var(--mantine-font-size-md);
+  --text-lg: var(--mantine-font-size-lg);
+  --text-xl: var(--mantine-font-size-xl);
+  --text-h1: var(--mantine-h1-font-size);
+  --text-h2: var(--mantine-h2-font-size);
+  --text-h3: var(--mantine-h3-font-size);
+  --text-h4: var(--mantine-h4-font-size);
+  --text-h5: var(--mantine-h5-font-size);
+  --text-h6: var(--mantine-h6-font-size);
+  --text-base: var(--mantine-font-size-md);
+
+  /* line height */
+  --text-xs--line-height: var(--mantine-line-height-xs);
+  --text-sm--line-height: var(--mantine-line-height-sm);
+  --text-md--line-height: var(--mantine-line-height-md);
+  --text-lg--line-height: var(--mantine-line-height-lg);
+  --text-xl--line-height: var(--mantine-line-height-xl);
+  --text-h1--line-height: var(--mantine-h1-line-height);
+  --text-h2--line-height: var(--mantine-h2-line-height);
+  --text-h3--line-height: var(--mantine-h3-line-height);
+  --text-h4--line-height: var(--mantine-h4-line-height);
+  --text-h5--line-height: var(--mantine-h5-line-height);
+  --text-h6--line-height: var(--mantine-h6-line-height);
+  --text-base--line-height: var(--mantine-line-height-md);
+  --text-heading--line-height: var(--mantine-heading-line-height);
+  --text-base--line-height: var(--mantine-line-height);
+
+  /* font weight */
+  --font-weight-h1: var(--mantine-h1-font-weight);
+  --font-weight-h2: var(--mantine-h2-font-weight);
+  --font-weight-h3: var(--mantine-h3-font-weight);
+  --font-weight-h4: var(--mantine-h4-font-weight);
+  --font-weight-h5: var(--mantine-h5-font-weight);
+  --font-weight-h6: var(--mantine-h6-font-weight);
+
+  /* border radius */
+  --radius-xs: var(--mantine-radius-xs);
+  --radius-sm: var(--mantine-radius-sm);
+  --radius-md: var(--mantine-radius-md);
+  --radius-lg: var(--mantine-radius-lg);
+  --radius-xl: var(--mantine-radius-xl);
+  --radius: var(--mantine-radius-default);
+
+  /* shadow */
+  --shadow-xs: var(--mantine-shadow-xs);
+  --shadow-sm: var(--mantine-shadow-sm);
+  --shadow-md: var(--mantine-shadow-md);
+  --shadow-lg: var(--mantine-shadow-lg);
+  --shadow-xl: var(--mantine-shadow-xl);
+  --shadow: var(--mantine-shadow-xs);
+
+  /* z-index */
+  --z-index-app: var(--mantine-z-index-app);
+  --z-index-modal: var(--mantine-z-index-modal);
+  --z-index-popover: var(--mantine-z-index-popover);
+  --z-index-overlay: var(--mantine-z-index-overlay);
+  --z-index-max: var(--mantine-z-index-max);
+  `.trimEnd()
+			: ""
+	}
+
+  /* colors - all */
+  ${Object.keys(theme.colors)
+		.map((key) =>
+			`
+  --color-${key}-50: rgb(from var(--mantine-color-${key}-0) r g b / <alpha-value>);
+  --color-${key}-100: rgb(from var(--mantine-color-${key}-1) r g b / <alpha-value>);
+  --color-${key}-200: rgb(from var(--mantine-color-${key}-2) r g b / <alpha-value>);
+  --color-${key}-300: rgb(from var(--mantine-color-${key}-3) r g b / <alpha-value>);
+  --color-${key}-400: rgb(from var(--mantine-color-${key}-4) r g b / <alpha-value>);
+  --color-${key}-500: rgb(from var(--mantine-color-${key}-5) r g b / <alpha-value>);
+  --color-${key}-600: rgb(from var(--mantine-color-${key}-6) r g b / <alpha-value>);
+  --color-${key}-700: rgb(from var(--mantine-color-${key}-7) r g b / <alpha-value>);
+  --color-${key}-800: rgb(from var(--mantine-color-${key}-8) r g b / <alpha-value>);
+  --color-${key}-900: rgb(from var(--mantine-color-${key}-9) r g b / <alpha-value>);
+  --color-${key}: rgb(from var(--mantine-color-${key}-filled) r g b / <alpha-value>);
+  `.trimEnd(),
+		)
+		.join("\n")}
+
+  /* colors - variant specific */
+  ${Object.keys(theme.colors)
+		.map((key) =>
+			`
+  --color-${key}-filled: rgb(from var(--mantine-color-${key}-filled) r g b / <alpha-value>);
+  --color-${key}-filled-hover: var(--mantine-color-${key}-filled-hover);
+  --color-${key}-light: var(--mantine-color-${key}-light);
+  --color-${key}-light-hover: var(--mantine-color-${key}-light-hover);
+  --color-${key}-light-color: rgb(from var(--mantine-color-${key}-light-color) r g b / <alpha-value>);
+  --color-${key}-outline: rgb(from var(--mantine-color-${key}-outline) r g b / <alpha-value>);
+  --color-${key}-outline-hover: var(--mantine-color-${key}-outline-hover);
+  `.trimEnd(),
+		)
+		.join("\n")}
+
+  /* breakpoints */
+  ${Object.entries(theme.breakpoints)
+		.map(([key, value]) =>
+			`
+  --breakpoint-${key}: ${value};
+  `.trimEnd(),
+		)
+		.join("\n")}
+}
+`;
+}