diff --git a/src/__tests__/tv.test.ts b/src/__tests__/tv.test.ts
index 6c0fdc2..200f232 100644
--- a/src/__tests__/tv.test.ts
+++ b/src/__tests__/tv.test.ts
@@ -1,6 +1,6 @@
-import {expect, describe, test} from "@jest/globals";
+import { expect, describe, test } from "@jest/globals";
 
-import {tv, cn} from "../index";
+import { tv, cn } from "../index";
 
 const COMMON_UNITS = ["small", "medium", "large"];
 
@@ -13,8 +13,8 @@ const twMergeConfig = {
       borderRadius: COMMON_UNITS,
     },
     classGroups: {
-      shadow: [{shadow: COMMON_UNITS}],
-      "font-size": [{text: ["tiny", ...COMMON_UNITS]}],
+      shadow: [{ shadow: COMMON_UNITS }],
+      "font-size": [{ text: ["tiny", ...COMMON_UNITS] }],
       "bg-image": ["bg-stripe-gradient"],
       "min-w": [
         {
@@ -53,7 +53,7 @@ describe("Tailwind Variants (TV) - Default", () => {
       },
     });
 
-    const {base, item} = menu({color: "primary"});
+    const { base, item } = menu({ color: "primary" });
 
     expect(base()).toHaveClass(["base--styles-1", "base--styles-2", "base--styles-3"]);
     expect(item()).toHaveClass([
@@ -64,12 +64,12 @@ describe("Tailwind Variants (TV) - Default", () => {
       "item--color--primary-2",
       "item--color--primary-3",
     ]);
-    expect(popover({isOpen: true})).toHaveClass([
+    expect(popover({ isOpen: true })).toHaveClass([
       "isOpen--true-1",
       "isOpen--true-2",
       "isOpen--true-3",
     ]);
-    expect(popover({isOpen: false})).toHaveClass([
+    expect(popover({ isOpen: false })).toHaveClass([
       "isOpen--false-1",
       "isOpen--false-2",
       "isOpen--false-3",
@@ -291,7 +291,7 @@ describe("Tailwind Variants (TV) - Default", () => {
       "button--secondary-small",
     ];
 
-    expect(button({variant: "secondary", size: "small", isDisabled: false})).toHaveClass(
+    expect(button({ variant: "secondary", size: "small", isDisabled: false })).toHaveClass(
       expectedResult,
     );
   });
@@ -314,7 +314,7 @@ describe("Tailwind Variants (TV) - Default", () => {
 
     const expectedResult = "text-3xl font-bold text-green-500 no-underline";
 
-    expect(h1({color: "green", isUnderline: false})).toBe(expectedResult);
+    expect(h1({ color: "green", isUnderline: false })).toBe(expectedResult);
   });
 
   test("should support boolean variants", () => {
@@ -329,9 +329,9 @@ describe("Tailwind Variants (TV) - Default", () => {
     });
 
     expect(h1()).toHaveClass(["text-3xl", "truncate"]);
-    expect(h1({bool: true})).toHaveClass(["text-3xl", "underline"]);
-    expect(h1({bool: false})).toHaveClass(["text-3xl", "truncate"]);
-    expect(h1({bool: undefined})).toHaveClass(["text-3xl", "truncate"]);
+    expect(h1({ bool: true })).toHaveClass(["text-3xl", "underline"]);
+    expect(h1({ bool: false })).toHaveClass(["text-3xl", "truncate"]);
+    expect(h1({ bool: undefined })).toHaveClass(["text-3xl", "truncate"]);
   });
 
   test("should support false only variant", () => {
@@ -345,9 +345,9 @@ describe("Tailwind Variants (TV) - Default", () => {
     });
 
     expect(h1()).toHaveClass(["text-3xl", "truncate"]);
-    expect(h1({bool: true})).toHaveClass(["text-3xl"]);
-    expect(h1({bool: false})).toHaveClass(["text-3xl", "truncate"]);
-    expect(h1({bool: undefined})).toHaveClass(["text-3xl", "truncate"]);
+    expect(h1({ bool: true })).toHaveClass(["text-3xl"]);
+    expect(h1({ bool: false })).toHaveClass(["text-3xl", "truncate"]);
+    expect(h1({ bool: undefined })).toHaveClass(["text-3xl", "truncate"]);
   });
 
   test("should support false only variant -- default variant", () => {
@@ -364,9 +364,9 @@ describe("Tailwind Variants (TV) - Default", () => {
     });
 
     expect(h1()).toHaveClass(["text-3xl"]);
-    expect(h1({bool: true})).toHaveClass(["text-3xl"]);
-    expect(h1({bool: false})).toHaveClass(["text-3xl", "truncate"]);
-    expect(h1({bool: undefined})).toHaveClass(["text-3xl"]);
+    expect(h1({ bool: true })).toHaveClass(["text-3xl"]);
+    expect(h1({ bool: false })).toHaveClass(["text-3xl", "truncate"]);
+    expect(h1({ bool: undefined })).toHaveClass(["text-3xl"]);
   });
 
   test("should support boolean variants -- default variants", () => {
@@ -384,9 +384,9 @@ describe("Tailwind Variants (TV) - Default", () => {
     });
 
     expect(h1()).toHaveClass(["text-3xl", "underline"]);
-    expect(h1({bool: true})).toHaveClass(["text-3xl", "underline"]);
-    expect(h1({bool: false})).toHaveClass(["text-3xl", "truncate"]);
-    expect(h1({bool: undefined})).toHaveClass(["text-3xl", "underline"]);
+    expect(h1({ bool: true })).toHaveClass(["text-3xl", "underline"]);
+    expect(h1({ bool: false })).toHaveClass(["text-3xl", "truncate"]);
+    expect(h1({ bool: undefined })).toHaveClass(["text-3xl", "underline"]);
   });
 
   test("should support boolean variants -- missing false variant", () => {
@@ -400,9 +400,9 @@ describe("Tailwind Variants (TV) - Default", () => {
     });
 
     expect(h1()).toHaveClass(["text-3xl"]);
-    expect(h1({bool: true})).toHaveClass(["text-3xl", "underline"]);
-    expect(h1({bool: false})).toHaveClass(["text-3xl"]);
-    expect(h1({bool: undefined})).toHaveClass(["text-3xl"]);
+    expect(h1({ bool: true })).toHaveClass(["text-3xl", "underline"]);
+    expect(h1({ bool: false })).toHaveClass(["text-3xl"]);
+    expect(h1({ bool: undefined })).toHaveClass(["text-3xl"]);
   });
 
   test("should support boolean variants -- missing false variant -- default variants", () => {
@@ -419,9 +419,9 @@ describe("Tailwind Variants (TV) - Default", () => {
     });
 
     expect(h1()).toHaveClass(["text-3xl", "underline"]);
-    expect(h1({bool: true})).toHaveClass(["text-3xl", "underline"]);
-    expect(h1({bool: false})).toHaveClass(["text-3xl"]);
-    expect(h1({bool: undefined})).toHaveClass(["text-3xl", "underline"]);
+    expect(h1({ bool: true })).toHaveClass(["text-3xl", "underline"]);
+    expect(h1({ bool: false })).toHaveClass(["text-3xl"]);
+    expect(h1({ bool: undefined })).toHaveClass(["text-3xl", "underline"]);
   });
 });
 
@@ -469,7 +469,7 @@ describe("Tailwind Variants (TV) - Slots", () => {
     });
 
     // with default values
-    const {base, title, item, list, wrapper} = menu();
+    const { base, title, item, list, wrapper } = menu();
 
     expect(base()).toHaveClass([
       "text-3xl",
@@ -494,7 +494,7 @@ describe("Tailwind Variants (TV) - Slots", () => {
       },
     });
 
-    const {base, title, item, list} = menu();
+    const { base, title, item, list } = menu();
 
     const expectedResult = undefined;
 
@@ -553,30 +553,30 @@ describe("Tailwind Variants (TV) - Slots", () => {
     });
 
     // with default values
-    const {base, title, item, list, wrapper} = menu();
+    const { base, title, item, list, wrapper } = menu();
 
     // base
-    expect(base({class: "text-lg"})).toHaveClass([
+    expect(base({ class: "text-lg" })).toHaveClass([
       "font-bold",
       "underline",
       "bg-blue-500",
       "text-lg",
     ]);
-    expect(base({className: "text-lg"})).toHaveClass([
+    expect(base({ className: "text-lg" })).toHaveClass([
       "font-bold",
       "underline",
       "bg-blue-500",
       "text-lg",
     ]);
     // title
-    expect(title({class: "text-2xl"})).toHaveClass(["text-2xl"]);
-    expect(title({className: "text-2xl"})).toHaveClass(["text-2xl"]);
+    expect(title({ class: "text-2xl" })).toHaveClass(["text-2xl"]);
+    expect(title({ className: "text-2xl" })).toHaveClass(["text-2xl"]);
     // item
-    expect(item({class: "text-sm"})).toHaveClass(["text-sm", "opacity-100"]);
-    expect(list({className: "bg-blue-50"})).toHaveClass(["list-none", "bg-blue-50"]);
+    expect(item({ class: "text-sm" })).toHaveClass(["text-sm", "opacity-100"]);
+    expect(list({ className: "bg-blue-50" })).toHaveClass(["list-none", "bg-blue-50"]);
     // list
-    expect(wrapper({class: "flex-row"})).toHaveClass(["flex", "flex-row"]);
-    expect(wrapper({className: "flex-row"})).toHaveClass(["flex", "flex-row"]);
+    expect(wrapper({ class: "flex-row" })).toHaveClass(["flex", "flex-row"]);
+    expect(wrapper({ className: "flex-row" })).toHaveClass(["flex", "flex-row"]);
   });
 
   test("should work with slots -- custom variants", () => {
@@ -623,7 +623,7 @@ describe("Tailwind Variants (TV) - Slots", () => {
     });
 
     // with custom props
-    const {base, title, item, list, wrapper} = menu({
+    const { base, title, item, list, wrapper } = menu({
       color: "secondary",
       size: "md",
     });
@@ -685,34 +685,34 @@ describe("Tailwind Variants (TV) - Slots", () => {
     });
 
     // with default values
-    const {base, title, item, list, wrapper} = menu({
+    const { base, title, item, list, wrapper } = menu({
       color: "secondary",
       size: "md",
     });
 
     // base
-    expect(base({class: "text-xl"})).toHaveClass(["text-xl", "font-bold", "underline"]);
-    expect(base({className: "text-xl"})).toHaveClass(["text-xl", "font-bold", "underline"]);
+    expect(base({ class: "text-xl" })).toHaveClass(["text-xl", "font-bold", "underline"]);
+    expect(base({ className: "text-xl" })).toHaveClass(["text-xl", "font-bold", "underline"]);
     // title
-    expect(title({class: "text-2xl"})).toHaveClass(["text-2xl", "text-white"]);
-    expect(title({className: "text-2xl"})).toHaveClass(["text-2xl", "text-white"]);
+    expect(title({ class: "text-2xl" })).toHaveClass(["text-2xl", "text-white"]);
+    expect(title({ className: "text-2xl" })).toHaveClass(["text-2xl", "text-white"]);
     //item
-    expect(item({class: "bg-purple-50"})).toHaveClass(["text-xl", "bg-purple-50", "opacity-100"]);
-    expect(item({className: "bg-purple-50"})).toHaveClass([
+    expect(item({ class: "bg-purple-50" })).toHaveClass(["text-xl", "bg-purple-50", "opacity-100"]);
+    expect(item({ className: "bg-purple-50" })).toHaveClass([
       "text-xl",
       "bg-purple-50",
       "opacity-100",
     ]);
     // list
-    expect(list({class: "bg-purple-100"})).toHaveClass(["list-none", "bg-purple-100"]);
-    expect(list({className: "bg-purple-100"})).toHaveClass(["list-none", "bg-purple-100"]);
+    expect(list({ class: "bg-purple-100" })).toHaveClass(["list-none", "bg-purple-100"]);
+    expect(list({ className: "bg-purple-100" })).toHaveClass(["list-none", "bg-purple-100"]);
     // wrapper
-    expect(wrapper({class: "bg-purple-900 flex-row"})).toHaveClass([
+    expect(wrapper({ class: "bg-purple-900 flex-row" })).toHaveClass([
       "flex",
       "bg-purple-900",
       "flex-row",
     ]);
-    expect(wrapper({className: "bg-purple-900 flex-row"})).toHaveClass([
+    expect(wrapper({ className: "bg-purple-900 flex-row" })).toHaveClass([
       "flex",
       "bg-purple-900",
       "flex-row",
@@ -776,7 +776,7 @@ describe("Tailwind Variants (TV) - Slots", () => {
       ],
     });
 
-    const {base, title, item, list, wrapper} = menu({
+    const { base, title, item, list, wrapper } = menu({
       color: "secondary",
       size: "md",
     });
@@ -832,12 +832,12 @@ describe("Tailwind Variants (TV) - Slots", () => {
       },
     });
 
-    const {base, title} = menu();
+    const { base, title } = menu();
 
     expect(base()).toHaveClass(["text-3xl", "color--primary-base"]);
     expect(title()).toHaveClass(["text-2xl", "color--primary-title"]);
-    expect(base({color: "secondary"})).toHaveClass(["text-3xl", "color--secondary-base"]);
-    expect(title({color: "secondary"})).toHaveClass(["text-2xl", "color--secondary-title"]);
+    expect(base({ color: "secondary" })).toHaveClass(["text-3xl", "color--secondary-base"]);
+    expect(title({ color: "secondary" })).toHaveClass(["text-2xl", "color--secondary-title"]);
   });
 
   test("should support slot level variant overrides - compoundSlots", () => {
@@ -873,18 +873,18 @@ describe("Tailwind Variants (TV) - Slots", () => {
       },
     });
 
-    const {base, title, subtitle} = menu();
+    const { base, title, subtitle } = menu();
 
     expect(base()).toHaveClass(["text-3xl", "color--primary-base"]);
     expect(title()).toHaveClass(["text-2xl", "color--primary-title"]);
     expect(subtitle()).toHaveClass(["text-xl", "color--primary-subtitle"]);
-    expect(base({color: "secondary"})).toHaveClass(["text-3xl", "color--secondary-base"]);
-    expect(title({color: "secondary"})).toHaveClass([
+    expect(base({ color: "secondary" })).toHaveClass(["text-3xl", "color--secondary-base"]);
+    expect(title({ color: "secondary" })).toHaveClass([
       "text-2xl",
       "color--secondary-title",
       "truncate",
     ]);
-    expect(subtitle({color: "secondary"})).toHaveClass([
+    expect(subtitle({ color: "secondary" })).toHaveClass([
       "text-xl",
       "color--secondary-subtitle",
       "truncate",
@@ -912,11 +912,11 @@ describe("Tailwind Variants (TV) - Slots", () => {
       ],
     });
 
-    const {base, cursor} = menu();
+    const { base, cursor } = menu();
 
     expect(base()).toEqual("flex flex-wrap");
-    expect(base({size: "xs"})).toEqual("flex flex-wrap w-7 h-7 text-xs");
-    expect(base({size: "sm"})).toEqual("flex flex-wrap w-7 h-7 text-xs");
+    expect(base({ size: "xs" })).toEqual("flex flex-wrap w-7 h-7 text-xs");
+    expect(base({ size: "sm" })).toEqual("flex flex-wrap w-7 h-7 text-xs");
     expect(cursor()).toEqual("absolute flex overflow-visible");
   });
 
@@ -1004,7 +1004,7 @@ describe("Tailwind Variants (TV) - Slots", () => {
       ],
     });
 
-    const {tab, tabList, cursor} = tabs();
+    const { tab, tabList, cursor } = tabs();
 
     expect(tab()).toHaveClass([
       "z-0",
@@ -1106,7 +1106,7 @@ describe("Tailwind Variants (TV) - Slots", () => {
       ],
     });
 
-    const {tab, tabList, cursor} = tabs({variant: "underlined"});
+    const { tab, tabList, cursor } = tabs({ variant: "underlined" });
 
     expect(tab()).toHaveClass([
       "z-0",
@@ -1155,12 +1155,12 @@ describe("Tailwind Variants (TV) - Slots", () => {
       },
     });
 
-    const {base, title} = menu();
+    const { base, title } = menu();
 
     expect(base()).toHaveClass(["text-3xl", "color--primary-base"]);
     expect(title()).toHaveClass(["text-2xl", "color--primary-title"]);
-    expect(base({color: "secondary"})).toHaveClass(["text-3xl", "color--secondary-base"]);
-    expect(title({color: "secondary"})).toHaveClass([
+    expect(base({ color: "secondary" })).toHaveClass(["text-3xl", "color--secondary-base"]);
+    expect(title({ color: "secondary" })).toHaveClass([
       "text-2xl",
       "color--secondary-title",
       "truncate",
@@ -1186,7 +1186,7 @@ describe("Tailwind Variants (TV) - Compound Slots", () => {
       ],
     });
     // with default values
-    const {base, item, prev, next, cursor} = pagination();
+    const { base, item, prev, next, cursor } = pagination();
 
     expect(base()).toHaveClass(["flex", "flex-wrap", "relative", "gap-1", "max-w-fit"]);
     expect(item()).toHaveClass(["flex", "flex-wrap", "truncate"]);
@@ -1229,7 +1229,7 @@ describe("Tailwind Variants (TV) - Compound Slots", () => {
       },
     });
     // with default values
-    const {base, item, prev, next, cursor} = pagination();
+    const { base, item, prev, next, cursor } = pagination();
 
     expect(base()).toHaveClass(["flex", "flex-wrap", "relative", "gap-1", "max-w-fit"]);
     expect(item()).toHaveClass(["flex", "flex-wrap", "truncate", "w-7", "h-7", "text-xs"]);
@@ -1272,7 +1272,7 @@ describe("Tailwind Variants (TV) - Compound Slots", () => {
       },
     });
     // with default values
-    const {base, item, prev, next, cursor} = pagination({
+    const { base, item, prev, next, cursor } = pagination({
       size: "xs",
     });
 
@@ -1308,13 +1308,13 @@ describe("Tailwind Variants (TV) - Compound Slots", () => {
       ],
     });
 
-    let styles = nav({isActive: false});
+    let styles = nav({ isActive: false });
 
     expect(styles.base()).toHaveClass(["base"]);
     expect(styles.toggle()).toHaveClass(["slot--toggle", "compound--item-toggle"]);
     expect(styles.item()).toHaveClass(["slot--item", "compound--item-toggle"]);
 
-    styles = nav({isActive: true});
+    styles = nav({ isActive: true });
 
     expect(styles.base()).toHaveClass(["base"]);
     expect(styles.toggle()).toHaveClass([
@@ -1374,7 +1374,7 @@ describe("Tailwind Variants (TV) - Compound Slots", () => {
       },
     });
     // with default values
-    const {base, item, prev, next, cursor} = pagination();
+    const { base, item, prev, next, cursor } = pagination();
 
     expect(base()).toHaveClass(["flex", "flex-wrap", "relative", "gap-1", "max-w-fit"]);
     expect(item()).toHaveClass(["flex", "flex-wrap", "truncate", "w-7", "h-7", "text-xs"]);
@@ -1428,7 +1428,7 @@ describe("Tailwind Variants (TV) - Compound Slots", () => {
       },
     });
     // with default values
-    const {base, item, prev, next, cursor} = pagination({
+    const { base, item, prev, next, cursor } = pagination({
       size: "xs",
       color: "primary",
       isBig: true,
@@ -1837,7 +1837,7 @@ describe("Tailwind Variants (TV) - Screen Variants", () => {
       },
     );
 
-    const {base, title, item, list, wrapper} = menu({
+    const { base, title, item, list, wrapper } = menu({
       color: {
         initial: "primary",
         sm: "secondary",
@@ -2093,48 +2093,6 @@ describe("Tailwind Variants (TV) - Extends", () => {
     expect(result).toHaveClass(expectedResult);
   });
 
-  test("should override the extended classes with variants, both using array", () => {
-    const p = tv({
-      base: "text-base text-green-500",
-      variants: {
-        isBig: {
-          true: "text-5xl",
-          false: "text-2xl",
-        },
-        color: {
-          red: ["text-red-500 bg-red-100", "tracking-normal"],
-          blue: "text-blue-500",
-        },
-      },
-    });
-
-    const h1 = tv({
-      extend: p,
-      base: "text-3xl font-bold",
-      variants: {
-        color: {
-          red: ["text-red-200", "bg-red-200"],
-          green: "text-green-500",
-        },
-      },
-    });
-
-    const result = h1({
-      isBig: true,
-      color: "red",
-    });
-
-    const expectedResult = [
-      "font-bold",
-      "text-red-200",
-      "bg-red-200",
-      "tracking-normal",
-      "text-5xl",
-    ];
-
-    expect(result).toHaveClass(expectedResult);
-  });
-
   test("should include the extended classes with defaultVariants - parent", () => {
     const p = tv({
       base: "text-base text-green-500",
@@ -2362,7 +2320,7 @@ describe("Tailwind Variants (TV) - Extends", () => {
         {
           isBig: true,
           color: "red",
-          class: ["bg-red-500"],
+          class: "bg-red-500",
         },
       ],
     });
@@ -2380,7 +2338,7 @@ describe("Tailwind Variants (TV) - Extends", () => {
         {
           isBig: true,
           color: "red",
-          class: ["bg-red-600"],
+          class: "bg-red-600",
         },
       ],
     });
@@ -2392,6 +2350,147 @@ describe("Tailwind Variants (TV) - Extends", () => {
     expect(result).toHaveClass(expectedResult);
   });
 
+  test.only("should override the extended classes with variants and compoundVariants, using array", () => {
+    const p = tv({
+      base: "text-base text-green-500",
+      variants: {
+        isBig: {
+          true: "text-5xl",
+          false: ["text-2xl"],
+        },
+        color: {
+          red: ["text-red-500 bg-red-100", "tracking-normal"],
+          blue: "text-blue-500",
+        },
+      },
+      defaultVariants: {
+        isBig: true,
+        color: "red",
+      },
+      compoundVariants: [
+        {
+          isBig: true,
+          color: "red",
+          class: "bg-red-500",
+        },
+        {
+          isBig: false,
+          color: "red",
+          class: ["bg-red-500"],
+        },
+        {
+          isBig: true,
+          color: "blue",
+          class: ["bg-blue-500"],
+        },
+        {
+          isBig: false,
+          color: "blue",
+          class: "bg-blue-500",
+        },
+      ],
+    });
+
+    const h1 = tv({
+      extend: p,
+      base: "text-3xl font-bold",
+      variants: {
+        isBig: {
+          true: "text-7xl",
+          false: "text-3xl",
+        },
+        color: {
+          red: ["text-red-200", "bg-red-200"],
+          green: ["text-green-500"],
+        },
+      },
+      compoundVariants: [
+        {
+          isBig: true,
+          color: "red",
+          class: "bg-red-600",
+        },
+        {
+          isBig: false,
+          color: "red",
+          class: "bg-red-600",
+        },
+        {
+          isBig: true,
+          color: "blue",
+          class: ["bg-blue-600"],
+        },
+        {
+          isBig: false,
+          color: "blue",
+          class: ["bg-blue-600"],
+        },
+      ],
+    });
+
+    const variantAndCompoundString = h1({
+      isBig: true,
+      color: "red",
+    });
+
+    const expectedVariantAndCompoundStringResult = [
+      "font-bold",
+      "text-red-200",
+      "bg-red-600",
+      "tracking-normal",
+      "text-7xl",
+    ];
+
+    expect(variantAndCompoundString).toHaveClass(expectedVariantAndCompoundStringResult);
+
+    const variantAndCompoundStringAndArray = h1({
+      isBig: false,
+      color: "red",
+    });
+
+    const expectedVariantAndCompoundStringAndArrayResult = [
+      "font-bold",
+      "text-red-200",
+      "bg-red-600",
+      "tracking-normal",
+      "text-3xl",
+    ];
+
+    expect(variantAndCompoundStringAndArray).toHaveClass(
+      expectedVariantAndCompoundStringAndArrayResult,
+    );
+
+    const variantAndCompoundArray = h1({
+      isBig: true,
+      color: "blue",
+    });
+
+    const expectedVariantAndCompoundArrayResult = [
+      "font-bold",
+      "text-blue-500",
+      "bg-blue-600",
+      "text-7xl",
+    ];
+
+    expect(variantAndCompoundArray).toHaveClass(expectedVariantAndCompoundArrayResult);
+
+    const variantAndCompoundArrayToString = h1({
+      isBig: false,
+      color: "blue",
+    });
+
+    const expectedVariantAndCompoundArrayToStringResult = [
+      "font-bold",
+      "text-blue-500",
+      "bg-blue-600",
+      "text-3xl",
+    ];
+
+    expect(variantAndCompoundArrayToString).toHaveClass(
+      expectedVariantAndCompoundArrayToStringResult,
+    );
+  });
+
   test("should include the extended classes with screenVariants single values", () => {
     const p = tv({
       base: "text-base text-green-500",
@@ -2521,7 +2620,7 @@ describe("Tailwind Variants (TV) - Extends", () => {
     });
 
     // with default values
-    const {base, title, item, list, wrapper} = menu();
+    const { base, title, item, list, wrapper } = menu();
 
     expect(base()).toHaveClass(["base--menuBase", "base--menu"]);
     expect(title()).toHaveClass(["title--menuBase"]);
@@ -2557,7 +2656,7 @@ describe("Tailwind Variants (TV) - Extends", () => {
       base: "base--menu",
     });
 
-    const {base, title, item, list, wrapper} = menu({
+    const { base, title, item, list, wrapper } = menu({
       isBig: true,
     });
 
@@ -2595,7 +2694,7 @@ describe("Tailwind Variants (TV) - Extends", () => {
       },
     });
 
-    const {base, title, item, list, wrapper} = menu({
+    const { base, title, item, list, wrapper } = menu({
       isBig: true,
     });
 
@@ -2670,7 +2769,7 @@ describe("Tailwind Variants (TV) - Extends", () => {
     });
 
     // with default values
-    const {base, title, item, list, wrapper, extra} = menu();
+    const { base, title, item, list, wrapper, extra } = menu();
 
     expect(base()).toHaveClass(["base--menuBase", "base--menu"]);
     expect(title()).toHaveClass(["title--menuBase", "title--menu"]);
@@ -2716,7 +2815,7 @@ describe("Tailwind Variants (TV) - Extends", () => {
     });
 
     // with default values
-    const {base, title, item, list, wrapper} = menu();
+    const { base, title, item, list, wrapper } = menu();
 
     expect(base()).toHaveClass(["base--menuBase", "base--menu"]);
     expect(title()).toHaveClass(["title--menuBase", "title--menu", "isBig--title--menuBase"]);
@@ -2765,7 +2864,7 @@ describe("Tailwind Variants (TV) - Extends", () => {
     });
 
     // with default values
-    const {base, title, item, list, wrapper} = menu();
+    const { base, title, item, list, wrapper } = menu();
 
     expect(base()).toHaveClass(["base--menuBase", "base--menu"]);
     expect(title()).toHaveClass(["title--menuBase", "title--menu", "isBig--title--menuBase"]);
@@ -2841,7 +2940,7 @@ describe("Tailwind Variants (TV) - Extends", () => {
     });
 
     // with default values
-    const {base, title, item, list, wrapper} = menu({
+    const { base, title, item, list, wrapper } = menu({
       color: "red",
     });
 
@@ -2939,7 +3038,7 @@ describe("Tailwind Variants (TV) - Extends", () => {
     });
 
     // with default values
-    const {base, title, item, list, wrapper} = menu({
+    const { base, title, item, list, wrapper } = menu({
       color: "red",
     });
 
@@ -2978,10 +3077,10 @@ describe("Tailwind Variants (TV) - Extends", () => {
     const tvResult = ["w-fit", "h-fit"];
     const custom = ["w-full"];
 
-    const resultWithoutMerge = cn(tvResult.concat(custom))({twMerge: false});
-    const resultWithMerge = cn(tvResult.concat(custom))({twMerge: true});
-    const emptyResultWithoutMerge = cn([].concat([]))({twMerge: false});
-    const emptyResultWithMerge = cn([].concat([]))({twMerge: true});
+    const resultWithoutMerge = cn(tvResult.concat(custom))({ twMerge: false });
+    const resultWithMerge = cn(tvResult.concat(custom))({ twMerge: true });
+    const emptyResultWithoutMerge = cn([].concat([]))({ twMerge: false });
+    const emptyResultWithMerge = cn([].concat([]))({ twMerge: true });
 
     expect(resultWithoutMerge).toBe("w-fit h-fit w-full");
     expect(resultWithMerge).toBe("h-fit w-full");
@@ -2990,7 +3089,7 @@ describe("Tailwind Variants (TV) - Extends", () => {
   });
 
   test("should support parent w/slots when base does not have slots", () => {
-    const menuBase = tv({base: "menuBase"});
+    const menuBase = tv({ base: "menuBase" });
     const menu = tv({
       extend: menuBase,
       base: "menu",
@@ -2999,7 +3098,7 @@ describe("Tailwind Variants (TV) - Extends", () => {
       },
     });
 
-    const {base, title} = menu();
+    const { base, title } = menu();
 
     expect(base()).toHaveClass(["menuBase", "menu"]);
     expect(title()).toHaveClass(["title"]);
@@ -3029,8 +3128,8 @@ describe("Tailwind Variants (TV) - Extends", () => {
       },
     });
 
-    const appButton = tv({extend: themeButton});
-    const button = tv({extend: appButton});
+    const appButton = tv({ extend: themeButton });
+    const button = tv({ extend: appButton });
 
     expect(appButton()).toHaveClass("font-medium text-blue-500 opacity-50 bg-black");
     expect(button()).toHaveClass("font-medium text-blue-500 opacity-50 bg-black");
@@ -3110,8 +3209,8 @@ describe("Tailwind Variants (TV) - Tailwind Merge", () => {
             borderRadius: COMMON_UNITS,
           },
           classGroups: {
-            shadow: [{shadow: COMMON_UNITS}],
-            "font-size": [{text: ["tiny", ...COMMON_UNITS]}],
+            shadow: [{ shadow: COMMON_UNITS }],
+            "font-size": [{ text: ["tiny", ...COMMON_UNITS] }],
             "bg-image": ["bg-stripe-gradient"],
             "min-w": [
               {