From f2863978f199d8bb18b706b7f17a97d35e83b03e Mon Sep 17 00:00:00 2001
From: Max Kasperowicz <yet3.dev@gmail.com>
Date: Tue, 14 Jan 2025 02:41:04 +0100
Subject: [PATCH 01/12] feat: add horizontal/vertical lines pattern

---
 example/src/routes/+page.svelte | 12 +++++++++
 src/index.ts                    |  5 ++++
 src/patterns/horizontalLines.ts | 47 +++++++++++++++++++++++++++++++++
 src/patterns/verticalLines.ts   | 47 +++++++++++++++++++++++++++++++++
 4 files changed, 111 insertions(+)
 create mode 100644 src/patterns/horizontalLines.ts
 create mode 100644 src/patterns/verticalLines.ts

diff --git a/example/src/routes/+page.svelte b/example/src/routes/+page.svelte
index 950cfc1..3a210d9 100644
--- a/example/src/routes/+page.svelte
+++ b/example/src/routes/+page.svelte
@@ -49,6 +49,18 @@
 	];
 
 	const PATTERNS: IPattern[] = [
+		{
+			id: 'x-lines',
+			name: 'Horizontal lines',
+			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS],
+			class: 'bg-blue-500 bg-pattern-x-lines bg-pattern-line-0.5 bg-pattern-spacing-20'
+		},
+		{
+			id: 'y-lines',
+			name: 'Vertical lines',
+			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS],
+			class: 'bg-blue-500 bg-pattern-y-lines bg-pattern-line-0.5 bg-pattern-spacing-32'
+		},
 		{
 			id: 'grid',
 			name: 'Grid',
diff --git a/src/index.ts b/src/index.ts
index 7458bbe..00e3c42 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -17,6 +17,8 @@ import {
 import { generatePolkaDotClass } from "./patterns/polkaDot";
 import type { IOptions } from "./types";
 import { generateDotColors, generateDotSize, matchDotSizeAndColors } from "./lib/dot";
+import { generateHorizontalLinesClass } from "./patterns/horizontalLines";
+import { generateVerticalLinesClass } from "./patterns/verticalLines";
 
 export default plugin.withOptions<IOptions | undefined>(
 	(options) => (api) => {
@@ -36,6 +38,9 @@ export default plugin.withOptions<IOptions | undefined>(
 				isHexagonal: true,
 			}),
 
+      generateHorizontalLinesClass(`${opts.prefix}pattern-x-lines`),
+      generateVerticalLinesClass(`${opts.prefix}pattern-y-lines`),
+
 			// Configs
 			generateLineWidths(api, opts),
 			generateLineColors(api, opts),
diff --git a/src/patterns/horizontalLines.ts b/src/patterns/horizontalLines.ts
new file mode 100644
index 0000000..008c9c1
--- /dev/null
+++ b/src/patterns/horizontalLines.ts
@@ -0,0 +1,47 @@
+import type { CSSRuleObject } from "tailwindcss/types/config";
+
+interface IOpts {
+	lineSize: number;
+	spacing: number;
+	offsetX: number;
+	offsetY: number;
+
+	lineColor: string;
+}
+
+export const generateHorizontalLinesClass = (
+	className: string,
+	opts: IOpts = {
+		lineColor: "#ffffff",
+		lineSize: 1,
+		spacing: 24,
+		offsetX: 0,
+		offsetY: 0,
+	},
+): CSSRuleObject => {
+	return {
+		[`.${className}`]: {
+			"--tw-line-size": opts.lineSize.toString(),
+			"--tw-spacing": opts.spacing.toString(),
+			"--tw-offset-x": `${opts.offsetX * -1}px`,
+			"--tw-offset-y": `${opts.offsetY * -1}px`,
+			"--tw-line-color": opts.lineColor,
+
+			"--tw-unit": "calc(var(--tw-line-size) + var(--tw-spacing))",
+			"--tw-line-stop":
+				"calc((var(--tw-line-size) / var(--tw-unit) * 100%) / 2)",
+			"--tw-line-start-stop": "calc(50% - var(--tw-line-stop))",
+			"--tw-line-end-stop": "calc(50% + var(--tw-line-stop))",
+			backgroundImage: `linear-gradient(
+          0deg,
+          transparent var(--tw-line-start-stop),
+          var(--tw-line-color) var(--tw-line-start-stop),
+          var(--tw-line-color) var(--tw-line-end-stop),
+          transparent var(--tw-line-end-stop),
+          transparent 100%
+        )`,
+			backgroundSize: "calc(var(--tw-unit) * 1px) calc(var(--tw-unit) * 1px)",
+			backgroundPosition: "var(--tw-offset-x) var(--tw-offset-y)",
+		} as unknown as CSSRuleObject,
+	};
+};
diff --git a/src/patterns/verticalLines.ts b/src/patterns/verticalLines.ts
new file mode 100644
index 0000000..c01b36a
--- /dev/null
+++ b/src/patterns/verticalLines.ts
@@ -0,0 +1,47 @@
+import type { CSSRuleObject } from "tailwindcss/types/config";
+
+interface IOpts {
+	lineSize: number;
+	spacing: number;
+	offsetX: number;
+	offsetY: number;
+
+	lineColor: string;
+}
+
+export const generateVerticalLinesClass = (
+	className: string,
+	opts: IOpts = {
+		lineColor: "#ffffff",
+		lineSize: 1,
+		spacing: 24,
+		offsetX: 0,
+		offsetY: 0,
+	},
+): CSSRuleObject => {
+	return {
+		[`.${className}`]: {
+			"--tw-line-size": opts.lineSize.toString(),
+			"--tw-spacing": opts.spacing.toString(),
+			"--tw-offset-x": `${opts.offsetX * -1}px`,
+			"--tw-offset-y": `${opts.offsetY * -1}px`,
+			"--tw-line-color": opts.lineColor,
+
+			"--tw-unit": "calc(var(--tw-line-size) + var(--tw-spacing))",
+			"--tw-line-stop":
+				"calc((var(--tw-line-size) / var(--tw-unit) * 100%) / 2)",
+			"--tw-line-start-stop": "calc(50% - var(--tw-line-stop))",
+			"--tw-line-end-stop": "calc(50% + var(--tw-line-stop))",
+			backgroundImage: `linear-gradient(
+          90deg,
+          transparent var(--tw-line-start-stop),
+          var(--tw-line-color) var(--tw-line-start-stop),
+          var(--tw-line-color) var(--tw-line-end-stop),
+          transparent var(--tw-line-end-stop),
+          transparent 100%
+        )`,
+			backgroundSize: "calc(var(--tw-unit) * 1px) calc(var(--tw-unit) * 1px)",
+			backgroundPosition: "var(--tw-offset-x) var(--tw-offset-y)",
+		} as unknown as CSSRuleObject,
+	};
+};

From f76e483cfe80dc13a167d64f6c66122382d139cd Mon Sep 17 00:00:00 2001
From: Max Kasperowicz <yet3.dev@gmail.com>
Date: Tue, 14 Jan 2025 02:48:40 +0100
Subject: [PATCH 02/12] refactor: merge horizontal/vertical lines class
 generators into one

---
 src/index.ts                                  | 17 +++++--
 src/patterns/{horizontalLines.ts => lines.ts} | 16 +++++--
 src/patterns/verticalLines.ts                 | 47 -------------------
 3 files changed, 23 insertions(+), 57 deletions(-)
 rename src/patterns/{horizontalLines.ts => lines.ts} (89%)
 delete mode 100644 src/patterns/verticalLines.ts

diff --git a/src/index.ts b/src/index.ts
index 00e3c42..abd19ca 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,11 @@
 import plugin from "tailwindcss/plugin";
 import { DOT_SIZES, LINE_WIDTHS, OFFSETS, SPACING } from "./consts";
 import { arrToTwConfig } from "./lib/arrToTwConfig";
+import {
+	generateDotColors,
+	generateDotSize,
+	matchDotSizeAndColors,
+} from "./lib/dot";
 import {
 	generateLineColors,
 	generateLineWidths,
@@ -14,11 +19,9 @@ import {
 	generateHatchingClass,
 	genreateHatchingDirection,
 } from "./patterns/hatching";
+import { generateLinesClass } from "./patterns/lines";
 import { generatePolkaDotClass } from "./patterns/polkaDot";
 import type { IOptions } from "./types";
-import { generateDotColors, generateDotSize, matchDotSizeAndColors } from "./lib/dot";
-import { generateHorizontalLinesClass } from "./patterns/horizontalLines";
-import { generateVerticalLinesClass } from "./patterns/verticalLines";
 
 export default plugin.withOptions<IOptions | undefined>(
 	(options) => (api) => {
@@ -38,8 +41,12 @@ export default plugin.withOptions<IOptions | undefined>(
 				isHexagonal: true,
 			}),
 
-      generateHorizontalLinesClass(`${opts.prefix}pattern-x-lines`),
-      generateVerticalLinesClass(`${opts.prefix}pattern-y-lines`),
+			generateLinesClass(`${opts.prefix}pattern-x-lines`, {
+				angle: 0,
+			}),
+			generateLinesClass(`${opts.prefix}pattern-y-lines`, {
+				angle: 90,
+			}),
 
 			// Configs
 			generateLineWidths(api, opts),
diff --git a/src/patterns/horizontalLines.ts b/src/patterns/lines.ts
similarity index 89%
rename from src/patterns/horizontalLines.ts
rename to src/patterns/lines.ts
index 008c9c1..8c1578c 100644
--- a/src/patterns/horizontalLines.ts
+++ b/src/patterns/lines.ts
@@ -7,18 +7,24 @@ interface IOpts {
 	offsetY: number;
 
 	lineColor: string;
+
+	angle: number;
 }
 
-export const generateHorizontalLinesClass = (
+export const generateLinesClass = (
 	className: string,
-	opts: IOpts = {
+	_opts?: Partial<IOpts>,
+): CSSRuleObject => {
+	const opts: IOpts = {
+		angle: 0,
 		lineColor: "#ffffff",
 		lineSize: 1,
 		spacing: 24,
 		offsetX: 0,
 		offsetY: 0,
-	},
-): CSSRuleObject => {
+		..._opts,
+	};
+
 	return {
 		[`.${className}`]: {
 			"--tw-line-size": opts.lineSize.toString(),
@@ -33,7 +39,7 @@ export const generateHorizontalLinesClass = (
 			"--tw-line-start-stop": "calc(50% - var(--tw-line-stop))",
 			"--tw-line-end-stop": "calc(50% + var(--tw-line-stop))",
 			backgroundImage: `linear-gradient(
-          0deg,
+          ${opts.angle}deg,
           transparent var(--tw-line-start-stop),
           var(--tw-line-color) var(--tw-line-start-stop),
           var(--tw-line-color) var(--tw-line-end-stop),
diff --git a/src/patterns/verticalLines.ts b/src/patterns/verticalLines.ts
deleted file mode 100644
index c01b36a..0000000
--- a/src/patterns/verticalLines.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import type { CSSRuleObject } from "tailwindcss/types/config";
-
-interface IOpts {
-	lineSize: number;
-	spacing: number;
-	offsetX: number;
-	offsetY: number;
-
-	lineColor: string;
-}
-
-export const generateVerticalLinesClass = (
-	className: string,
-	opts: IOpts = {
-		lineColor: "#ffffff",
-		lineSize: 1,
-		spacing: 24,
-		offsetX: 0,
-		offsetY: 0,
-	},
-): CSSRuleObject => {
-	return {
-		[`.${className}`]: {
-			"--tw-line-size": opts.lineSize.toString(),
-			"--tw-spacing": opts.spacing.toString(),
-			"--tw-offset-x": `${opts.offsetX * -1}px`,
-			"--tw-offset-y": `${opts.offsetY * -1}px`,
-			"--tw-line-color": opts.lineColor,
-
-			"--tw-unit": "calc(var(--tw-line-size) + var(--tw-spacing))",
-			"--tw-line-stop":
-				"calc((var(--tw-line-size) / var(--tw-unit) * 100%) / 2)",
-			"--tw-line-start-stop": "calc(50% - var(--tw-line-stop))",
-			"--tw-line-end-stop": "calc(50% + var(--tw-line-stop))",
-			backgroundImage: `linear-gradient(
-          90deg,
-          transparent var(--tw-line-start-stop),
-          var(--tw-line-color) var(--tw-line-start-stop),
-          var(--tw-line-color) var(--tw-line-end-stop),
-          transparent var(--tw-line-end-stop),
-          transparent 100%
-        )`,
-			backgroundSize: "calc(var(--tw-unit) * 1px) calc(var(--tw-unit) * 1px)",
-			backgroundPosition: "var(--tw-offset-x) var(--tw-offset-y)",
-		} as unknown as CSSRuleObject,
-	};
-};

From c320f62daa188a2bbca58fb20e3e81f5d6657130 Mon Sep 17 00:00:00 2001
From: Max Kasperowicz <yet3.dev@gmail.com>
Date: Tue, 14 Jan 2025 02:49:03 +0100
Subject: [PATCH 03/12] refactor: move pattern tests into one dir

---
 tests/{ => patterns}/grid.test.ts     | 4 ++--
 tests/{ => patterns}/hatching.test.ts | 4 ++--
 tests/{ => patterns}/polkaDot.test.ts | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)
 rename tests/{ => patterns}/grid.test.ts (92%)
 rename tests/{ => patterns}/hatching.test.ts (97%)
 rename tests/{ => patterns}/polkaDot.test.ts (94%)

diff --git a/tests/grid.test.ts b/tests/patterns/grid.test.ts
similarity index 92%
rename from tests/grid.test.ts
rename to tests/patterns/grid.test.ts
index e4d88c9..1dcfd05 100644
--- a/tests/grid.test.ts
+++ b/tests/patterns/grid.test.ts
@@ -1,6 +1,6 @@
 import { describe, test } from "vitest";
-import { DEFAULT_OPTS } from "../src/consts";
-import { css, expectCssToBe, generateTwCss } from "./utils";
+import { DEFAULT_OPTS } from "../../src/consts";
+import { css, expectCssToBe, generateTwCss } from "../utils";
 
 describe("grid pattern", () => {
 	test("grid pattern", async () => {
diff --git a/tests/hatching.test.ts b/tests/patterns/hatching.test.ts
similarity index 97%
rename from tests/hatching.test.ts
rename to tests/patterns/hatching.test.ts
index 264fecd..d6961ef 100644
--- a/tests/hatching.test.ts
+++ b/tests/patterns/hatching.test.ts
@@ -1,6 +1,6 @@
 import { describe, test } from "vitest";
-import { DEFAULT_OPTS } from "../src/consts";
-import { css, expectCssToBe, generateTwCss } from "./utils";
+import { DEFAULT_OPTS } from "../../src/consts";
+import { css, expectCssToBe, generateTwCss } from "../utils";
 
 const DEFAULT_HATCHING_CSS = css`
 .${DEFAULT_OPTS.prefix}pattern-hatching {
diff --git a/tests/polkaDot.test.ts b/tests/patterns/polkaDot.test.ts
similarity index 94%
rename from tests/polkaDot.test.ts
rename to tests/patterns/polkaDot.test.ts
index de2e367..373ac8b 100644
--- a/tests/polkaDot.test.ts
+++ b/tests/patterns/polkaDot.test.ts
@@ -1,6 +1,6 @@
 import { describe, test } from "vitest";
-import { DEFAULT_OPTS } from "../src/consts";
-import { css, expectCssToBe, generateTwCss } from "./utils";
+import { DEFAULT_OPTS } from "../../src/consts";
+import { css, expectCssToBe, generateTwCss } from "../utils";
 
 describe("polka dot patterns", () => {
 	test("polka dot pattern", async () => {

From d95e6ff0593697fa261a70bc5eea9073958d796a Mon Sep 17 00:00:00 2001
From: Max Kasperowicz <yet3.dev@gmail.com>
Date: Tue, 14 Jan 2025 02:49:27 +0100
Subject: [PATCH 04/12] test: add horizontal/vertical line patterns tests

---
 tests/patterns/lines.test.ts | 45 ++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 tests/patterns/lines.test.ts

diff --git a/tests/patterns/lines.test.ts b/tests/patterns/lines.test.ts
new file mode 100644
index 0000000..e8210ff
--- /dev/null
+++ b/tests/patterns/lines.test.ts
@@ -0,0 +1,45 @@
+import { describe, test } from "vitest";
+import { DEFAULT_OPTS } from "../../src/consts";
+import { css, expectCssToBe, generateTwCss } from "../utils";
+
+describe("lines patterns", () => {
+	test("horizontal lines pattern", async () => {
+		expectCssToBe(
+			await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-x-lines`),
+			css`.${DEFAULT_OPTS.prefix}pattern-x-lines {
+        --tw-line-size: 1;
+        --tw-spacing: 24;
+        --tw-offset-x: 0px;
+        --tw-offset-y: 0px;
+        --tw-line-color: #ffffff;
+        --tw-unit: calc(var(--tw-line-size) + var(--tw-spacing));
+        --tw-line-stop: calc((var(--tw-line-size) / var(--tw-unit)* 100%) / 2);
+        --tw-line-start-stop: calc(50% - var(--tw-line-stop));
+        --tw-line-end-stop: calc(50% + var(--tw-line-stop));
+        background-image: linear-gradient(0deg, transparent var(--tw-line-start-stop), var(--tw-line-color) var(--tw-line-start-stop), var(--tw-line-color) var(--tw-line-end-stop), transparent var(--tw-line-end-stop), transparent 100%);
+        background-size: calc(var(--tw-unit)* 1px) calc(var(--tw-unit)* 1px);
+        background-position: var(--tw-offset-x) var(--tw-offset-y)
+      }`,
+		);
+	});
+
+	test("vertical lines pattern", async () => {
+		expectCssToBe(
+			await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-y-lines`),
+			css`.${DEFAULT_OPTS.prefix}pattern-y-lines {
+        --tw-line-size: 1;
+        --tw-spacing: 24;
+        --tw-offset-x: 0px;
+        --tw-offset-y: 0px;
+        --tw-line-color: #ffffff;
+        --tw-unit: calc(var(--tw-line-size) + var(--tw-spacing));
+        --tw-line-stop: calc((var(--tw-line-size) / var(--tw-unit)* 100%) / 2);
+        --tw-line-start-stop: calc(50% - var(--tw-line-stop));
+        --tw-line-end-stop: calc(50% + var(--tw-line-stop));
+        background-image: linear-gradient(90deg, transparent var(--tw-line-start-stop), var(--tw-line-color) var(--tw-line-start-stop), var(--tw-line-color) var(--tw-line-end-stop), transparent var(--tw-line-end-stop), transparent 100%);
+        background-size: calc(var(--tw-unit)* 1px) calc(var(--tw-unit)* 1px);
+        background-position: var(--tw-offset-x) var(--tw-offset-y)
+      }`,
+		);
+	});
+});

From 8823b81961c43994d215c6a4afbfdda8132c48a9 Mon Sep 17 00:00:00 2001
From: Max Kasperowicz <yet3.dev@gmail.com>
Date: Tue, 14 Jan 2025 02:53:48 +0100
Subject: [PATCH 05/12] chore: add horizontal/vertical line patterns to the
 readme

---
 README.md          |  33 +++++++++++++++++++++++++++++++--
 public/x-lines.png | Bin 0 -> 12295 bytes
 public/y-lines.png | Bin 0 -> 18069 bytes
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 public/x-lines.png
 create mode 100644 public/y-lines.png

diff --git a/README.md b/README.md
index a4c71f5..d5ff063 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,8 @@ See a [live demo](https://yet3.github.io/tailwindcss-bg-patterns/)
 - [Config](#config)
 - [Example usage](#grid)
 - [Patterns](#patterns)
+  - [Horizontal lines](#horizontal-lines)
+  - [Vertical lines](#vertical-lines)
   - [Grid](#grid)
   - [Hatching](#hatching)
   - [Cross-Hatching](#cross-hatching)
@@ -79,7 +81,32 @@ this code will result in:
 
 ## Patterns
 
+### Horizontal lines
+
+See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#x-lines)
+
+```html
+<div
+  class="bg-blue-500 bg-pattern-x-lines bg-pattern-line-0.5 bg-pattern-spacing-32"
+/>
+```
+
+<img src="./public/x-lines.png" alt="Horizontal lines" height="200" />
+
+### Vertical lines
+
+See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#y-lines)
+
+```html
+<div
+  class="bg-blue-500 bg-pattern-y-lines bg-pattern-line-0.5 bg-pattern-spacing-32"
+/>
+```
+
+<img src="./public/y-lines.png" alt="Vertical lines" height="200" />
+
 ### Grid
+
 See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#grid)
 
 ```html
@@ -91,6 +118,7 @@ See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#grid)
 <img src="./public/grid.png" alt="Grid pattern" height="200" />
 
 ### Hatching
+
 See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hatching)
 
 ```html
@@ -102,6 +130,7 @@ See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hatching)
 <img src="./public/hatching.png" alt="Hatching pattern" height="200" />
 
 ### Cross-Hatching
+
 See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#cross-hatching)
 
 ```html
@@ -113,6 +142,7 @@ See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#cross-hatching
 <img src="./public/cross-hatching.png" alt="Cross-Hatching pattern" height="200" />
 
 ### Polka dot
+
 See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#polka-dot)
 
 ```html
@@ -124,6 +154,7 @@ See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#polka-dot)
 <img src="./public/polka-dot.png" alt="Polka dot pattern" height="200" />
 
 ### Hexagonal polka dot
+
 See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hexagonal-polka-dot)
 
 ```html
@@ -137,8 +168,6 @@ See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hexagonal-polk
 ## Todo
 
 - [ ] Add utility to adjust pattern opacity
-- [ ] Add pattern: horizontal-lines (x-lines?)
-- [ ] Add pattern: vertical-lines (y-lines?)
 - [ ] Add pattern: checkers
 - [ ] Add pattern: honeycomb
 - [ ] Add pattern: bricks
diff --git a/public/x-lines.png b/public/x-lines.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9d6b6d8c17306c9fd5d7d50a8dca527e83726c3
GIT binary patch
literal 12295
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

literal 0
HcmV?d00001

diff --git a/public/y-lines.png b/public/y-lines.png
new file mode 100644
index 0000000000000000000000000000000000000000..fccc8058e04ede0db6fbab5b2a9962c72b485bb8
GIT binary patch
literal 18069
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
GhyMfF%q6h^

literal 0
HcmV?d00001


From bf408c57af141721fa5c010078ee99d15088e16d Mon Sep 17 00:00:00 2001
From: Max Kasperowicz <yet3.dev@gmail.com>
Date: Tue, 14 Jan 2025 02:59:09 +0100
Subject: [PATCH 06/12] fix: escape lines classNames

---
 src/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index abd19ca..4d7b576 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -41,10 +41,10 @@ export default plugin.withOptions<IOptions | undefined>(
 				isHexagonal: true,
 			}),
 
-			generateLinesClass(`${opts.prefix}pattern-x-lines`, {
+			generateLinesClass(e(`${opts.prefix}pattern-x-lines`), {
 				angle: 0,
 			}),
-			generateLinesClass(`${opts.prefix}pattern-y-lines`, {
+			generateLinesClass(e(`${opts.prefix}pattern-y-lines`), {
 				angle: 90,
 			}),
 

From d6be9efbb4300312f78741fb4fda9b3643f3db3a Mon Sep 17 00:00:00 2001
From: Max Kasperowicz <yet3.dev@gmail.com>
Date: Tue, 14 Jan 2025 04:18:37 +0100
Subject: [PATCH 07/12] feat: add checkers pattern

---
 example/src/routes/+page.svelte | 18 ++++++++++
 src/consts.ts                   |  1 +
 src/index.ts                    | 10 +++++-
 src/lib/square.ts               | 62 +++++++++++++++++++++++++++++++++
 src/patterns/checkers.ts        | 40 +++++++++++++++++++++
 5 files changed, 130 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/square.ts
 create mode 100644 src/patterns/checkers.ts

diff --git a/example/src/routes/+page.svelte b/example/src/routes/+page.svelte
index 3a210d9..5b2e1f7 100644
--- a/example/src/routes/+page.svelte
+++ b/example/src/routes/+page.svelte
@@ -28,6 +28,18 @@
 		}
 	];
 
+	const SQUARE_CONFIGS: IPatternConfig[] = [
+		{
+			name: 'bg-pattern-square',
+			options: [
+				{ name: '-2', description: 'Squares width' },
+				{ name: '-[321]', description: 'Custom squares width (in px without unit)' },
+				{ name: '-red-500', description: 'Squares colors' },
+				{ name: '-[#a8a8a8]', description: 'Custom squares color' }
+			]
+		}
+	];
+
 	const SPACING_CONFIGS: IPatternConfig[] = [
 		{
 			name: 'bg-pattern-spacing',
@@ -67,6 +79,12 @@
 			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS],
 			class: 'bg-blue-500 bg-pattern-grid bg-pattern-line-0.5 bg-pattern-spacing-32'
 		},
+		{
+			id: 'checkers',
+			name: 'Checkers',
+			configClasses: SQUARE_CONFIGS,
+			class: 'bg-blue-500 bg-pattern-checkers bg-pattern-square-white bg-pattern-square-32'
+		},
 		{
 			id: 'hatching',
 			name: 'Hatching',
diff --git a/src/consts.ts b/src/consts.ts
index 6cdceb5..e6774d8 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -4,6 +4,7 @@ export const LINE_WIDTHS = [
 	0.5, 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 14, 15, 16,
 ];
 export const DOT_SIZES: number[] = [...Array(96)].map((_, i) => i + 1);
+export const SQUARE_SIZES: number[] = [...Array(96)].map((_, i) => i + 1);
 export const SPACING: number[] = [...Array(128 + 1)].map((_, i) => i);
 export const OFFSETS: number[] = [...Array(128 + 17)].map((_, i) => i);
 
diff --git a/src/index.ts b/src/index.ts
index 4d7b576..a2e929a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
 import plugin from "tailwindcss/plugin";
-import { DOT_SIZES, LINE_WIDTHS, OFFSETS, SPACING } from "./consts";
+import { DOT_SIZES, LINE_WIDTHS, OFFSETS, SPACING, SQUARE_SIZES } from "./consts";
 import { arrToTwConfig } from "./lib/arrToTwConfig";
 import {
 	generateDotColors,
@@ -14,6 +14,7 @@ import {
 import { generateOffsets, matchOffsets } from "./lib/offsets";
 import { resolveOptions } from "./lib/resolveOptions";
 import { generateSpacing, matchSpacing } from "./lib/spacing";
+import { generateCheckersClass } from "./patterns/checkers";
 import { generateGridClass } from "./patterns/grid";
 import {
 	generateHatchingClass,
@@ -22,6 +23,7 @@ import {
 import { generateLinesClass } from "./patterns/lines";
 import { generatePolkaDotClass } from "./patterns/polkaDot";
 import type { IOptions } from "./types";
+import { generateSquareColors, generateSuqareSize, matchSquareSizeAndColors } from "./lib/square";
 
 export default plugin.withOptions<IOptions | undefined>(
 	(options) => (api) => {
@@ -48,11 +50,15 @@ export default plugin.withOptions<IOptions | undefined>(
 				angle: 90,
 			}),
 
+			generateCheckersClass(e(`${opts.prefix}pattern-checkers`)),
+
 			// Configs
 			generateLineWidths(api, opts),
 			generateLineColors(api, opts),
 			generateDotSize(api, opts),
 			generateDotColors(api, opts),
+			generateSuqareSize(api, opts),
+			generateSquareColors(api, opts),
 			generateSpacing(api, opts),
 			genreateHatchingDirection(api, opts),
 			generateOffsets(api, opts),
@@ -62,6 +68,7 @@ export default plugin.withOptions<IOptions | undefined>(
 			...matchSpacing(api, opts),
 			...matchLineWidthsAndColors(api, opts),
 			...matchDotSizeAndColors(api, opts),
+			...matchSquareSizeAndColors(api, opts),
 			...matchOffsets(api, opts),
 		});
 	},
@@ -69,6 +76,7 @@ export default plugin.withOptions<IOptions | undefined>(
 		theme: {
 			bgPatternLineWidth: arrToTwConfig(LINE_WIDTHS),
 			bgPatternDotSize: arrToTwConfig(DOT_SIZES),
+			bgPatternSquareSize: arrToTwConfig(SQUARE_SIZES),
 			bgPatternSpacing: arrToTwConfig(SPACING),
 			bgPatternOffsets: arrToTwConfig(OFFSETS, "px"),
 		},
diff --git a/src/lib/square.ts b/src/lib/square.ts
new file mode 100644
index 0000000..b9474f5
--- /dev/null
+++ b/src/lib/square.ts
@@ -0,0 +1,62 @@
+import type { CSSRuleObject, PluginAPI } from "tailwindcss/types/config";
+import type { IOptions } from "../types";
+
+export const generateSquareColors = (
+	api: PluginAPI,
+	opts: IOptions,
+): CSSRuleObject => {
+	const colors = api.theme("backgroundColor");
+	const styles: Record<string, unknown> = {};
+
+	for (const colorKey in colors) {
+		const color = colors[colorKey] as string | Record<string, string>;
+
+		if (typeof color === "string") {
+			styles[`.${api.e(`${opts.prefix}pattern-square-${colorKey}`)}`] = {
+				"--tw-square-color": color,
+			} as unknown as CSSRuleObject;
+		} else {
+			for (const variant in color) {
+				styles[
+					`.${api.e(`${opts.prefix}pattern-square-${colorKey}-${variant}`)}`
+				] = {
+					"--tw-square-color": color[variant],
+				} as unknown as CSSRuleObject;
+			}
+		}
+	}
+
+	return styles as CSSRuleObject;
+};
+
+export const generateSuqareSize = (
+	api: PluginAPI,
+	opts: IOptions,
+): CSSRuleObject => {
+	const themeSquareSizes = api.theme("bgPatternSquareSize");
+	const styles: Record<string, unknown> = {};
+	if (themeSquareSizes) {
+		for (const key in themeSquareSizes) {
+			const width = themeSquareSizes[key] as number;
+			styles[`.${api.e(`${opts.prefix}pattern-square-${key}`)}`] = {
+				"--tw-square-size": `${width} /* px */`,
+			};
+		}
+	}
+	return styles as CSSRuleObject;
+};
+
+export const matchSquareSizeAndColors = (api: PluginAPI, opts: IOptions) => ({
+	[api.e(`${opts.prefix}pattern-square`)]: (value: string) => {
+		const parsed = Number(value);
+		if (!Number.isNaN(parsed)) {
+			return {
+				"--tw-square-size": `${value} /* px */`,
+			} as unknown as CSSRuleObject;
+		}
+
+		return {
+			"--tw-square-color": value,
+		} as unknown as CSSRuleObject;
+	},
+});
diff --git a/src/patterns/checkers.ts b/src/patterns/checkers.ts
new file mode 100644
index 0000000..f739a49
--- /dev/null
+++ b/src/patterns/checkers.ts
@@ -0,0 +1,40 @@
+import type { CSSRuleObject } from "tailwindcss/types/config";
+
+interface IOpts {
+	squareSize: number;
+	offsetX: number;
+	offsetY: number;
+
+	squareColor: string;
+}
+
+export const generateCheckersClass = (
+	className: string,
+	opts: IOpts = {
+		squareColor: "#ffffff",
+		squareSize: 32,
+		offsetX: 0,
+		offsetY: 0,
+	},
+): CSSRuleObject => {
+	return {
+		[`.${className}`]: {
+			"--tw-square-size": opts.squareSize.toString(),
+			"--tw-offset-x": `${opts.offsetX}px`,
+			"--tw-offset-y": `${opts.offsetY}px`,
+			"--tw-square-color": opts.squareColor,
+
+			"--tw-unit": "calc(var(--tw-square-size) * 1px)",
+			"--tw-total-size": "calc(var(--tw-unit) * 2)",
+			backgroundImage: `
+        linear-gradient(45deg, var(--tw-square-color) 25%, transparent 25%),
+        linear-gradient(-45deg, var(--tw-square-color) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, var(--tw-square-color) 75%),
+        linear-gradient(-45deg, transparent 75%, var(--tw-square-color) 75%)
+      `,
+			backgroundSize: "var(--tw-total-size) var(--tw-total-size)",
+			backgroundPosition:
+				"var(--tw-offset-x) var(--tw-offset-y), var(--tw-offset-x) calc(var(--tw-offset-y) + var(--tw-unit)), calc(var(--tw-offset-x) + var(--tw-unit)) calc(var(--tw-offset-y) - var(--tw-unit)), calc(var(--tw-offset-x) - var(--tw-unit)) var(--tw-offset-y)",
+		} as unknown as CSSRuleObject,
+	};
+};

From 71cb5bbcb35885ebe41af6a4930fe716a26ff366 Mon Sep 17 00:00:00 2001
From: Max Kasperowicz <yet3.dev@gmail.com>
Date: Tue, 14 Jan 2025 04:18:54 +0100
Subject: [PATCH 08/12] test: add checkers pattern tests

---
 tests/config.test.ts            | 55 +++++++++++++++++++++++++++++++++
 tests/consts.test.ts            |  5 +++
 tests/patterns/checkers.test.ts | 20 ++++++++++++
 3 files changed, 80 insertions(+)
 create mode 100644 tests/patterns/checkers.test.ts

diff --git a/tests/config.test.ts b/tests/config.test.ts
index fed5af1..caf7acb 100644
--- a/tests/config.test.ts
+++ b/tests/config.test.ts
@@ -5,6 +5,7 @@ import {
 	LINE_WIDTHS,
 	OFFSETS,
 	SPACING,
+  SQUARE_SIZES,
 } from "../src/consts";
 import { css, expectCssToBe, generateTwCss } from "./utils";
 
@@ -55,6 +56,31 @@ describe("dot sizes", () => {
 	});
 });
 
+describe("square sizes", () => {
+	test(`square sizes ${SQUARE_SIZES[0]}-${SQUARE_SIZES[SQUARE_SIZES.length - 1]}`, async () => {
+		const expected: string[] = [];
+		const classes: string[] = [];
+		for (const value of SQUARE_SIZES) {
+			classes.push(`${DEFAULT_OPTS.prefix}pattern-square-${value}`);
+			expected.push(
+				css`.${DEFAULT_OPTS.prefix}pattern-square-${value} {
+            --tw-square-size: ${value} /* px */
+        }`,
+			);
+		}
+		expectCssToBe(await generateTwCss(classes.join(" ")), expected.join(""));
+	});
+
+	test("custom square size", async () => {
+		expectCssToBe(
+			await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-square-[321]`),
+			css`.${DEFAULT_OPTS.prefix}pattern-square-[321] {
+          --tw-square-size: 321 /* px */
+        }`,
+		);
+	});
+});
+
 describe("spacing", () => {
 	test(`spacing ${SPACING[0]}-${SPACING[SPACING.length - 1]}`, async () => {
 		const expected: string[] = [];
@@ -174,3 +200,32 @@ describe("dot colors", () => {
 		);
 	});
 });
+
+describe("square colors", () => {
+	test("custom color", async () => {
+		expectCssToBe(
+			await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-square-[#f8f8f8]`),
+			css`.${DEFAULT_OPTS.prefix}pattern-square-[#f8f8f8] {
+        --tw-square-color: #f8f8f8
+    }`,
+		);
+	});
+
+	test("color with variant", async () => {
+		expectCssToBe(
+			await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-square-red-300`),
+			css`.${DEFAULT_OPTS.prefix}pattern-square-red-300 {
+        --tw-square-color: #fca5a5
+    }`,
+		);
+	});
+
+	test("color without variant", async () => {
+		expectCssToBe(
+			await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-square-white`),
+			css`.${DEFAULT_OPTS.prefix}pattern-square-white {
+        --tw-square-color: #fff
+    }`,
+		);
+	});
+});
diff --git a/tests/consts.test.ts b/tests/consts.test.ts
index e432ae0..206af97 100644
--- a/tests/consts.test.ts
+++ b/tests/consts.test.ts
@@ -5,6 +5,7 @@ import {
 	LINE_WIDTHS,
 	OFFSETS,
 	SPACING,
+  SQUARE_SIZES,
 } from "../src/consts";
 
 describe("default production values", () => {
@@ -23,6 +24,10 @@ describe("default production values", () => {
 		expect(DOT_SIZES).toEqual([...Array(96)].map((_, i) => i + 1));
 	});
 
+	test("square sizes", () => {
+		expect(SQUARE_SIZES).toEqual([...Array(96)].map((_, i) => i + 1));
+	});
+
 	test("offsets", () => {
 		expect(OFFSETS).toEqual([...Array(128 + 17)].map((_, i) => i));
 	});
diff --git a/tests/patterns/checkers.test.ts b/tests/patterns/checkers.test.ts
new file mode 100644
index 0000000..3d7ca1f
--- /dev/null
+++ b/tests/patterns/checkers.test.ts
@@ -0,0 +1,20 @@
+import { test } from "vitest";
+import { DEFAULT_OPTS } from "../../src/consts";
+import { css, expectCssToBe, generateTwCss } from "../utils";
+
+test("checkers pattern", async () => {
+	expectCssToBe(
+		await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-checkers`),
+		css`.${DEFAULT_OPTS.prefix}pattern-checkers {
+      --tw-square-size: 32;
+      --tw-offset-x: 0px;
+      --tw-offset-y: 0px;
+      --tw-square-color: #ffffff;
+      --tw-unit: calc(var(--tw-square-size)* 1px);
+      --tw-total-size: calc(var(--tw-unit)* 2);
+      background-image: linear-gradient(45deg, var(--tw-square-color) 25%, transparent 25%), linear-gradient(-45deg, var(--tw-square-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--tw-square-color) 75%), linear-gradient(-45deg, transparent 75%, var(--tw-square-color) 75%);
+      background-size: var(--tw-total-size) var(--tw-total-size);
+      background-position: var(--tw-offset-x) var(--tw-offset-y), var(--tw-offset-x) calc(var(--tw-offset-y) + var(--tw-unit)), calc(var(--tw-offset-x) + var(--tw-unit)) calc(var(--tw-offset-y) - var(--tw-unit)), calc(var(--tw-offset-x) - var(--tw-unit)) var(--tw-offset-y)
+    }`,
+	);
+});

From 91701f5fe2690941f6701cf3586a5e2ecb634cec Mon Sep 17 00:00:00 2001
From: Max Kasperowicz <yet3.dev@gmail.com>
Date: Tue, 14 Jan 2025 04:19:00 +0100
Subject: [PATCH 09/12] chore: add checkers pattern to readme

---
 README.md           |  14 +++++++++++++-
 public/checkers.png | Bin 0 -> 20670 bytes
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 public/checkers.png

diff --git a/README.md b/README.md
index d5ff063..3a87e7e 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,7 @@ See a [live demo](https://yet3.github.io/tailwindcss-bg-patterns/)
   - [Horizontal lines](#horizontal-lines)
   - [Vertical lines](#vertical-lines)
   - [Grid](#grid)
+  - [Checkers](#checkers)
   - [Hatching](#hatching)
   - [Cross-Hatching](#cross-hatching)
   - [Polka dot](#polka-dot)
@@ -117,6 +118,18 @@ See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#grid)
 
 <img src="./public/grid.png" alt="Grid pattern" height="200" />
 
+### Checkers
+
+See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#checkers)
+
+```html
+<div
+  class="bg-blue-500 bg-pattern-checkers bg-pattern-square-white bg-pattern-square-32"
+/>
+```
+
+<img src="./public/checkers.png" alt="Checkers pattern" height="200" />
+
 ### Hatching
 
 See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hatching)
@@ -168,7 +181,6 @@ See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hexagonal-polk
 ## Todo
 
 - [ ] Add utility to adjust pattern opacity
-- [ ] Add pattern: checkers
 - [ ] Add pattern: honeycomb
 - [ ] Add pattern: bricks
 
diff --git a/public/checkers.png b/public/checkers.png
new file mode 100644
index 0000000000000000000000000000000000000000..981c2c3638fafaec3a68b66c5d42cf088387440b
GIT binary patch
literal 20670
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

literal 0
HcmV?d00001


From 33d37dc2227b9291c316e5d0ad0fb0c791273475 Mon Sep 17 00:00:00 2001
From: Max Kasperowicz <yet3.dev@gmail.com>
Date: Tue, 14 Jan 2025 04:41:20 +0100
Subject: [PATCH 10/12] feat: add negative offsets

---
 example/src/routes/+page.svelte | 33 +++++++++++++++++++++++++--------
 src/lib/offsets.ts              |  7 +++++++
 src/patterns/grid.ts            |  4 ++--
 src/patterns/hatching.ts        |  4 ++--
 src/patterns/lines.ts           |  4 ++--
 src/patterns/polkaDot.ts        |  4 ++--
 tests/config.test.ts            | 14 +++++++++-----
 7 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/example/src/routes/+page.svelte b/example/src/routes/+page.svelte
index 5b2e1f7..683d92e 100644
--- a/example/src/routes/+page.svelte
+++ b/example/src/routes/+page.svelte
@@ -16,6 +16,23 @@
 		}
 	];
 
+	const OFFSETS_CONFIGS: IPatternConfig[] = [
+		{
+			name: 'bg-pattern-offset-x',
+			options: [
+				{ name: '-2', description: 'Offset x' },
+				{ name: '-[321px]', description: 'Custom offset x' }
+			]
+		},
+		{
+			name: 'bg-pattern-offset-y',
+			options: [
+				{ name: '-2', description: 'Offset x' },
+				{ name: '-[321px]', description: 'Custom offset x' }
+			]
+		}
+	];
+
 	const DOT_CONFIGS: IPatternConfig[] = [
 		{
 			name: 'bg-pattern-dot',
@@ -64,51 +81,51 @@
 		{
 			id: 'x-lines',
 			name: 'Horizontal lines',
-			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS],
+			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS],
 			class: 'bg-blue-500 bg-pattern-x-lines bg-pattern-line-0.5 bg-pattern-spacing-20'
 		},
 		{
 			id: 'y-lines',
 			name: 'Vertical lines',
-			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS],
+			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS],
 			class: 'bg-blue-500 bg-pattern-y-lines bg-pattern-line-0.5 bg-pattern-spacing-32'
 		},
 		{
 			id: 'grid',
 			name: 'Grid',
-			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS],
+			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS],
 			class: 'bg-blue-500 bg-pattern-grid bg-pattern-line-0.5 bg-pattern-spacing-32'
 		},
 		{
 			id: 'checkers',
 			name: 'Checkers',
-			configClasses: SQUARE_CONFIGS,
+			configClasses: [...SQUARE_CONFIGS, ...OFFSETS_CONFIGS],
 			class: 'bg-blue-500 bg-pattern-checkers bg-pattern-square-white bg-pattern-square-32'
 		},
 		{
 			id: 'hatching',
 			name: 'Hatching',
-			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...HATCHING_DIRECTION_CONFIGS],
+			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...HATCHING_DIRECTION_CONFIGS, ...OFFSETS_CONFIGS],
 			class:
 				'bg-blue-500 bg-pattern-hatching bg-pattern-line-0.5 bg-pattern-spacing-16 bg-pattern-hatching-left-to-right'
 		},
 		{
 			id: 'cross-hatching',
 			name: 'Cross-Hatching',
-			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...HATCHING_DIRECTION_CONFIGS],
+			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...HATCHING_DIRECTION_CONFIGS, ...OFFSETS_CONFIGS],
 			class: 'bg-blue-500 bg-pattern-cross-hatching bg-pattern-line-0.5 bg-pattern-spacing-16'
 		},
 		{
 			id: 'polka-dot',
 			name: 'Polka dot',
-			configClasses: [...DOT_CONFIGS, ...SPACING_CONFIGS],
+			configClasses: [...DOT_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS],
 			class:
 				'bg-blue-500 bg-pattern-polka-dot bg-pattern-dot-white bg-pattern-dot-8 bg-pattern-spacing-32'
 		},
 		{
 			id: 'hexagonal-polka-dot',
 			name: 'Hexagonal polka dot',
-			configClasses: [...DOT_CONFIGS, ...SPACING_CONFIGS],
+			configClasses: [...DOT_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS],
 			class:
 				'bg-blue-500 bg-pattern-hex-polka-dot bg-pattern-dot-white bg-pattern-dot-8 bg-pattern-spacing-32'
 		}
diff --git a/src/lib/offsets.ts b/src/lib/offsets.ts
index 13f1201..f989e6b 100644
--- a/src/lib/offsets.ts
+++ b/src/lib/offsets.ts
@@ -16,6 +16,13 @@ export const generateOffsets = (
 			styles[`.${api.e(`${opts.prefix}pattern-offset-y-${key}`)}`] = {
 				"--tw-offset-y": offset,
 			} as unknown as CSSRuleObject;
+
+			styles[`.${api.e(`-${opts.prefix}pattern-offset-x-${key}`)}`] = {
+				"--tw-offset-x": `-${offset}`,
+			} as unknown as CSSRuleObject;
+			styles[`.${api.e(`-${opts.prefix}pattern-offset-y-${key}`)}`] = {
+				"--tw-offset-y": `-${offset}`,
+			} as unknown as CSSRuleObject;
 		}
 	}
 	return styles as CSSRuleObject;
diff --git a/src/patterns/grid.ts b/src/patterns/grid.ts
index be6a01d..24034a9 100644
--- a/src/patterns/grid.ts
+++ b/src/patterns/grid.ts
@@ -23,8 +23,8 @@ export const generateGridClass = (
 		[`.${className}`]: {
 			"--tw-line-size": opts.lineSize.toString(),
 			"--tw-spacing": opts.spacing.toString(),
-			"--tw-offset-x": `${opts.offsetX * -1}px`,
-			"--tw-offset-y": `${opts.offsetY * -1}px`,
+			"--tw-offset-x": `${opts.offsetX}px`,
+			"--tw-offset-y": `${opts.offsetY}px`,
 			"--tw-line-color": opts.lineColor,
 
 			"--tw-unit": "calc(var(--tw-line-size) + var(--tw-spacing))",
diff --git a/src/patterns/hatching.ts b/src/patterns/hatching.ts
index 22ff01a..68b6085 100644
--- a/src/patterns/hatching.ts
+++ b/src/patterns/hatching.ts
@@ -67,8 +67,8 @@ export const generateHatchingClass = (
 		[`.${className}`]: {
 			"--tw-line-size": opts.lineSize.toString(),
 			"--tw-spacing": opts.spacing.toString(),
-			"--tw-offset-x": `${opts.offsetX * -1}px`,
-			"--tw-offset-y": `${opts.offsetY * -1}px`,
+			"--tw-offset-x": `${opts.offsetX}px`,
+			"--tw-offset-y": `${opts.offsetY}px`,
 			"--tw-hatching-angle": `${opts.isRightLeaning ? -45 : 45}deg`,
 			"--tw-line-color": opts.lineColor,
 
diff --git a/src/patterns/lines.ts b/src/patterns/lines.ts
index 8c1578c..8c79e41 100644
--- a/src/patterns/lines.ts
+++ b/src/patterns/lines.ts
@@ -29,8 +29,8 @@ export const generateLinesClass = (
 		[`.${className}`]: {
 			"--tw-line-size": opts.lineSize.toString(),
 			"--tw-spacing": opts.spacing.toString(),
-			"--tw-offset-x": `${opts.offsetX * -1}px`,
-			"--tw-offset-y": `${opts.offsetY * -1}px`,
+			"--tw-offset-x": `${opts.offsetX}px`,
+			"--tw-offset-y": `${opts.offsetY}px`,
 			"--tw-line-color": opts.lineColor,
 
 			"--tw-unit": "calc(var(--tw-line-size) + var(--tw-spacing))",
diff --git a/src/patterns/polkaDot.ts b/src/patterns/polkaDot.ts
index f255033..9c69c55 100644
--- a/src/patterns/polkaDot.ts
+++ b/src/patterns/polkaDot.ts
@@ -52,8 +52,8 @@ export const generatePolkaDotClass = (
 		[`.${className}`]: {
 			"--tw-dot-size": opts.dotSize.toString(),
 			"--tw-spacing": opts.spacing.toString(),
-			"--tw-offset-x": `${opts.offsetX * -1}px`,
-			"--tw-offset-y": `${opts.offsetY * -1}px`,
+			"--tw-offset-x": `${opts.offsetX}px`,
+			"--tw-offset-y": `${opts.offsetY}px`,
 			"--tw-dot-color": opts.dotColor,
 
 			...varsCode,
diff --git a/tests/config.test.ts b/tests/config.test.ts
index caf7acb..85c8330 100644
--- a/tests/config.test.ts
+++ b/tests/config.test.ts
@@ -5,7 +5,7 @@ import {
 	LINE_WIDTHS,
 	OFFSETS,
 	SPACING,
-  SQUARE_SIZES,
+	SQUARE_SIZES,
 } from "../src/consts";
 import { css, expectCssToBe, generateTwCss } from "./utils";
 
@@ -112,7 +112,7 @@ describe("offsets", () => {
 		const classes: string[] = [];
 		for (const offset of OFFSETS) {
 			classes.push(
-				`${DEFAULT_OPTS.prefix}pattern-offset-x-${offset} ${DEFAULT_OPTS.prefix}pattern-offset-y-${offset}`,
+				`${DEFAULT_OPTS.prefix}pattern-offset-x-${offset} ${DEFAULT_OPTS.prefix}pattern-offset-y-${offset} -${DEFAULT_OPTS.prefix}pattern-offset-x-${offset} -${DEFAULT_OPTS.prefix}pattern-offset-y-${offset} `,
 			);
 			expected.push(
 				css`.${DEFAULT_OPTS.prefix}pattern-offset-x-${offset} {
@@ -120,6 +120,12 @@ describe("offsets", () => {
 		     }
 		     .${DEFAULT_OPTS.prefix}pattern-offset-y-${offset} {
 		         --tw-offset-y: ${offset}px
+		     }
+        .-${DEFAULT_OPTS.prefix}pattern-offset-x-${offset} {
+		         --tw-offset-x: -${offset}px
+		     }
+        .-${DEFAULT_OPTS.prefix}pattern-offset-y-${offset} {
+		         --tw-offset-y: -${offset}px
 		     }`,
 			);
 		}
@@ -136,8 +142,7 @@ describe("offsets", () => {
         }
         .${DEFAULT_OPTS.prefix}pattern-offset-y-[321px] {
           --tw-offset-y: 321px
-        }
-      `,
+        }`,
 		);
 	});
 });
@@ -171,7 +176,6 @@ describe("line colors", () => {
 	});
 });
 
-
 describe("dot colors", () => {
 	test("custom color", async () => {
 		expectCssToBe(

From 15bcc589f540774ba53c73ee5a19a71bd1a7bf85 Mon Sep 17 00:00:00 2001
From: Max Kasperowicz <yet3.dev@gmail.com>
Date: Tue, 14 Jan 2025 04:41:33 +0100
Subject: [PATCH 11/12] doc: add mention of pattern offsets

---
 README.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/README.md b/README.md
index 3a87e7e..eeaadbe 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,7 @@ See a [live demo](https://yet3.github.io/tailwindcss-bg-patterns/)
 - [Installation](#installation)
 - [Config](#config)
 - [Example usage](#grid)
+- [Pattern offsets](#pattern-offsets)
 - [Patterns](#patterns)
   - [Horizontal lines](#horizontal-lines)
   - [Vertical lines](#vertical-lines)
@@ -80,8 +81,14 @@ this code will result in:
 
 <img src="./public/grid.png" alt="Grid pattern" height="200" />
 
+## Pattern offsets
+Each pattern can be offset using ``bg-pattern-offset-x`` and ``bg-pattern-offset-y``
+
+Offset also accept arbritary values ``bg-pattern-offset-x-[321px]`` as well as negative values ``-bg-pattern-offset-y-24``
+
 ## Patterns
 
+
 ### Horizontal lines
 
 See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#x-lines)

From 7d5c4a8930d2b05be75ce5fd598fb9f61f0ad878 Mon Sep 17 00:00:00 2001
From: Max Kasperowicz <yet3.dev@gmail.com>
Date: Tue, 14 Jan 2025 04:42:08 +0100
Subject: [PATCH 12/12] chore: bump package version to 2.2.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4ee9296..51690f8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@yet3/tailwindcss-bg-patterns",
-	"version": "2.1.0",
+	"version": "2.2.0",
 	"author": "yet3",
 	"description": "TailwindCSS plugin that css background patterns",
 	"license": "MIT",