diff --git a/package.json b/package.json
index 866db34..bc4c729 100644
--- a/package.json
+++ b/package.json
@@ -93,5 +93,10 @@
       "esbuild",
       "unrs-resolver"
     ]
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b938f2e..4576ac4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,16 @@ settings:
 importers:
 
   .:
+    dependencies:
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      tailwind-merge:
+        specifier: ^3.4.0
+        version: 3.4.0
+      tailwind-variants:
+        specifier: ^3.2.2
+        version: 3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.1.18)
     devDependencies:
       '@babel/cli':
         specifier: ^7.28.3
@@ -1983,6 +1993,9 @@ packages:
   cjs-module-lexer@2.1.1:
     resolution: {integrity: sha512-+CmxIZ/L2vNcEfvNtLdU0ZQ6mbq3FZnwAP2PPTiKP+1QOoKwlKlPgb8UKV0Dds7QVaMnHm+FwSft2VB0s/SLjQ==}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   cli-cursor@3.1.0:
     resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
     engines: {node: '>=8'}
@@ -2002,6 +2015,10 @@ packages:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   co@4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
@@ -3971,6 +3988,22 @@ packages:
     resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
+  tailwind-merge@3.4.0:
+    resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
+
+  tailwind-variants@3.2.2:
+    resolution: {integrity: sha512-Mi4kHeMTLvKlM98XPnK+7HoBPmf4gygdFmqQPaDivc3DpYS6aIY6KiG/PgThrGvii5YZJqRsPz0aPyhoFzmZgg==}
+    engines: {node: '>=16.x', pnpm: '>=7.x'}
+    peerDependencies:
+      tailwind-merge: '>=3.0.0'
+      tailwindcss: '*'
+    peerDependenciesMeta:
+      tailwind-merge:
+        optional: true
+
+  tailwindcss@4.1.18:
+    resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
+
   terser@5.44.1:
     resolution: {integrity: sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==}
     engines: {node: '>=10'}
@@ -6592,6 +6625,10 @@ snapshots:
 
   cjs-module-lexer@2.1.1: {}
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   cli-cursor@3.1.0:
     dependencies:
       restore-cursor: 3.1.0
@@ -6612,6 +6649,8 @@ snapshots:
 
   clone@1.0.4: {}
 
+  clsx@2.1.1: {}
+
   co@4.6.0: {}
 
   collect-v8-coverage@1.0.3: {}
@@ -9119,6 +9158,16 @@ snapshots:
     dependencies:
       '@pkgr/core': 0.2.9
 
+  tailwind-merge@3.4.0: {}
+
+  tailwind-variants@3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.1.18):
+    dependencies:
+      tailwindcss: 4.1.18
+    optionalDependencies:
+      tailwind-merge: 3.4.0
+
+  tailwindcss@4.1.18: {}
+
   terser@5.44.1:
     dependencies:
       '@jridgewell/source-map': 0.3.11
diff --git a/src/babel/plugin.ts b/src/babel/plugin.ts
index ea1e39d..53fdb99 100644
--- a/src/babel/plugin.ts
+++ b/src/babel/plugin.ts
@@ -11,6 +11,11 @@ import { jsxAttributeVisitor } from "./plugin/visitors/className.js";
 import { importDeclarationVisitor } from "./plugin/visitors/imports.js";
 import { programEnter, programExit } from "./plugin/visitors/program.js";
 import { callExpressionVisitor, taggedTemplateVisitor } from "./plugin/visitors/tw.js";
+import {
+  variantCallVisitor,
+  variantDefinitionVisitor,
+  variantImportVisitor,
+} from "./plugin/visitors/variants.js";
 
 // Re-export PluginOptions for external use
 export type { PluginOptions };
