tailwind-preset-mantine 2.0.3 → 2.0.5

package/README.md

@@ -11,7 +11,7 @@ A [Tailwind CSS (v4)](https://tailwindcss.com/) preset for seamless integration
 | 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.
+*Note: you can still use v1 for Tailwind CSS V4 via [`@config`](https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file) directive.
 
 ## Installation
 
@@ -19,13 +19,15 @@ A [Tailwind CSS (v4)](https://tailwindcss.com/) preset for seamless integration
 npm install tailwind-preset-mantine
 ```
 
+Refer to [Tailwind Installation](https://tailwindcss.com/docs/installation/) for the rest of requirements to install tailwind depends on your project setup or framework.
+
 ## Usage
 
 ### Default mantine theme
 
 1. All-in-one import (recommended)
 
-To use the preset in your Tailwind CSS configuration, add it to the css file:
+When importing the styles, instead of importing the tailwind css file, importing this preset in the css file:
 
 ```css
 @import "tailwind-preset-mantine";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-preset-mantine",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "Integrate Mantine with Tailwind CSS",
   "keywords": [
     "mantine",

package/src/generate.js

@@ -5,8 +5,7 @@
 import { DEFAULT_THEME } from "@mantine/core";
 
 export function generateDefaultImports() {
-	return `
-/** This file is autogenerated by the script. Do not edit it manually. */
+	return `/** This file is autogenerated by the script. Do not edit it manually. */
 @layer theme, base, mantine, components, utilities;
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/preflight.css" layer(base);
@@ -23,8 +22,7 @@ export function generateTheme(theme = DEFAULT_THEME) {
 	// check if the object is deeply equal to DEFAULT_THEME
 	const isDefault = JSON.stringify(theme) === JSON.stringify(DEFAULT_THEME);
 
-	return `
-/** This file is autogenerated by the script. Do not edit it manually. */
+	return `/** This file is autogenerated by the script. Do not edit it manually. */
 ${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"], [data-mantine-color-scheme="dark"] *));' : ""}
 
 @theme {
@@ -73,7 +71,6 @@ ${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"],
   --spacing-md: var(--mantine-spacing-md);
   --spacing-lg: var(--mantine-spacing-lg);
   --spacing-xl: var(--mantine-spacing-xl);
-  --spacing: var(--mantine-spacing-md);
 
   /* container */
   /* TODO: */
@@ -177,6 +174,7 @@ ${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"],
 		.join("\n")}
 
   /* breakpoints */
+  ${theme.breakpoints ? "--breakpoint-*: initial;" : ""}
   ${Object.entries(theme.breakpoints ?? {})
 		.map(([key, value]) =>
 			`

package/src/index.css

@@ -1,4 +1,3 @@
-
 /** This file is autogenerated by the script. Do not edit it manually. */
 @layer theme, base, mantine, components, utilities;
 @import "tailwindcss/theme.css" layer(theme);
@@ -6,7 +5,6 @@
 @import "tailwindcss/utilities.css" layer(utilities);
 
 @import "@mantine/core/styles.layer.css";
-
 /** This file is autogenerated by the script. Do not edit it manually. */
 @custom-variant dark (&:where([data-mantine-color-scheme="dark"], [data-mantine-color-scheme="dark"] *));
 
@@ -54,7 +52,6 @@
   --spacing-md: var(--mantine-spacing-md);
   --spacing-lg: var(--mantine-spacing-lg);
   --spacing-xl: var(--mantine-spacing-xl);
-  --spacing: var(--mantine-spacing-md);
 
   /* container */
   /* TODO: */
@@ -405,6 +402,7 @@
   --color-orange-outline-hover: var(--mantine-color-orange-outline-hover);
 
   /* breakpoints */
+  --breakpoint-*: initial;
   
   --breakpoint-xs: 36em;
 

package/src/theme.css

@@ -1,4 +1,3 @@
-
 /** This file is autogenerated by the script. Do not edit it manually. */
 @custom-variant dark (&:where([data-mantine-color-scheme="dark"], [data-mantine-color-scheme="dark"] *));
 
@@ -46,7 +45,6 @@
   --spacing-md: var(--mantine-spacing-md);
   --spacing-lg: var(--mantine-spacing-lg);
   --spacing-xl: var(--mantine-spacing-xl);
-  --spacing: var(--mantine-spacing-md);
 
   /* container */
   /* TODO: */
@@ -397,6 +395,7 @@
   --color-orange-outline-hover: var(--mantine-color-orange-outline-hover);
 
   /* breakpoints */
+  --breakpoint-*: initial;
   
   --breakpoint-xs: 36em;