tailwind-preset-mantine 2.0.1 → 2.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/package.json +1 -1
- package/src/cli.js +5 -1
- package/src/generate.js +0 -1
- package/src/index.css +0 -1
- package/src/theme.css +0 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/tailwind-preset-mantine)
|
|
4
4
|
|
|
5
|
-
A Tailwind CSS (v4) preset for seamless integration with Mantine UI (v7)
|
|
5
|
+
A [Tailwind CSS (v4)](https://tailwindcss.com/) preset for seamless integration with [Mantine UI (v7)](https://mantine.dev/).
|
|
6
6
|
|
|
7
7
|
## Compatibility
|
|
8
8
|
|
|
@@ -62,7 +62,7 @@ Note that you don't have to import tailwind or mantine styles, this preset will
|
|
|
62
62
|
|
|
63
63
|
> What's `@layer`?
|
|
64
64
|
>
|
|
65
|
-
> Note that here we setup tailwind slightly different from [the official docs](https://arc.net/l/quote/
|
|
65
|
+
> Note that here we setup tailwind slightly different from [the official docs](https://arc.net/l/quote/vtfxbocq). 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 (base). In this case, the order is `theme -> base -> mantine -> components -> utilities`.
|
|
66
66
|
|
|
67
67
|
### Custom mantine theme
|
|
68
68
|
|
|
@@ -123,7 +123,7 @@ Options:
|
|
|
123
123
|
|
|
124
124
|
Here's a minimal template that you can use to get started:
|
|
125
125
|
|
|
126
|
-
<https://github.com/songkeys/next-app-mantine-tailwind-template
|
|
126
|
+
<https://github.com/songkeys/next-app-mantine-tailwind-template>
|
|
127
127
|
|
|
128
128
|
## License
|
|
129
129
|
|
package/package.json
CHANGED
package/src/cli.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import "tsx";
|
|
3
3
|
import { writeFile } from "node:fs/promises";
|
|
4
4
|
import { resolve } from "node:path";
|
|
5
|
+
import { pathToFileURL } from "node:url";
|
|
5
6
|
import { parseArgs } from "node:util";
|
|
6
7
|
import { generateTheme } from "./generate.js";
|
|
7
8
|
|
|
@@ -32,8 +33,11 @@ try {
|
|
|
32
33
|
// Read the input theme file
|
|
33
34
|
const themePath = resolve(pwd, inputFile);
|
|
34
35
|
|
|
36
|
+
// Convert file path to URL for ESM import compatibility
|
|
37
|
+
const themeURL = pathToFileURL(themePath);
|
|
38
|
+
|
|
35
39
|
// Execute the theme file content to get the theme object
|
|
36
|
-
const themeModule = await import(
|
|
40
|
+
const themeModule = await import(themeURL);
|
|
37
41
|
const theme =
|
|
38
42
|
themeModule.default?.default ??
|
|
39
43
|
themeModule.default ??
|
package/src/generate.js
CHANGED
|
@@ -73,7 +73,6 @@ ${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"],
|
|
|
73
73
|
--spacing-md: var(--mantine-spacing-md);
|
|
74
74
|
--spacing-lg: var(--mantine-spacing-lg);
|
|
75
75
|
--spacing-xl: var(--mantine-spacing-xl);
|
|
76
|
-
--spacing: var(--mantine-spacing-md);
|
|
77
76
|
|
|
78
77
|
/* container */
|
|
79
78
|
/* TODO: */
|
package/src/index.css
CHANGED