tailwind-preset-mantine 1.2.0 → 1.3.0
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 +70 -26
- package/package.json +5 -5
- package/src/index.d.ts +8 -2
- package/src/index.js +70 -54
package/README.md
CHANGED
|
@@ -12,6 +12,8 @@ npm install tailwind-preset-mantine
|
|
|
12
12
|
|
|
13
13
|
## Usage
|
|
14
14
|
|
|
15
|
+
### Default mantine theme
|
|
16
|
+
|
|
15
17
|
To use the preset in your Tailwind CSS configuration, add it to the `presets` array:
|
|
16
18
|
|
|
17
19
|
```ts
|
|
@@ -20,26 +22,11 @@ import tailwindPresetMantine from 'tailwind-preset-mantine';
|
|
|
20
22
|
|
|
21
23
|
export default {
|
|
22
24
|
presets: [
|
|
23
|
-
tailwindPresetMantine,
|
|
25
|
+
tailwindPresetMantine(),
|
|
24
26
|
],
|
|
25
27
|
};
|
|
26
28
|
```
|
|
27
29
|
|
|
28
|
-
If you have a custom mantine theme (https://mantine.dev/theming/theme-object/), you should pass it as an option to make custom colors available to tailwind.
|
|
29
|
-
|
|
30
|
-
```ts
|
|
31
|
-
import tailwindPresetMantine from 'tailwind-preset-mantine'
|
|
32
|
-
import { createTheme } from '@mantine/core';
|
|
33
|
-
|
|
34
|
-
const mantineTheme = createTheme({
|
|
35
|
-
// ...your custom theme
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
export default {
|
|
39
|
-
presets: [tailwindPresetMantine({ mantineColors: mantineTheme.colors })],
|
|
40
|
-
};
|
|
41
|
-
```
|
|
42
|
-
|
|
43
30
|
Now you can use tailwind with mantine's style applied:
|
|
44
31
|
|
|
45
32
|
```tsx
|
|
@@ -52,6 +39,72 @@ export default function Page() {
|
|
|
52
39
|
}
|
|
53
40
|
```
|
|
54
41
|
|
|
42
|
+
### Custom mantine theme
|
|
43
|
+
|
|
44
|
+
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.
|
|
45
|
+
|
|
46
|
+
Let's define your custom mantine `colors` and `breakpoints` first:
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
// src/theme.ts
|
|
50
|
+
import {
|
|
51
|
+
type MantineThemeColors,
|
|
52
|
+
type MantineBreakpointsValues,
|
|
53
|
+
} from "@mantine/core";
|
|
54
|
+
|
|
55
|
+
export const colors: MantineThemeColors = {
|
|
56
|
+
// ...your custom colors
|
|
57
|
+
}
|
|
58
|
+
export const breakpoints: MantineBreakpointsValues = {
|
|
59
|
+
// ...your custom breakpoints
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Pass your custom `colors` and `breakpoints` to `MantineProvider`:
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
// src/mantine-provider.tsx
|
|
67
|
+
import {
|
|
68
|
+
MantineProvider,
|
|
69
|
+
mergeMantineTheme,
|
|
70
|
+
DEFAULT_THEME,
|
|
71
|
+
} from '@mantine/core';
|
|
72
|
+
import { colors, breakpoints } from './theme';
|
|
73
|
+
|
|
74
|
+
const theme = mergeMantineTheme(
|
|
75
|
+
DEFAULT_THEME,
|
|
76
|
+
createTheme({
|
|
77
|
+
breakpoints,
|
|
78
|
+
colors,
|
|
79
|
+
}),
|
|
80
|
+
);
|
|
81
|
+
|
|
82
|
+
export default function MantineProvider({ children }: { children: React.ReactNode }) {
|
|
83
|
+
return <MantineProvider theme={{ colors, breakpoints }}>{children}</MantineProvider>
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
Then pass them to `tailwind-preset-mantine`:
|
|
88
|
+
|
|
89
|
+
```ts
|
|
90
|
+
// tailwind.config.ts
|
|
91
|
+
import tailwindPresetMantine from 'tailwind-preset-mantine'
|
|
92
|
+
import { colors, breakpoints } from './src/theme';
|
|
93
|
+
|
|
94
|
+
export default {
|
|
95
|
+
presets: [tailwindPresetMantine({
|
|
96
|
+
mantineColors: colors,
|
|
97
|
+
mantineBreakpoints: breakpoints
|
|
98
|
+
})],
|
|
99
|
+
};
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
> Why separate the `colors` and `breakpoints` definition in a single file?
|
|
103
|
+
>
|
|
104
|
+
> 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.
|
|
105
|
+
>
|
|
106
|
+
> If you have a better solution, please let me know in the [issue](https://github.com/songkeys/tailwind-preset-mantine/issues).
|
|
107
|
+
|
|
55
108
|
## Prevent style conflicts
|
|
56
109
|
|
|
57
110
|
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:
|
|
@@ -73,6 +126,7 @@ Change your global.css to use CSS layers to prevent style conflicts:
|
|
|
73
126
|
```
|
|
74
127
|
|
|
75
128
|
> What's `@layer`?
|
|
129
|
+
>
|
|
76
130
|
> 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`
|
|
77
131
|
|
|
78
132
|
### 2. postcss.config.js
|
|
@@ -85,16 +139,6 @@ module.exports = {
|
|
|
85
139
|
plugins: {
|
|
86
140
|
'postcss-import': {},
|
|
87
141
|
'postcss-preset-mantine': {},
|
|
88
|
-
'postcss-simple-vars': {
|
|
89
|
-
variables: {
|
|
90
|
-
'mantine-breakpoint-xs': '36em',
|
|
91
|
-
'mantine-breakpoint-sm': '48em',
|
|
92
|
-
'mantine-breakpoint-md': '62em',
|
|
93
|
-
'mantine-breakpoint-lg': '75em',
|
|
94
|
-
'mantine-breakpoint-xl': '88em',
|
|
95
|
-
},
|
|
96
|
-
},
|
|
97
|
-
|
|
98
142
|
// for tailwind
|
|
99
143
|
+ autoprefixer: {},
|
|
100
144
|
+ 'tailwindcss/nesting': {},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tailwind-preset-mantine",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "Integrate Mantine with Tailwind CSS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"mantine",
|
|
@@ -20,10 +20,10 @@
|
|
|
20
20
|
"main": "src/index.js",
|
|
21
21
|
"types": "src/index.d.ts",
|
|
22
22
|
"devDependencies": {
|
|
23
|
-
"@biomejs/biome": "^1.9.
|
|
24
|
-
"@mantine/core": "^7.13.
|
|
25
|
-
"bumpp": "^9.
|
|
26
|
-
"tailwindcss": "^3.4.
|
|
23
|
+
"@biomejs/biome": "^1.9.4",
|
|
24
|
+
"@mantine/core": "^7.13.4",
|
|
25
|
+
"bumpp": "^9.8.1",
|
|
26
|
+
"tailwindcss": "^3.4.14"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"@mantine/core": "^7",
|
package/src/index.d.ts
CHANGED
|
@@ -1,8 +1,14 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type {
|
|
2
|
+
MantineBreakpointsValues,
|
|
3
|
+
MantineThemeColorsOverride,
|
|
4
|
+
} from "@mantine/core";
|
|
2
5
|
import type { Config } from "tailwindcss";
|
|
3
6
|
|
|
4
7
|
declare function tailwindPresetMantine(
|
|
5
|
-
options?: Partial<{
|
|
8
|
+
options?: Partial<{
|
|
9
|
+
mantineColors: MantineThemeColorsOverride;
|
|
10
|
+
mantineBreakpoints: Partial<MantineBreakpointsValues>;
|
|
11
|
+
}>,
|
|
6
12
|
): Config;
|
|
7
13
|
|
|
8
14
|
export = tailwindPresetMantine;
|
package/src/index.js
CHANGED
|
@@ -36,8 +36,9 @@ const { DEFAULT_THEME, mergeMantineTheme } = require("@mantine/core");
|
|
|
36
36
|
* };
|
|
37
37
|
* ```
|
|
38
38
|
*
|
|
39
|
-
* @param {
|
|
40
|
-
* @param {
|
|
39
|
+
* @param {Object} options
|
|
40
|
+
* @param {MantineThemeColorsOverride} [options.mantineColors=DEFAULT_THEME.colors]
|
|
41
|
+
* @param {Partial<MantineBreakpointsValues>} [options.mantineBreakpoints=DEFAULT_THEME.breakpoints]
|
|
41
42
|
*/
|
|
42
43
|
module.exports = function tailwindPresetMantine({
|
|
43
44
|
mantineColors = DEFAULT_THEME.colors,
|
|
@@ -197,17 +198,17 @@ function generateColors(mantineColors) {
|
|
|
197
198
|
|
|
198
199
|
for (const color of Object.keys(mantineColors)) {
|
|
199
200
|
colors[color] = {
|
|
200
|
-
50: `var(--mantine-color-${color}-0)`,
|
|
201
|
-
100: `var(--mantine-color-${color}-1)`,
|
|
202
|
-
200: `var(--mantine-color-${color}-2)`,
|
|
203
|
-
300: `var(--mantine-color-${color}-3)`,
|
|
204
|
-
400: `var(--mantine-color-${color}-4)`,
|
|
205
|
-
500: `var(--mantine-color-${color}-5)`,
|
|
206
|
-
600: `var(--mantine-color-${color}-6)`,
|
|
207
|
-
700: `var(--mantine-color-${color}-7)`,
|
|
208
|
-
800: `var(--mantine-color-${color}-8)`,
|
|
209
|
-
900: `var(--mantine-color-${color}-9)`,
|
|
210
|
-
DEFAULT: `var(--mantine-color-${color}-filled)`,
|
|
201
|
+
50: `rgb(from var(--mantine-color-${color}-0) r g b / <alpha-value>)`,
|
|
202
|
+
100: `rgb(from var(--mantine-color-${color}-1) r g b / <alpha-value>)`,
|
|
203
|
+
200: `rgb(from var(--mantine-color-${color}-2) r g b / <alpha-value>)`,
|
|
204
|
+
300: `rgb(from var(--mantine-color-${color}-3) r g b / <alpha-value>)`,
|
|
205
|
+
400: `rgb(from var(--mantine-color-${color}-4) r g b / <alpha-value>)`,
|
|
206
|
+
500: `rgb(from var(--mantine-color-${color}-5) r g b / <alpha-value>)`,
|
|
207
|
+
600: `rgb(from var(--mantine-color-${color}-6) r g b / <alpha-value>)`,
|
|
208
|
+
700: `rgb(from var(--mantine-color-${color}-7) r g b / <alpha-value>)`,
|
|
209
|
+
800: `rgb(from var(--mantine-color-${color}-8) r g b / <alpha-value>)`,
|
|
210
|
+
900: `rgb(from var(--mantine-color-${color}-9) r g b / <alpha-value>)`,
|
|
211
|
+
DEFAULT: `rgb(from var(--mantine-color-${color}-filled) r g b / <alpha-value>)`,
|
|
211
212
|
};
|
|
212
213
|
}
|
|
213
214
|
|
|
@@ -217,17 +218,18 @@ function generateColors(mantineColors) {
|
|
|
217
218
|
function generatePrimaryColors() {
|
|
218
219
|
const colors = {
|
|
219
220
|
primary: {
|
|
220
|
-
50: "var(--mantine-primary-color-0)",
|
|
221
|
-
100: "var(--mantine-primary-color-1)",
|
|
222
|
-
200: "var(--mantine-primary-color-2)",
|
|
223
|
-
300: "var(--mantine-primary-color-3)",
|
|
224
|
-
400: "var(--mantine-primary-color-4)",
|
|
225
|
-
500: "var(--mantine-primary-color-5)",
|
|
226
|
-
600: "var(--mantine-primary-color-6)",
|
|
227
|
-
700: "var(--mantine-primary-color-7)",
|
|
228
|
-
800: "var(--mantine-primary-color-8)",
|
|
229
|
-
900: "var(--mantine-primary-color-9)",
|
|
230
|
-
DEFAULT:
|
|
221
|
+
50: "rgb(from var(--mantine-primary-color-0) r g b / <alpha-value>)",
|
|
222
|
+
100: "rgb(from var(--mantine-primary-color-1) r g b / <alpha-value>)",
|
|
223
|
+
200: "rgb(from var(--mantine-primary-color-2) r g b / <alpha-value>)",
|
|
224
|
+
300: "rgb(from var(--mantine-primary-color-3) r g b / <alpha-value>)",
|
|
225
|
+
400: "rgb(from var(--mantine-primary-color-4) r g b / <alpha-value>)",
|
|
226
|
+
500: "rgb(from var(--mantine-primary-color-5) r g b / <alpha-value>)",
|
|
227
|
+
600: "rgb(from var(--mantine-primary-color-6) r g b / <alpha-value>)",
|
|
228
|
+
700: "rgb(from var(--mantine-primary-color-7) r g b / <alpha-value>)",
|
|
229
|
+
800: "rgb(from var(--mantine-primary-color-8) r g b / <alpha-value>)",
|
|
230
|
+
900: "rgb(from var(--mantine-primary-color-9) r g b / <alpha-value>)",
|
|
231
|
+
DEFAULT:
|
|
232
|
+
"rgb(from var(--mantine-primary-color-filled) r g b / <alpha-value>)",
|
|
231
233
|
},
|
|
232
234
|
};
|
|
233
235
|
|
|
@@ -244,17 +246,20 @@ function generateVariantSpecificColors(mantineColors) {
|
|
|
244
246
|
const colors = {};
|
|
245
247
|
|
|
246
248
|
for (const color of Object.keys(mantineColors)) {
|
|
247
|
-
colors[`${color}-filled`] =
|
|
249
|
+
colors[`${color}-filled`] =
|
|
250
|
+
`rgb(from var(--mantine-color-${color}-filled) r g b / <alpha-value>)`;
|
|
248
251
|
colors[`${color}-filled-hover`] =
|
|
249
|
-
`var(--mantine-color-${color}-filled-hover)`;
|
|
250
|
-
colors[`${color}-light`] =
|
|
252
|
+
`rgb(from var(--mantine-color-${color}-filled-hover) r g b / <alpha-value>)`;
|
|
253
|
+
colors[`${color}-light`] =
|
|
254
|
+
`rgb(from var(--mantine-color-${color}-light) r g b / <alpha-value>)`;
|
|
251
255
|
colors[`${color}-light-hover`] =
|
|
252
|
-
`var(--mantine-color-${color}-light-hover)`;
|
|
256
|
+
`rgb(from var(--mantine-color-${color}-light-hover) r g b / <alpha-value>)`;
|
|
253
257
|
colors[`${color}-light-color`] =
|
|
254
|
-
`var(--mantine-color-${color}-light-color)`;
|
|
255
|
-
colors[`${color}-outline`] =
|
|
258
|
+
`rgb(from var(--mantine-color-${color}-light-color) r g b / <alpha-value>)`;
|
|
259
|
+
colors[`${color}-outline`] =
|
|
260
|
+
`rgb(from var(--mantine-color-${color}-outline) r g b / <alpha-value>)`;
|
|
256
261
|
colors[`${color}-outline-hover`] =
|
|
257
|
-
`var(--mantine-color-${color}-outline-hover)`;
|
|
262
|
+
`rgb(from var(--mantine-color-${color}-outline-hover) r g b / <alpha-value>)`;
|
|
258
263
|
}
|
|
259
264
|
|
|
260
265
|
return colors;
|
|
@@ -265,13 +270,20 @@ function generateVariantSpecificPrimaryColors() {
|
|
|
265
270
|
* @type {NonNullable<TailwindConfig['theme']>['colors']}
|
|
266
271
|
*/
|
|
267
272
|
const colors = {
|
|
268
|
-
"primary-filled":
|
|
269
|
-
|
|
270
|
-
"primary-
|
|
271
|
-
|
|
272
|
-
"primary-light
|
|
273
|
-
|
|
274
|
-
"primary-
|
|
273
|
+
"primary-filled":
|
|
274
|
+
"rgb(from var(--mantine-primary-color-filled) r g b / <alpha-value>)",
|
|
275
|
+
"primary-filled-hover":
|
|
276
|
+
"rgb(from var(--mantine-primary-color-filled-hover) r g b / <alpha-value>)",
|
|
277
|
+
"primary-light":
|
|
278
|
+
"rgb(from var(--mantine-primary-color-light) r g b / <alpha-value>)",
|
|
279
|
+
"primary-light-hover":
|
|
280
|
+
"rgb(from var(--mantine-primary-color-light-hover) r g b / <alpha-value>)",
|
|
281
|
+
"primary-light-color":
|
|
282
|
+
"rgb(from var(--mantine-primary-color-light-color) r g b / <alpha-value>)",
|
|
283
|
+
"primary-outline":
|
|
284
|
+
"rgb(from var(--mantine-primary-color-outline) r g b / <alpha-value>)",
|
|
285
|
+
"primary-outline-hover":
|
|
286
|
+
"rgb(from var(--mantine-primary-color-outline-hover) r g b / <alpha-value>)",
|
|
275
287
|
};
|
|
276
288
|
|
|
277
289
|
return colors;
|
|
@@ -282,13 +294,15 @@ function generateOtherTextColors() {
|
|
|
282
294
|
* @type {NonNullable<TailwindConfig['theme']>['colors']}
|
|
283
295
|
*/
|
|
284
296
|
const colors = {
|
|
285
|
-
white: "var(--mantine-color-white)",
|
|
286
|
-
black: "var(--mantine-color-black)",
|
|
287
|
-
body: "var(--mantine-color-text)",
|
|
288
|
-
error: "var(--mantine-color-error)",
|
|
289
|
-
placeholder:
|
|
290
|
-
|
|
291
|
-
|
|
297
|
+
white: "rgb(from var(--mantine-color-white) r g b / <alpha-value>)",
|
|
298
|
+
black: "rgb(from var(--mantine-color-black) r g b / <alpha-value>)",
|
|
299
|
+
body: "rgb(from var(--mantine-color-text) r g b / <alpha-value>)",
|
|
300
|
+
error: "rgb(from var(--mantine-color-error) r g b / <alpha-value>)",
|
|
301
|
+
placeholder:
|
|
302
|
+
"rgb(from var(--mantine-color-placeholder) r g b / <alpha-value>)",
|
|
303
|
+
anchor: "rgb(from var(--mantine-color-anchor) r g b / <alpha-value>)",
|
|
304
|
+
DEFAULT:
|
|
305
|
+
"rgb(from var(--mantine-color-default-color) r g b / <alpha-value>)",
|
|
292
306
|
};
|
|
293
307
|
|
|
294
308
|
return colors;
|
|
@@ -299,14 +313,15 @@ function generateOtherBackgroundColors() {
|
|
|
299
313
|
* @type {NonNullable<TailwindConfig['theme']>['colors']}
|
|
300
314
|
*/
|
|
301
315
|
const colors = {
|
|
302
|
-
white: "var(--mantine-color-white)",
|
|
303
|
-
black: "var(--mantine-color-black)",
|
|
304
|
-
body: "var(--mantine-color-body)",
|
|
305
|
-
error: "var(--mantine-color-error)",
|
|
306
|
-
placeholder:
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
316
|
+
white: "rgb(from var(--mantine-color-white) r g b / <alpha-value>)",
|
|
317
|
+
black: "rgb(from var(--mantine-color-black) r g b / <alpha-value>)",
|
|
318
|
+
body: "rgb(from var(--mantine-color-body) r g b / <alpha-value>)",
|
|
319
|
+
error: "rgb(from var(--mantine-color-error) r g b / <alpha-value>)",
|
|
320
|
+
placeholder:
|
|
321
|
+
"rgb(from var(--mantine-color-placeholder) r g b / <alpha-value>)",
|
|
322
|
+
anchor: "rgb(from var(--mantine-color-anchor) r g b / <alpha-value>)",
|
|
323
|
+
DEFAULT: "rgb(from var(--mantine-color-default) r g b / <alpha-value>)",
|
|
324
|
+
hover: "rgb(from var(--mantine-color-default-hover) r g b / <alpha-value>)",
|
|
310
325
|
};
|
|
311
326
|
|
|
312
327
|
return colors;
|
|
@@ -317,7 +332,8 @@ function generateOtherBorderColors() {
|
|
|
317
332
|
* @type {NonNullable<TailwindConfig['theme']>['colors']}
|
|
318
333
|
*/
|
|
319
334
|
const colors = {
|
|
320
|
-
DEFAULT:
|
|
335
|
+
DEFAULT:
|
|
336
|
+
"rgb(from var(--mantine-color-default-border) r g b / <alpha-value>)",
|
|
321
337
|
};
|
|
322
338
|
|
|
323
339
|
return colors;
|