tailwind-preset-mantine 2.0.0-beta.6 → 2.0.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 +17 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -16,7 +16,7 @@ A Tailwind CSS (v4) preset for seamless integration with Mantine UI (v7) compone
|
|
|
16
16
|
## Installation
|
|
17
17
|
|
|
18
18
|
```bash
|
|
19
|
-
npm install tailwind-preset-mantine
|
|
19
|
+
npm install tailwind-preset-mantine@beta
|
|
20
20
|
```
|
|
21
21
|
|
|
22
22
|
## Usage
|
|
@@ -31,6 +31,20 @@ To use the preset in your Tailwind CSS configuration, add it to the css file:
|
|
|
31
31
|
@import "tailwind-preset-mantine";
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
+
That's it!
|
|
35
|
+
|
|
36
|
+
Now you can use tailwind with mantine's style applied:
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
import { Button } from '@mantine/core';
|
|
40
|
+
|
|
41
|
+
export default function Page() {
|
|
42
|
+
// `bg-red-500` will be `background-color: var(--mantine-color-red-5)`
|
|
43
|
+
// `text-white` will be `color: var(--mantine-color-white)`
|
|
44
|
+
return <Button className="bg-red-500 text-white">Hello</Button>
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
34
48
|
2. Manual import (advanced)
|
|
35
49
|
|
|
36
50
|
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:
|
|
@@ -107,11 +121,9 @@ Options:
|
|
|
107
121
|
|
|
108
122
|
## Minimal template
|
|
109
123
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
<https://github.com/songkeys/next-app-mantine-tailwind-template> -->
|
|
124
|
+
Here's a minimal template that you can use to get started:
|
|
113
125
|
|
|
114
|
-
|
|
126
|
+
<https://github.com/songkeys/next-app-mantine-tailwind-template/tree/tw4>
|
|
115
127
|
|
|
116
128
|
## License
|
|
117
129
|
|