Skip to content

Commit

Permalink
feat: support tailwind v4 (#13)
Browse files Browse the repository at this point in the history
  • Loading branch information
@songkeys
songkeys authored Feb 11, 2025
1 parent c5ddb02 commit ea21c27
Show file tree
Hide file tree
Showing 17 changed files with 1,946 additions and 1,545 deletions.
178 changes: 75 additions & 103 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,37 @@

[![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

```bash
npm install tailwind-preset-mantine
npm install tailwind-preset-mantine@beta
```

## Usage

### Default mantine theme

To use the preset in your Tailwind CSS configuration, add it to the `presets` array:
1. All-in-one import (recommended)

```ts
// tailwind.config.ts
import tailwindPresetMantine from 'tailwind-preset-mantine';
To use the preset in your Tailwind CSS configuration, add it to the css file:

export default {
presets: [
tailwindPresetMantine(),
],
};
```css
@import "tailwind-preset-mantine";
```

That's it!

Now you can use tailwind with mantine's style applied:

```tsx
Expand All @@ -39,119 +45,85 @@ export default function Page() {
}
```

### 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";

export const colors: MantineThemeColors = {
// ...your custom colors
}
export const breakpoints: MantineBreakpointsValues = {
// ...your custom breakpoints
}
```
```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);

Pass your custom `colors` and `breakpoints` to `MantineProvider`:
@import "@mantine/core/styles.layer.css";

```tsx
// src/mantine-provider.tsx
import {
MantineProvider as 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={theme}>{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/location (default: "theme.css")

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 "tailwind-preset-mantine";
@import "./theme.css"; /* <-- add the generated theme */
```

## Minimal template

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/tree/tw4>

## License

Expand Down
34 changes: 24 additions & 10 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
{
"name": "tailwind-preset-mantine",
"version": "1.3.2",
"version": "2.0.0-beta.6",
"description": "Integrate Mantine with Tailwind CSS",
"keywords": ["mantine", "tailwind", "preset"],
"keywords": [
"mantine",
"tailwind",
"preset"
],
"homepage": "https://github.com/songkeys/tailwind-preset-mantine#readme",
"bugs": {
"url": "https://github.com/songkeys/tailwind-preset-mantine/issues"
Expand All @@ -13,22 +17,32 @@
},
"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"
},
"scripts": {
"lint": "biome check .",
"lint:fix": "biome check . --write",
"release": "bumpp"
"release": "bumpp",
"generate": "node scripts/generate.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"
},
"packageManager": "[email protected]"
"packageManager": "[email protected]",
"type": "module",
"dependencies": {
"tsx": "^4.19.2"
}
}
Loading

0 comments on commit ea21c27

Please sign in to comment.