tailwind-preset-mantine 1.2.1 → 1.3.1
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.js +54 -44
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.1",
|
|
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.js
CHANGED
|
@@ -198,17 +198,17 @@ function generateColors(mantineColors) {
|
|
|
198
198
|
|
|
199
199
|
for (const color of Object.keys(mantineColors)) {
|
|
200
200
|
colors[color] = {
|
|
201
|
-
50: `var(--mantine-color-${color}-0)`,
|
|
202
|
-
100: `var(--mantine-color-${color}-1)`,
|
|
203
|
-
200: `var(--mantine-color-${color}-2)`,
|
|
204
|
-
300: `var(--mantine-color-${color}-3)`,
|
|
205
|
-
400: `var(--mantine-color-${color}-4)`,
|
|
206
|
-
500: `var(--mantine-color-${color}-5)`,
|
|
207
|
-
600: `var(--mantine-color-${color}-6)`,
|
|
208
|
-
700: `var(--mantine-color-${color}-7)`,
|
|
209
|
-
800: `var(--mantine-color-${color}-8)`,
|
|
210
|
-
900: `var(--mantine-color-${color}-9)`,
|
|
211
|
-
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>)`,
|
|
212
212
|
};
|
|
213
213
|
}
|
|
214
214
|
|
|
@@ -218,17 +218,18 @@ function generateColors(mantineColors) {
|
|
|
218
218
|
function generatePrimaryColors() {
|
|
219
219
|
const colors = {
|
|
220
220
|
primary: {
|
|
221
|
-
50: "var(--mantine-primary-color-0)",
|
|
222
|
-
100: "var(--mantine-primary-color-1)",
|
|
223
|
-
200: "var(--mantine-primary-color-2)",
|
|
224
|
-
300: "var(--mantine-primary-color-3)",
|
|
225
|
-
400: "var(--mantine-primary-color-4)",
|
|
226
|
-
500: "var(--mantine-primary-color-5)",
|
|
227
|
-
600: "var(--mantine-primary-color-6)",
|
|
228
|
-
700: "var(--mantine-primary-color-7)",
|
|
229
|
-
800: "var(--mantine-primary-color-8)",
|
|
230
|
-
900: "var(--mantine-primary-color-9)",
|
|
231
|
-
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>)",
|
|
232
233
|
},
|
|
233
234
|
};
|
|
234
235
|
|
|
@@ -245,15 +246,17 @@ function generateVariantSpecificColors(mantineColors) {
|
|
|
245
246
|
const colors = {};
|
|
246
247
|
|
|
247
248
|
for (const color of Object.keys(mantineColors)) {
|
|
248
|
-
colors[`${color}-filled`] =
|
|
249
|
+
colors[`${color}-filled`] =
|
|
250
|
+
`rgb(from var(--mantine-color-${color}-filled) r g b / <alpha-value>)`;
|
|
249
251
|
colors[`${color}-filled-hover`] =
|
|
250
252
|
`var(--mantine-color-${color}-filled-hover)`;
|
|
251
253
|
colors[`${color}-light`] = `var(--mantine-color-${color}-light)`;
|
|
252
254
|
colors[`${color}-light-hover`] =
|
|
253
255
|
`var(--mantine-color-${color}-light-hover)`;
|
|
254
256
|
colors[`${color}-light-color`] =
|
|
255
|
-
`var(--mantine-color-${color}-light-color)`;
|
|
256
|
-
colors[`${color}-outline`] =
|
|
257
|
+
`rgb(from var(--mantine-color-${color}-light-color) r g b / <alpha-value>)`;
|
|
258
|
+
colors[`${color}-outline`] =
|
|
259
|
+
`rgb(from var(--mantine-color-${color}-outline) r g b / <alpha-value>)`;
|
|
257
260
|
colors[`${color}-outline-hover`] =
|
|
258
261
|
`var(--mantine-color-${color}-outline-hover)`;
|
|
259
262
|
}
|
|
@@ -266,12 +269,15 @@ function generateVariantSpecificPrimaryColors() {
|
|
|
266
269
|
* @type {NonNullable<TailwindConfig['theme']>['colors']}
|
|
267
270
|
*/
|
|
268
271
|
const colors = {
|
|
269
|
-
"primary-filled":
|
|
272
|
+
"primary-filled":
|
|
273
|
+
"rgb(from var(--mantine-primary-color-filled) r g b / <alpha-value>)",
|
|
270
274
|
"primary-filled-hover": "var(--mantine-primary-color-filled-hover)",
|
|
271
275
|
"primary-light": "var(--mantine-primary-color-light)",
|
|
272
276
|
"primary-light-hover": "var(--mantine-primary-color-light-hover)",
|
|
273
|
-
"primary-light-color":
|
|
274
|
-
|
|
277
|
+
"primary-light-color":
|
|
278
|
+
"rgb(from var(--mantine-primary-color-light-color) r g b / <alpha-value>)",
|
|
279
|
+
"primary-outline":
|
|
280
|
+
"rgb(from var(--mantine-primary-color-outline) r g b / <alpha-value>)",
|
|
275
281
|
"primary-outline-hover": "var(--mantine-primary-color-outline-hover)",
|
|
276
282
|
};
|
|
277
283
|
|
|
@@ -283,13 +289,15 @@ function generateOtherTextColors() {
|
|
|
283
289
|
* @type {NonNullable<TailwindConfig['theme']>['colors']}
|
|
284
290
|
*/
|
|
285
291
|
const colors = {
|
|
286
|
-
white: "var(--mantine-color-white)",
|
|
287
|
-
black: "var(--mantine-color-black)",
|
|
288
|
-
body: "var(--mantine-color-text)",
|
|
289
|
-
error: "var(--mantine-color-error)",
|
|
290
|
-
placeholder:
|
|
291
|
-
|
|
292
|
-
|
|
292
|
+
white: "rgb(from var(--mantine-color-white) r g b / <alpha-value>)",
|
|
293
|
+
black: "rgb(from var(--mantine-color-black) r g b / <alpha-value>)",
|
|
294
|
+
body: "rgb(from var(--mantine-color-text) r g b / <alpha-value>)",
|
|
295
|
+
error: "rgb(from var(--mantine-color-error) r g b / <alpha-value>)",
|
|
296
|
+
placeholder:
|
|
297
|
+
"rgb(from var(--mantine-color-placeholder) r g b / <alpha-value>)",
|
|
298
|
+
anchor: "rgb(from var(--mantine-color-anchor) r g b / <alpha-value>)",
|
|
299
|
+
DEFAULT:
|
|
300
|
+
"rgb(from var(--mantine-color-default-color) r g b / <alpha-value>)",
|
|
293
301
|
};
|
|
294
302
|
|
|
295
303
|
return colors;
|
|
@@ -300,14 +308,15 @@ function generateOtherBackgroundColors() {
|
|
|
300
308
|
* @type {NonNullable<TailwindConfig['theme']>['colors']}
|
|
301
309
|
*/
|
|
302
310
|
const colors = {
|
|
303
|
-
white: "var(--mantine-color-white)",
|
|
304
|
-
black: "var(--mantine-color-black)",
|
|
305
|
-
body: "var(--mantine-color-body)",
|
|
306
|
-
error: "var(--mantine-color-error)",
|
|
307
|
-
placeholder:
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
+
white: "rgb(from var(--mantine-color-white) r g b / <alpha-value>)",
|
|
312
|
+
black: "rgb(from var(--mantine-color-black) r g b / <alpha-value>)",
|
|
313
|
+
body: "rgb(from var(--mantine-color-body) r g b / <alpha-value>)",
|
|
314
|
+
error: "rgb(from var(--mantine-color-error) r g b / <alpha-value>)",
|
|
315
|
+
placeholder:
|
|
316
|
+
"rgb(from var(--mantine-color-placeholder) r g b / <alpha-value>)",
|
|
317
|
+
anchor: "rgb(from var(--mantine-color-anchor) r g b / <alpha-value>)",
|
|
318
|
+
DEFAULT: "rgb(from var(--mantine-color-default) r g b / <alpha-value>)",
|
|
319
|
+
hover: "rgb(from var(--mantine-color-default-hover) r g b / <alpha-value>)",
|
|
311
320
|
};
|
|
312
321
|
|
|
313
322
|
return colors;
|
|
@@ -318,7 +327,8 @@ function generateOtherBorderColors() {
|
|
|
318
327
|
* @type {NonNullable<TailwindConfig['theme']>['colors']}
|
|
319
328
|
*/
|
|
320
329
|
const colors = {
|
|
321
|
-
DEFAULT:
|
|
330
|
+
DEFAULT:
|
|
331
|
+
"rgb(from var(--mantine-color-default-border) r g b / <alpha-value>)",
|
|
322
332
|
};
|
|
323
333
|
|
|
324
334
|
return colors;
|