@@ -56,6 +61,13 @@ export default function reactNativeTailwindBabelPlugin(
 
       ImportDeclaration(path, state) {
         importDeclarationVisitor(path, state, t);
+        // Also track variant imports (tv/cva)
+        variantImportVisitor(path, state, t);
+      },
+
+      VariableDeclarator(path, state) {
+        // Process variant function definitions (const button = tv({...}))
+        variantDefinitionVisitor(path, state, t);
       },
 
       TaggedTemplateExpression(path, state) {
@@ -63,6 +75,9 @@ export default function reactNativeTailwindBabelPlugin(
       },
 
       CallExpression(path, state) {
+        // First check if this is a variant function call
+        variantCallVisitor(path, state, t);
+        // Then check for tw/twStyle calls
         callExpressionVisitor(path, state, t);
       },
 
diff --git a/src/babel/plugin/state.ts b/src/babel/plugin/state.ts
index c5b546e..e3c462d 100644
--- a/src/babel/plugin/state.ts
+++ b/src/babel/plugin/state.ts
@@ -9,6 +9,44 @@ import type { StyleObject } from "../../types/core.js";
 import type { CustomTheme } from "../config-loader.js";
 import { extractCustomTheme } from "../config-loader.js";
 import { DEFAULT_CLASS_ATTRIBUTES, buildAttributeMatchers } from "../utils/attributeMatchers.js";
+import type { VariantFunctionEntry } from "../utils/variantProcessing.js";
+
+/**
+ * Types of class utilities we track and transform
+ *
+ * - "tv" / "cva": Variant function creators (create functions called later)
+ * - "twMerge": Class merger with conflict resolution
+ * - "twJoin" / "cx": Class joiners without conflict resolution
+ */
+export type ClassUtilityType = "tv" | "cva" | "twMerge" | "twJoin" | "cx";
+
+/**
+ * Tracked class utility import info
+ */
+export type TrackedClassUtility = {
+  type: ClassUtilityType;
+  originalName: string; // The actual import name (e.g., 'tv', 'twMerge')
+};
+
+/**
+ * Configuration for class utility imports to track
+ * Maps package name -> { exportName -> utilityType }
+ *
+ * Adding a new library or export is just one line here!
+ */
+export const CLASS_UTILITY_CONFIG: Record<string, Record<string, ClassUtilityType>> = {
+  "tailwind-variants": {
+    tv: "tv",
+  },
+  "class-variance-authority": {
+    cva: "cva",
+    cx: "cx", // Re-export of clsx for class concatenation
+  },
+  "tailwind-merge": {
+    twMerge: "twMerge", // Merge with conflict resolution
+    twJoin: "twJoin", // Join without conflict resolution (faster)
+  },
+};
 
 /**
  * Plugin options
@@ -121,6 +159,11 @@ export type PluginState = PluginPass & {
   functionComponentsNeedingColorScheme: Set<NodePath<BabelTypes.Function>>;
   // Track function components that need windowDimensions hook injection
   functionComponentsNeedingWindowDimensions: Set<NodePath<BabelTypes.Function>>;
+  // Track class utility imports (tv, cva, twMerge, etc.)
+  // Maps local name -> { type, originalName }
+  classUtilityImports: Map<string, TrackedClassUtility>;
+  variantFunctions: Map<string, VariantFunctionEntry>;
+  hasClassUtilityTransformations: boolean;
 };
 
 // Default identifier for the generated StyleSheet constant
@@ -181,5 +224,9 @@ export function createInitialState(
     reactNativeImportPath: undefined,
     functionComponentsNeedingColorScheme: new Set(),
     functionComponentsNeedingWindowDimensions: new Set(),
+    // Class utility support (tv, cva, twMerge)
+    classUtilityImports: new Map(),
+    variantFunctions: new Map(),
+    hasClassUtilityTransformations: false,
   };
 }
diff --git a/src/babel/plugin/visitors/program.ts b/src/babel/plugin/visitors/program.ts
index 71b5a10..d04ae93 100644
--- a/src/babel/plugin/visitors/program.ts
+++ b/src/babel/plugin/visitors/program.ts
@@ -17,6 +17,7 @@ import {
 } from "../../utils/styleInjection.js";
 import { removeTwImports } from "../../utils/twProcessing.js";
 import type { PluginState } from "../state.js";
+import { removeVariantDefinitions, removeVariantImports } from "./variants.js";
 
 /**
  * Program enter visitor - initialize state for each file
@@ -41,9 +42,16 @@ export function programExit(
     removeTwImports(path, t);
   }
 
-  // If no classNames were found and no hooks/imports needed, skip processing
+  // Remove class utility imports and definitions if they were processed
+  if (state.hasClassUtilityTransformations) {
+    removeVariantImports(path, state, t);
+    removeVariantDefinitions(path, state, t);
+  }
+
+  // If no classNames/utilities were found and no hooks/imports needed, skip processing
   if (
     !state.hasClassNames &&
+    !state.hasClassUtilityTransformations &&
     !state.needsWindowDimensionsImport &&
     !state.needsColorSchemeImport &&
     !state.needsI18nManagerImport
diff --git a/src/babel/plugin/visitors/variants.test.ts b/src/babel/plugin/visitors/variants.test.ts
new file mode 100644
index 0000000..10dcc87
--- /dev/null
+++ b/src/babel/plugin/visitors/variants.test.ts
@@ -0,0 +1,624 @@
+import { describe, expect, it } from "vitest";
+import { transform } from "../../../../test/helpers/babelTransform.js";
+
+describe("variants visitor - tv()", () => {
+  describe("import tracking", () => {
+    it("should track tv import from tailwind-variants", () => {
+      const code = `
+        import { tv } from 'tailwind-variants';
+
+        const button = tv({
+          base: 'font-semibold rounded-lg',
+          variants: {
+            color: {
+              primary: 'bg-blue-500',
+              secondary: 'bg-gray-500',
+            },
+          },
+        });
+
+        function Button() {
+          return <button className={button({ color: 'primary' })} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+
+      // Should remove tailwind-variants import
+      expect(result).not.toContain("tailwind-variants");
+      // Should have StyleSheet.create
+      expect(result).toContain("StyleSheet.create");
+      // Should have generated style keys
+      expect(result).toContain("_twStyles");
+    });
+
+    it("should track aliased tv import", () => {
+      const code = `
+        import { tv as createVariant } from 'tailwind-variants';
+
+        const button = createVariant({
+          base: 'p-4',
+        });
+
+        function Button() {
+          return <button className={button()} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).not.toContain("tailwind-variants");
+      expect(result).toContain("StyleSheet.create");
+    });
+  });
+
+  describe("static variant resolution", () => {
+    it("should resolve static variant call to style reference", () => {
+      const code = `
+        import { tv } from 'tailwind-variants';
+
+        const button = tv({
+          base: 'font-semibold',
+          variants: {
+            size: {
+              sm: 'text-sm',
+              lg: 'text-lg',
+            },
+          },
+        });
+
+        function Button() {
+          return <button className={button({ size: 'sm' })} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+
+      // Should generate styles for the variant
+      expect(result).toContain("StyleSheet.create");
+      // Should replace call with style reference
+      expect(result).toContain("_twStyles");
+    });
+
+    it("should handle default variants", () => {
+      const code = `
+        import { tv } from 'tailwind-variants';
+
+        const button = tv({
+          base: 'rounded',
+          variants: {
+            size: {
+              sm: 'p-1',
+              md: 'p-2',
+            },
+          },
+          defaultVariants: {
+            size: 'md',
+          },
+        });
+
+        function Button() {
+          return <button className={button()} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).toContain("StyleSheet.create");
+    });
+
+    it("should handle boolean variants", () => {
+      const code = `
+        import { tv } from 'tailwind-variants';
+
+        const button = tv({
+          base: 'rounded',
+          variants: {
+            disabled: {
+              true: 'opacity-50',
+              false: 'opacity-100',
+            },
+          },
+        });
+
+        function Button() {
+          return <button className={button({ disabled: true })} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).toContain("StyleSheet.create");
+    });
+
+    it("should handle compound variants", () => {
+      const code = `
+        import { tv } from 'tailwind-variants';
+
+        const button = tv({
+          base: 'rounded',
+          variants: {
+            color: {
+              primary: 'bg-blue-500',
+              secondary: 'bg-gray-500',
+            },
+            disabled: {
+              true: 'opacity-50',
+            },
+          },
+          compoundVariants: [
+            {
+              color: 'primary',
+              disabled: true,
+              class: 'bg-blue-300',
+            },
+          ],
+        });
+
+        function Button() {
+          return <button className={button({ color: 'primary', disabled: true })} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).toContain("StyleSheet.create");
+    });
+  });
+
+  describe("removing variant definitions", () => {
+    it("should remove the variant function definition after transformation", () => {
+      const code = `
+        import { tv } from 'tailwind-variants';
+
+        const button = tv({
+          base: 'font-semibold',
+        });
+
+        function Button() {
+          return <button className={button()} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+
+      // Should not contain the original tv() call
+      expect(result).not.toContain("tv({");
+      // But should have the generated styles
+      expect(result).toContain("StyleSheet.create");
+    });
+  });
+});
+
+describe("variants visitor - cva()", () => {
+  describe("import tracking", () => {
+    it("should track cva import from class-variance-authority", () => {
+      const code = `
+        import { cva } from 'class-variance-authority';
+
+        const button = cva('font-semibold rounded-lg', {
+          variants: {
+            intent: {
+              primary: 'bg-blue-500',
+              secondary: 'bg-gray-500',
+            },
+          },
+        });
+
+        function Button() {
+          return <button className={button({ intent: 'primary' })} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+
+      // Should remove class-variance-authority import
+      expect(result).not.toContain("class-variance-authority");
+      // Should have StyleSheet.create
+      expect(result).toContain("StyleSheet.create");
+    });
+  });
+
+  describe("static variant resolution", () => {
+    it("should resolve static cva call to style reference", () => {
+      const code = `
+        import { cva } from 'class-variance-authority';
+
+        const button = cva('font-semibold', {
+          variants: {
+            size: {
+              small: 'text-sm',
+              large: 'text-lg',
+            },
+          },
+        });
+
+        function Button() {
+          return <button className={button({ size: 'small' })} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).toContain("StyleSheet.create");
+      expect(result).toContain("_twStyles");
+    });
+
+    it("should handle cva with only base classes", () => {
+      const code = `
+        import { cva } from 'class-variance-authority';
+
+        const button = cva('font-semibold rounded-lg p-4');
+
+        function Button() {
+          return <button className={button()} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).toContain("StyleSheet.create");
+    });
+
+    it("should handle cva with base as array", () => {
+      const code = `
+        import { cva } from 'class-variance-authority';
+
+        const button = cva(['font-semibold', 'rounded-lg', 'p-4']);
+
+        function Button() {
+          return <button className={button()} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).toContain("StyleSheet.create");
+    });
+  });
+});
+
+describe("variants visitor - edge cases", () => {
+  it("should handle multiple variant functions in same file", () => {
+    const code = `
+      import { tv } from 'tailwind-variants';
+
+      const button = tv({
+        base: 'rounded-lg',
+        variants: {
+          size: { sm: 'p-1', lg: 'p-4' },
+        },
+      });
+
+      const badge = tv({
+        base: 'rounded-full',
+        variants: {
+          color: { red: 'bg-red-500', blue: 'bg-blue-500' },
+        },
+      });
+
+      function Component() {
+        return (
+          <div>
+            <button className={button({ size: 'sm' })} />
+            <span className={badge({ color: 'red' })} />
+          </div>
+        );
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+    expect(result).toContain("StyleSheet.create");
+    // Should have styles for both variants
+    expect(result).toContain("_twStyles");
+  });
+
+  it("should not transform dynamic configs", () => {
+    const code = `
+      import { tv } from 'tailwind-variants';
+
+      const getConfig = () => ({ base: 'rounded' });
+      const button = tv(getConfig());
+
+      function Button() {
+        return <button className={button()} />;
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+    // Dynamic config can't be evaluated at compile time
+    // Should preserve the tv() call
+    expect(result).toContain("tv(");
+  });
+});
+
+describe("class utilities visitor - twMerge()", () => {
+  describe("import tracking", () => {
+    it("should track twMerge import from tailwind-merge", () => {
+      const code = `
+        import { twMerge } from 'tailwind-merge';
+
+        function Button() {
+          return <button className={twMerge('px-2 py-1', 'p-4')} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+
+      // Should remove tailwind-merge import
+      expect(result).not.toContain("tailwind-merge");
+      // Should have StyleSheet.create
+      expect(result).toContain("StyleSheet.create");
+      // Should have generated style reference
+      expect(result).toContain("_twStyles");
+    });
+
+    it("should track aliased twMerge import", () => {
+      const code = `
+        import { twMerge as merge } from 'tailwind-merge';
+
+        function Button() {
+          return <button className={merge('px-2', 'px-4')} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).not.toContain("tailwind-merge");
+      expect(result).toContain("StyleSheet.create");
+    });
+  });
+
+  describe("static class merging", () => {
+    it("should merge conflicting classes correctly", () => {
+      const code = `
+        import { twMerge } from 'tailwind-merge';
+
+        function Button() {
+          return <button className={twMerge('px-2 py-1', 'p-4')} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).toContain("StyleSheet.create");
+      // p-4 should win over px-2 py-1
+      expect(result).toContain("_twStyles");
+    });
+
+    it("should handle multiple string arguments", () => {
+      const code = `
+        import { twMerge } from 'tailwind-merge';
+
+        function Button() {
+          return <button className={twMerge('font-bold', 'text-lg', 'text-blue-500')} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).toContain("StyleSheet.create");
+    });
+
+    it("should handle single string argument", () => {
+      const code = `
+        import { twMerge } from 'tailwind-merge';
+
+        function Button() {
+          return <button className={twMerge('p-4 font-bold')} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).toContain("StyleSheet.create");
+    });
+  });
+
+  describe("dynamic values", () => {
+    it("should not transform calls with dynamic arguments", () => {
+      const code = `
+        import { twMerge } from 'tailwind-merge';
+
+        function Button({ extraClasses }) {
+          return <button className={twMerge('p-4', extraClasses)} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      // Should preserve twMerge call since we can't resolve dynamic values
+      expect(result).toContain("twMerge(");
+    });
+  });
+});
+
+describe("class utilities visitor - twJoin()", () => {
+  it("should track twJoin import from tailwind-merge", () => {
+    const code = `
+      import { twJoin } from 'tailwind-merge';
+
+      function Button() {
+        return <button className={twJoin('px-2', 'py-1', 'bg-blue-500')} />;
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+
+    // Should remove tailwind-merge import
+    expect(result).not.toContain("tailwind-merge");
+    expect(result).toContain("StyleSheet.create");
+    expect(result).toContain("_twStyles");
+  });
+
+  it("should join classes without conflict resolution", () => {
+    const code = `
+      import { twJoin } from 'tailwind-merge';
+
+      function Button() {
+        return <button className={twJoin('px-2', 'px-4')} />;
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+    expect(result).toContain("StyleSheet.create");
+    // twJoin keeps both classes (unlike twMerge which resolves conflicts)
+  });
+});
+
+describe("class utilities visitor - cx()", () => {
+  it("should track cx import from class-variance-authority", () => {
+    const code = `
+      import { cx } from 'class-variance-authority';
+
+      function Button() {
+        return <button className={cx('px-2', 'py-1', 'bg-blue-500')} />;
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+
+    // Should remove class-variance-authority import
+    expect(result).not.toContain("class-variance-authority");
+    expect(result).toContain("StyleSheet.create");
+    expect(result).toContain("_twStyles");
+  });
+
+  it("should handle cx with multiple string arguments", () => {
+    const code = `
+      import { cx } from 'class-variance-authority';
+
+      function Button() {
+        return <button className={cx('font-bold', 'text-lg', 'text-red-500')} />;
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+    expect(result).toContain("StyleSheet.create");
+  });
+});
+
+describe("class utilities - mixed usage", () => {
+  it("should handle tv and twMerge in same file", () => {
+    const code = `
+      import { tv } from 'tailwind-variants';
+      import { twMerge } from 'tailwind-merge';
+
+      const button = tv({
+        base: 'rounded-lg',
+        variants: {
+          size: { sm: 'p-1', lg: 'p-4' },
+        },
+      });
+
+      function Component() {
+        return (
+          <div>
+            <button className={button({ size: 'sm' })} />
+            <span className={twMerge('text-sm', 'text-lg')} />
+          </div>
+        );
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+    expect(result).toContain("StyleSheet.create");
+    // Both imports should be removed
+    expect(result).not.toContain("tailwind-variants");
+    expect(result).not.toContain("tailwind-merge");
+  });
+
+  it("should handle cva and twMerge in same file", () => {
+    const code = `
+      import { cva } from 'class-variance-authority';
+      import { twMerge } from 'tailwind-merge';
+
+      const button = cva('font-semibold', {
+        variants: {
+          size: { sm: 'text-sm', lg: 'text-lg' },
+        },
+      });
+
+      function Component() {
+        return (
+          <div>
+            <button className={button({ size: 'lg' })} />
+            <span className={twMerge('p-2', 'p-4')} />
+          </div>
+        );
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+    expect(result).toContain("StyleSheet.create");
+    expect(result).not.toContain("class-variance-authority");
+    expect(result).not.toContain("tailwind-merge");
+  });
+
+  it("should handle multiple imports from same library", () => {
+    const code = `
+      import { cva, cx } from 'class-variance-authority';
+
+      const button = cva('rounded-lg', {
+        variants: {
+          size: { sm: 'p-1', lg: 'p-4' },
+        },
+      });
+
+      function Component() {
+        return (
+          <div>
+            <button className={button({ size: 'sm' })} />
+            <span className={cx('text-sm', 'font-bold')} />
+          </div>
+        );
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+    expect(result).toContain("StyleSheet.create");
+    expect(result).not.toContain("class-variance-authority");
+  });
+
+  it("should handle twMerge and twJoin from same library", () => {
+    const code = `
+      import { twMerge, twJoin } from 'tailwind-merge';
+
+      function Component() {
+        return (
+          <div>
+            <button className={twMerge('px-2', 'px-4')} />
+            <span className={twJoin('text-sm', 'font-bold')} />
+          </div>
+        );
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+    expect(result).toContain("StyleSheet.create");
+    expect(result).not.toContain("tailwind-merge");
+  });
+
+  it("should handle all three libraries together", () => {
+    const code = `
+      import { tv } from 'tailwind-variants';
+      import { cva, cx } from 'class-variance-authority';
+      import { twMerge, twJoin } from 'tailwind-merge';
+
+      const tvButton = tv({
+        base: 'rounded',
+        variants: { size: { sm: 'p-1' } },
+      });
+
+      const cvaButton = cva('font-bold', {
+        variants: { color: { red: 'text-red-500' } },
+      });
+
+      function Component() {
+        return (
+          <div>
+            <button className={tvButton({ size: 'sm' })} />
+            <button className={cvaButton({ color: 'red' })} />
+            <span className={cx('a', 'b')} />
+            <span className={twMerge('c', 'd')} />
+            <span className={twJoin('e', 'f')} />
+          </div>
+        );
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+    expect(result).toContain("StyleSheet.create");
+    expect(result).not.toContain("tailwind-variants");
+    expect(result).not.toContain("class-variance-authority");
+    expect(result).not.toContain("tailwind-merge");
+  });
+});
diff --git a/src/babel/plugin/visitors/variants.ts b/src/babel/plugin/visitors/variants.ts
new file mode 100644
index 0000000..21c0fa2
--- /dev/null
+++ b/src/babel/plugin/visitors/variants.ts
@@ -0,0 +1,221 @@
+/**
+ * Visitors for class utility transformations (tv, cva, twMerge)
+ * Transforms variant function calls to pre-computed StyleSheet references
+ */
+
+import type { NodePath } from "@babel/core";
+import type * as BabelTypes from "@babel/types";
+import { parseClassName } from "../../../parser/index.js";
+import { generateStyleKey } from "../../../utils/styleKey.js";
+import {
+  extractCvaConfig,
+  extractTvConfig,
+  generateDynamicVariantExpression,
+  processClassJoinerCall,
+  processVariantCallSite,
+  processVariantDefinition,
+} from "../../utils/variantProcessing.js";
+import type { PluginState } from "../state.js";
+import { CLASS_UTILITY_CONFIG } from "../state.js";
+
+/**
+ * Track class utility imports (tv, cva, twMerge)
+ * Uses unified config to detect and track all supported utilities
+ */
+export function classUtilityImportVisitor(
+  path: NodePath<BabelTypes.ImportDeclaration>,
+  state: PluginState,
+  t: typeof BabelTypes,
+): void {
+  const source = path.node.source.value;
+  const packageConfig = CLASS_UTILITY_CONFIG[source];
+
+  if (!packageConfig) return;
+
+  for (const spec of path.node.specifiers) {
+    if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+      const utilityType = packageConfig[spec.imported.name];
+      if (utilityType) {
+        state.classUtilityImports.set(spec.local.name, {
+          type: utilityType,
+          originalName: spec.imported.name,
+        });
+      }
+    }
+  }
+}
+
+/**
+ * Process variant function definitions (const button = tv({...}))
+ * Only processes tv and cva - twMerge is handled at call sites
+ */
+export function variantDefinitionVisitor(
+  path: NodePath<BabelTypes.VariableDeclarator>,
+  state: PluginState,
+  t: typeof BabelTypes,
+): void {
+  // Check if this is a variant function definition
+  // e.g., const button = tv({...}) or const button = cva('base', {...})
+  if (!t.isIdentifier(path.node.id)) return;
+  if (!t.isCallExpression(path.node.init)) return;
+
+  const variableName = path.node.id.name;
+  const callExpr = path.node.init;
+
+  // Check if callee is a tracked tv/cva import
+  if (!t.isIdentifier(callExpr.callee)) return;
+  const calleeName = callExpr.callee.name;
+
+  const utility = state.classUtilityImports.get(calleeName);
+  // Only process tv and cva definitions (twMerge doesn't create variant functions)
+  if (!utility || (utility.type !== "tv" && utility.type !== "cva")) return;
+
+  // Extract the config
+  const config =
+    utility.type === "tv" ? extractTvConfig(callExpr.arguments, t) : extractCvaConfig(callExpr.arguments, t);
+
+  if (!config) {
+    // Config couldn't be extracted statically
+    // Leave the code as-is for runtime processing
+    return;
+  }
+
+  // Process the variant definition
+  processVariantDefinition(variableName, utility.type, config, state, parseClassName, generateStyleKey);
+
+  // Mark that we have transformations
+  state.hasClassUtilityTransformations = true;
+}
+
+/**
+ * Process class utility call sites
+ * Handles both variant functions (tv/cva) and direct calls (twMerge)
+ */
+export function classUtilityCallVisitor(
+  path: NodePath<BabelTypes.CallExpression>,
+  state: PluginState,
+  t: typeof BabelTypes,
+): void {
+  if (!t.isIdentifier(path.node.callee)) return;
+
+  const calleeName = path.node.callee.name;
+
+  // First check if this is a call to a tracked variant function (tv/cva result)
+  const variantEntry = state.variantFunctions.get(calleeName);
+  if (variantEntry) {
+    // Try to process with static props
+    const success = processVariantCallSite(path, calleeName, variantEntry, state, t);
+
+    if (!success) {
+      // Couldn't resolve statically - try dynamic transformation
+      const args = path.node.arguments;
+
+      if (args.length === 1 && t.isObjectExpression(args[0])) {
+        // Generate dynamic conditional expression
+        const dynamicExpr = generateDynamicVariantExpression(calleeName, variantEntry, args[0], state, t);
+
+        if (dynamicExpr) {
+          path.replaceWith(dynamicExpr);
+          state.hasClassUtilityTransformations = true;
+        }
+      }
+    } else {
+      state.hasClassUtilityTransformations = true;
+    }
+    return;
+  }
+
+  // Check if this is a class joiner call (twMerge, twJoin, cx)
+  const utility = state.classUtilityImports.get(calleeName);
+  if (utility && (utility.type === "twMerge" || utility.type === "twJoin" || utility.type === "cx")) {
+    const success = processClassJoinerCall(path, utility.type, state, parseClassName, generateStyleKey, t);
+    if (success) {
+      state.hasClassUtilityTransformations = true;
+    }
+  }
+}
+
+/**
+ * Remove class utility imports after transformation
+ * Uses unified config to know which packages to check
+ */
+export function removeClassUtilityImports(
+  path: NodePath<BabelTypes.Program>,
+  state: PluginState,
+  t: typeof BabelTypes,
+): void {
+  if (!state.hasClassUtilityTransformations) return;
+
+  const trackedPackages = Object.keys(CLASS_UTILITY_CONFIG);
+
+  path.traverse({
+    ImportDeclaration(importPath) {
+      const source = importPath.node.source.value;
+
+      if (trackedPackages.includes(source)) {
+        const packageConfig = CLASS_UTILITY_CONFIG[source];
+
+        // Check if all specifiers are utilities we've tracked
+        const remainingSpecifiers = importPath.node.specifiers.filter((spec) => {
+          if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+            const importName = spec.imported.name;
+            const localName = spec.local.name;
+
+            // Remove if this is a tracked utility import
+            if (packageConfig[importName] && state.classUtilityImports.has(localName)) {
+              return false;
+            }
+          }
+          return true; // Keep
+        });
+
+        if (remainingSpecifiers.length === 0) {
+          importPath.remove();
+        } else if (remainingSpecifiers.length < importPath.node.specifiers.length) {
+          importPath.node.specifiers = remainingSpecifiers;
+        }
+      }
+    },
+  });
+}
+
+/**
+ * Remove variant function definitions after transformation
+ * (The const button = tv({...}) declarations are no longer needed)
+ */
+export function removeVariantDefinitions(
+  path: NodePath<BabelTypes.Program>,
+  state: PluginState,
+  t: typeof BabelTypes,
+): void {
+  if (!state.hasClassUtilityTransformations) return;
+
+  path.traverse({
+    VariableDeclaration(varDeclPath) {
+      const declarators = varDeclPath.node.declarations;
+      const remainingDeclarators = declarators.filter((decl) => {
+        if (t.isIdentifier(decl.id)) {
+          const name = decl.id.name;
+          // Remove if this is a variant function we processed
+          if (state.variantFunctions.has(name)) {
+            return false;
+          }
+        }
+        return true;
+      });
+
+      if (remainingDeclarators.length === 0) {
+        varDeclPath.remove();
+      } else if (remainingDeclarators.length < declarators.length) {
+        varDeclPath.node.declarations = remainingDeclarators;
+      }
+    },
+  });
+}
+
+// Export aliases for backward compatibility
+export {
+  removeClassUtilityImports as removeVariantImports,
+  classUtilityCallVisitor as variantCallVisitor,
+  classUtilityImportVisitor as variantImportVisitor,
+};
diff --git a/src/babel/utils/variantProcessing.ts b/src/babel/utils/variantProcessing.ts
new file mode 100644
index 0000000..52eb37b
--- /dev/null
+++ b/src/babel/utils/variantProcessing.ts
@@ -0,0 +1,550 @@
+/**
+ * Utility functions for processing class utility calls (tv, cva, twMerge)
+ * Uses the actual libraries at compile time to resolve class strings
+ */
+
+import type { NodePath } from "@babel/core";
+import type * as BabelTypes from "@babel/types";
+import { cva, cx } from "class-variance-authority";
+import { twJoin, twMerge } from "tailwind-merge";
+import { tv } from "tailwind-variants";
+import type { CustomTheme } from "../../parser/index.js";
+import type { StyleObject } from "../../types/core.js";
+
+/**
+ * Variant function registry entry
+ */
+export type VariantFunctionEntry = {
+  type: "tv" | "cva";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  variantFn: (...args: any[]) => string;
+  config: VariantConfig;
+  // Pre-computed styles for each variant combination
+  // Key format: "color:primary|size:sm" -> styleKey
+  precomputedStyles: Map<string, string>;
+};
+
+/**
+ * Extracted variant configuration
+ */
+export type VariantConfig = {
+  base?: string;
+  variants?: Record<string, Record<string, string | string[] | null>>;
+  compoundVariants?: Array<Record<string, unknown>>;
+  defaultVariants?: Record<string, string | boolean>;
+  // For slots (tailwind-variants only)
+  slots?: Record<string, string>;
+};
+
+/**
+ * Tracked class utility import info (matches state.ts)
+ */
+export type TrackedClassUtility = {
+  type: "tv" | "cva" | "twMerge" | "twJoin" | "cx";
+  originalName: string;
+};
+
+/**
+ * Plugin state interface for class utility processing
+ */
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export interface VariantProcessingState {
+  styleRegistry: Map<string, StyleObject>;
+  customTheme: CustomTheme;
+  stylesIdentifier: string;
+  // Track variant function definitions
+  variantFunctions: Map<string, VariantFunctionEntry>;
+  // Unified map of all tracked class utility imports
+  classUtilityImports: Map<string, TrackedClassUtility>;
+}
+
+/**
+ * Extract a JavaScript value from an AST node
+ * Only supports static/literal values
+ */
+export function extractStaticValue(node: BabelTypes.Node, t: typeof BabelTypes): unknown {
+  if (t.isStringLiteral(node)) {
+    return node.value;
+  }
+  if (t.isNumericLiteral(node)) {
+    return node.value;
+  }
+  if (t.isBooleanLiteral(node)) {
+    return node.value;
+  }
+  if (t.isNullLiteral(node)) {
+    return null;
+  }
+  if (t.isArrayExpression(node)) {
+    const elements: unknown[] = [];
+    for (const element of node.elements) {
+      if (element === null) {
+        elements.push(null);
+      } else if (t.isSpreadElement(element)) {
+        // Can't handle spread at compile time
+        return undefined;
+      } else {
+        const value = extractStaticValue(element, t);
+        if (value === undefined) return undefined;
+        elements.push(value);
+      }
+    }
+    return elements;
+  }
+  if (t.isObjectExpression(node)) {
+    const obj: Record<string, unknown> = {};
+    for (const prop of node.properties) {
+      if (t.isSpreadElement(prop)) {
+        // Can't handle spread at compile time
+        return undefined;
+      }
+      if (t.isObjectProperty(prop)) {
+        let key: string;
+        if (t.isIdentifier(prop.key)) {
+          key = prop.key.name;
+        } else if (t.isStringLiteral(prop.key)) {
+          key = prop.key.value;
+        } else {
+          // Computed key - can't handle at compile time
+          return undefined;
+        }
+        const value = extractStaticValue(prop.value, t);
+        if (value === undefined) return undefined;
+        obj[key] = value;
+      }
+    }
+    return obj;
+  }
+  // Unsupported node type - return undefined to signal dynamic value
+  return undefined;
+}
+
+/**
+ * Extract variant config from a tv() call
+ */
+export function extractTvConfig(
+  args: BabelTypes.CallExpression["arguments"],
+  t: typeof BabelTypes,
+): VariantConfig | null {
+  if (args.length === 0) return null;
+
+  const configArg = args[0];
+  if (!t.isObjectExpression(configArg)) return null;
+
+  const config = extractStaticValue(configArg, t) as VariantConfig | undefined;
+  return config ?? null;
+}
+
+/**
+ * Extract variant config from a cva() call
+ * cva(base, { variants, ... })
+ */
+export function extractCvaConfig(
+  args: BabelTypes.CallExpression["arguments"],
+  t: typeof BabelTypes,
+): VariantConfig | null {
+  if (args.length === 0) return null;
+
+  // First arg is base classes
+  const baseArg = args[0];
+  const base = extractStaticValue(baseArg, t);
+  if (base === undefined) return null;
+
+  const config: VariantConfig = {
+    base: Array.isArray(base) ? (base as string[]).join(" ") : typeof base === "string" ? base : "",
+  };
+
+  // Second arg is optional config object
+  if (args.length > 1 && t.isObjectExpression(args[1])) {
+    const configObj = extractStaticValue(args[1], t) as Partial<VariantConfig> | undefined;
+    if (configObj) {
+      Object.assign(config, configObj);
+    }
+  }
+
+  return config;
+}
+
+/**
+ * Generate all possible variant combinations
+ * Returns array of objects like { color: 'primary', size: 'sm' }
+ */
+export function generateVariantCombinations(
+  variants: Record<string, Record<string, unknown>> | undefined,
+): Array<Record<string, string | boolean>> {
+  if (!variants || Object.keys(variants).length === 0) {
+    return [{}];
+  }
+
+  // Create local reference to satisfy TypeScript in nested function
+  const variantsMap = variants;
+  const variantNames = Object.keys(variantsMap);
+  const combinations: Array<Record<string, string | boolean>> = [];
+
+  function generate(index: number, current: Record<string, string | boolean>): void {
+    if (index === variantNames.length) {
+      combinations.push({ ...current });
+      return;
+    }
+
+    const variantName = variantNames[index];
+    const options = Object.keys(variantsMap[variantName]);
+
+    for (const option of options) {
+      // Convert "true"/"false" strings to booleans for boolean variants
+      const value = option === "true" ? true : option === "false" ? false : option;
+      current[variantName] = value;
+      generate(index + 1, current);
+    }
+  }
+
+  generate(0, {});
+  return combinations;
+}
+
+/**
+ * Create a unique key for a variant combination
+ */
+export function createVariantKey(props: Record<string, string | boolean>): string {
+  const sortedEntries = Object.entries(props).sort(([a], [b]) => a.localeCompare(b));
+  return sortedEntries.map(([k, v]) => `${k}:${String(v)}`).join("|");
+}
+
+/**
+ * Create a style key from variant function name and props
+ */
+export function createVariantStyleKey(variantName: string, props: Record<string, string | boolean>): string {
+  const propsKey = createVariantKey(props);
+  // Make a valid JS identifier
+  const sanitized = `${variantName}_${propsKey}`.replace(/[:|]/g, "_").replace(/[^a-zA-Z0-9_]/g, "");
+  return `_${sanitized}`;
+}
+
+/**
+ * Process a tv() or cva() variable declaration
+ * Creates the variant function and pre-computes all style combinations
+ */
+export function processVariantDefinition(
+  variableName: string,
+  type: "tv" | "cva",
+  config: VariantConfig,
+  state: VariantProcessingState,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
+  _generateStyleKey: (className: string) => string,
+): void {
+  // Create the actual variant function using the real library
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let variantFn: (...args: any[]) => string;
+
+  if (type === "tv") {
+    // Handle slots case - not fully supported yet
+    if (config.slots) {
+      // For slots, we'd need more complex handling
+      // For now, skip pre-computation for slotted variants
+      console.warn(
+        `[react-native-tailwind] Slots in tv() are not yet fully supported for compile-time transformation. ` +
+          `Consider using compound variants instead.`,
+      );
+      return;
+    }
+
+    const tvConfig = {
+      base: config.base,
+      variants: config.variants,
+      compoundVariants: config.compoundVariants,
+      defaultVariants: config.defaultVariants,
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument
+    variantFn = tv(tvConfig as any) as (...args: any[]) => string;
+  } else {
+    // CVA
+    const cvaConfig = {
+      variants: config.variants,
+      compoundVariants: config.compoundVariants,
+      defaultVariants: config.defaultVariants,
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument
+    variantFn = cva(config.base ?? "", cvaConfig as any) as (...args: any[]) => string;
+  }
+
+  // Pre-compute styles for all variant combinations
+  const precomputedStyles = new Map<string, string>();
+  const combinations = generateVariantCombinations(config.variants);
+
+  for (const props of combinations) {
+    // Call the variant function to get the class string
+    const className = variantFn(props);
+    if (className) {
+      // Parse to RN style
+      const styleObject = parseClassName(className, state.customTheme);
+      const styleKey = createVariantStyleKey(variableName, props);
+
+      // Register the style
+      state.styleRegistry.set(styleKey, styleObject);
+
+      // Store the mapping
+      const propsKey = createVariantKey(props);
+      precomputedStyles.set(propsKey, styleKey);
+    }
+  }
+
+  // Also compute the default case (no props or empty props)
+  const defaultClassName = variantFn({});
+  if (defaultClassName) {
+    const defaultStyleObject = parseClassName(defaultClassName, state.customTheme);
+    const defaultStyleKey = createVariantStyleKey(variableName, {});
+    state.styleRegistry.set(defaultStyleKey, defaultStyleObject);
+    precomputedStyles.set("", defaultStyleKey);
+  }
+
+  // Register the variant function
+  state.variantFunctions.set(variableName, {
+    type,
+    variantFn,
+    config,
+    precomputedStyles,
+  });
+}
+
+/**
+ * Process a variant function call site
+ * e.g., button({ color: 'primary' }) or className={button({ color: 'primary' })}
+ */
+export function processVariantCallSite(
+  path: NodePath<BabelTypes.CallExpression>,
+  variableName: string,
+  entry: VariantFunctionEntry,
+  state: VariantProcessingState,
+  t: typeof BabelTypes,
+): boolean {
+  const args = path.node.arguments;
+
+  // Extract props from the call
+  let props: Record<string, string | boolean> | null = null;
+
+  if (args.length === 0) {
+    // No args - use defaults
+    props = {};
+  } else if (args.length === 1 && t.isObjectExpression(args[0])) {
+    // Static props object
+    const extracted = extractStaticValue(args[0], t) as Record<string, unknown> | undefined;
+    if (extracted) {
+      // Filter to only variant props (not class/className)
+      props = {};
+      for (const [key, value] of Object.entries(extracted)) {
+        if (key !== "class" && key !== "className") {
+          props[key] = value as string | boolean;
+        }
+      }
+    }
+  }
+
+  if (props === null) {
+    // Dynamic props - can't resolve at compile time
+    // TODO: Generate runtime conditional expressions
+    return false;
+  }
+
+  // Look up the pre-computed style
+  const propsKey = createVariantKey(props);
+  const styleKey = entry.precomputedStyles.get(propsKey);
+
+  if (!styleKey) {
+    // This combination wasn't pre-computed (shouldn't happen if we enumerated all)
+    // Fall back to computing it now
+    const className = entry.variantFn(props);
+    if (!className) return false;
+
+    // We'd need parseClassName here, but we don't have it in this context
+    // For now, return false to skip transformation
+    return false;
+  }
+
+  // Replace the call with a style reference
+  // e.g., button({ color: 'primary' }) -> _twStyles._button_color_primary
+  path.replaceWith(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)));
+
+  return true;
+}
+
+/**
+ * Generate runtime conditional for dynamic variant props
+ * This creates code like:
+ * [
+ *   styles._button_base,
+ *   color === 'primary' && styles._button_color_primary,
+ *   color === 'secondary' && styles._button_color_secondary,
+ *   size === 'sm' && styles._button_size_sm,
+ *   size === 'lg' && styles._button_size_lg,
+ * ]
+ */
+export function generateDynamicVariantExpression(
+  variableName: string,
+  entry: VariantFunctionEntry,
+  propsExpression: BabelTypes.ObjectExpression,
+  state: VariantProcessingState,
+  t: typeof BabelTypes,
+): BabelTypes.ArrayExpression | null {
+  const { config, precomputedStyles } = entry;
+  const variants = config.variants;
+
+  if (!variants) {
+    // No variants - just return base style
+    const baseStyleKey = precomputedStyles.get("");
+    if (baseStyleKey) {
+      return t.arrayExpression([
+        t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey)),
+      ]);
+    }
+    return null;
+  }
+
+  const elements: BabelTypes.Expression[] = [];
+
+  // Add base style (default with no variant-specific props)
+  const baseStyleKey = precomputedStyles.get("");
+  if (baseStyleKey) {
+    elements.push(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey)));
+  }
+
+  // Extract prop expressions from the call
+  const propExpressions = new Map<string, BabelTypes.Expression>();
+  for (const prop of propsExpression.properties) {
+    if (t.isObjectProperty(prop)) {
+      let key: string | null = null;
+      if (t.isIdentifier(prop.key)) {
+        key = prop.key.name;
+      } else if (t.isStringLiteral(prop.key)) {
+        key = prop.key.value;
+      }
+      if (key && key !== "class" && key !== "className" && t.isExpression(prop.value)) {
+        propExpressions.set(key, prop.value);
+      }
+    }
+  }
+
+  // Generate conditionals for each variant
+  for (const [variantName, variantOptions] of Object.entries(variants)) {
+    const propExpr = propExpressions.get(variantName);
+    if (!propExpr) {
+      // This variant prop wasn't provided - use default if available
+      const defaultValue = config.defaultVariants?.[variantName];
+      if (defaultValue !== undefined) {
+        // Add the default style unconditionally
+        const props = { [variantName]: defaultValue };
+        const propsKey = createVariantKey(props as Record<string, string | boolean>);
+        const styleKey = precomputedStyles.get(propsKey);
+        if (styleKey) {
+          elements.push(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)));
+        }
+      }
+      continue;
+    }
+
+    // Generate conditional for each option
+    for (const optionKey of Object.keys(variantOptions)) {
+      const props = { [variantName]: optionKey === "true" ? true : optionKey === "false" ? false : optionKey };
+      const propsKey = createVariantKey(props as Record<string, string | boolean>);
+      const styleKey = precomputedStyles.get(propsKey);
+
+      if (styleKey) {
+        // Generate: propExpr === 'optionKey' && styles._styleKey
+        let condition: BabelTypes.Expression;
+        if (optionKey === "true") {
+          condition = propExpr;
+        } else if (optionKey === "false") {
+          condition = t.unaryExpression("!", propExpr);
+        } else {
+          condition = t.binaryExpression("===", propExpr, t.stringLiteral(optionKey));
+        }
+
+        elements.push(
+          t.logicalExpression(
+            "&&",
+            condition,
+            t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)),
+          ),
+        );
+      }
+    }
+  }
+
+  return t.arrayExpression(elements);
+}
+
+/**
+ * Class joiner functions mapped by utility type
+ * - twMerge: Merges with conflict resolution (later classes win)
+ * - twJoin: Simple join without conflict resolution (faster)
+ * - cx: Alias for clsx, simple concatenation
+ */
+const CLASS_JOINERS: Record<"twMerge" | "twJoin" | "cx", (...classes: string[]) => string> = {
+  twMerge: (...classes) => twMerge(...classes),
+  twJoin: (...classes) => twJoin(...classes),
+  cx: (...classes) => cx(...classes),
+};
+
+/**
+ * Process a class joiner call site (twMerge, twJoin, cx)
+ * e.g., twMerge('px-2 py-1', 'p-4') -> _twStyles._merged_abc123
+ *
+ * Returns true if successful, false if dynamic/can't resolve
+ */
+export function processClassJoinerCall(
+  path: NodePath<BabelTypes.CallExpression>,
+  utilityType: "twMerge" | "twJoin" | "cx",
+  state: VariantProcessingState,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
+  generateStyleKey: (className: string) => string,
+  t: typeof BabelTypes,
+): boolean {
+  const args = path.node.arguments;
+
+  // Extract all string arguments
+  const classStrings: string[] = [];
+
+  for (const arg of args) {
+    if (t.isStringLiteral(arg)) {
+      classStrings.push(arg.value);
+    } else if (t.isTemplateLiteral(arg) && arg.expressions.length === 0) {
+      // Static template literal with no expressions
+      classStrings.push(arg.quasis.map((q) => q.value.cooked ?? q.value.raw).join(""));
+    } else {
+      // Dynamic argument - can't resolve at compile time
+      return false;
+    }
+  }
+
+  if (classStrings.length === 0) {
+    return false;
+  }
+
+  // Use the appropriate joiner function at compile time
+  const joiner = CLASS_JOINERS[utilityType];
+  const mergedClasses = joiner(...classStrings);
+
+  if (!mergedClasses) {
+    return false;
+  }
+
+  // Parse to RN style
+  const styleObject = parseClassName(mergedClasses, state.customTheme);
+  const styleKey = generateStyleKey(mergedClasses);
+
+  // Register the style
+  state.styleRegistry.set(styleKey, styleObject);
+
+  // Replace the call with a style reference
+  path.replaceWith(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)));
+
+  return true;
+}
+
+// Backward compatibility alias
+export const processTwMergeCall = (
+  path: NodePath<BabelTypes.CallExpression>,
+  state: VariantProcessingState,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
+  generateStyleKey: (className: string) => string,
+  t: typeof BabelTypes,
+): boolean => processClassJoinerCall(path, "twMerge", state, parseClassName, generateStyleKey, t);