@mgcrea/react-native-tailwind 0.10.0 → 0.11.0

package/dist/runtime.test.js

@@ -1 +1 @@
-var _vitest=require("vitest");var _runtime=require("./runtime");(0,_vitest.describe)("runtime",function(){(0,_vitest.beforeEach)(function(){(0,_runtime.clearCache)();(0,_runtime.setConfig)({});});(0,_vitest.describe)("tw template tag",function(){(0,_vitest.it)("should parse static classes",function(){var result=(0,_runtime.tw)`m-4 p-2 bg-blue-500`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8,backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toBeUndefined();(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toBeUndefined();});(0,_vitest.it)("should handle interpolated values",function(){var isActive=true;var result=(0,_runtime.tw)`m-4 ${isActive&&"bg-blue-500"}`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,backgroundColor:"#2b7fff"});});(0,_vitest.it)("should handle conditional classes",function(){var isLarge=true;var result=(0,_runtime.tw)`p-4 ${isLarge?"text-xl":"text-sm"}`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({padding:16,fontSize:20});});(0,_vitest.it)("should handle falsy values",function(){var result=(0,_runtime.tw)`m-4 ${false} ${null} ${undefined} p-2`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8});});(0,_vitest.it)("should preserve zero values in template literals",function(){var result=(0,_runtime.tw)`opacity-${0} m-4`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({opacity:0,margin:16});});(0,_vitest.it)("should preserve empty string values in template literals",function(){var result=(0,_runtime.tw)`m-4 ${""}p-2`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8});});(0,_vitest.it)("should handle mixed falsy and truthy numeric values",function(){var spacing=0;var result=(0,_runtime.tw)`m-${spacing} p-4`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:0,padding:16});});(0,_vitest.it)("should return empty style object for empty className",function(){var result=(0,_runtime.tw)``;(0,_vitest.expect)(result).toEqual({style:{}});});(0,_vitest.it)("should normalize whitespace",function(){var result=(0,_runtime.tw)`m-4    p-2   bg-blue-500`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8,backgroundColor:"#2b7fff"});});});(0,_vitest.describe)("twStyle function",function(){(0,_vitest.it)("should parse className string",function(){var result=(0,_runtime.twStyle)("m-4 p-2 bg-blue-500");(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8,backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toBeUndefined();});(0,_vitest.it)("should return undefined for empty string",function(){var result=(0,_runtime.twStyle)("");(0,_vitest.expect)(result).toBeUndefined();});(0,_vitest.it)("should normalize whitespace",function(){var result=(0,_runtime.twStyle)("m-4    p-2   bg-blue-500");(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8,backgroundColor:"#2b7fff"});});});(0,_vitest.describe)("setConfig",function(){(0,_vitest.it)("should set custom colors",function(){(0,_runtime.setConfig)({theme:{extend:{colors:{primary:"#007AFF",secondary:"#5856D6"}}}});var colors=(0,_runtime.getCustomColors)();(0,_vitest.expect)(colors).toEqual({primary:"#007AFF",secondary:"#5856D6"});});(0,_vitest.it)("should flatten nested colors",function(){(0,_runtime.setConfig)({theme:{extend:{colors:{brand:{light:"#FF6B6B",dark:"#CC0000"}}}}});var colors=(0,_runtime.getCustomColors)();(0,_vitest.expect)(colors).toEqual({"brand-light":"#FF6B6B","brand-dark":"#CC0000"});});(0,_vitest.it)("should handle mixed flat and nested colors",function(){(0,_runtime.setConfig)({theme:{extend:{colors:{primary:"#007AFF",brand:{light:"#FF6B6B",dark:"#CC0000"}}}}});var colors=(0,_runtime.getCustomColors)();(0,_vitest.expect)(colors).toEqual({primary:"#007AFF","brand-light":"#FF6B6B","brand-dark":"#CC0000"});});(0,_vitest.it)("should clear cache when config changes",function(){var style=(0,_runtime.tw)`bg-blue-500`;(0,_vitest.expect)(style).toBeDefined();(0,_vitest.expect)((0,_runtime.getCacheStats)().size).toBe(1);(0,_runtime.setConfig)({theme:{extend:{colors:{primary:"#007AFF"}}}});(0,_vitest.expect)((0,_runtime.getCacheStats)().size).toBe(0);});(0,_vitest.it)("should use custom colors in parsing",function(){(0,_runtime.setConfig)({theme:{extend:{colors:{primary:"#007AFF"}}}});var result=(0,_runtime.tw)`bg-primary`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#007AFF"});});});(0,_vitest.describe)("cache",function(){(0,_vitest.it)("should cache parsed styles",function(){var result1=(0,_runtime.tw)`m-4 p-2`;var result2=(0,_runtime.tw)`m-4 p-2`;(0,_vitest.expect)(result1).toBe(result2);});(0,_vitest.it)("should track cache stats",function(){var style1=(0,_runtime.tw)`m-4`;var style2=(0,_runtime.tw)`p-2`;var style3=(0,_runtime.tw)`bg-blue-500`;(0,_vitest.expect)(style1).toBeDefined();(0,_vitest.expect)(style2).toBeDefined();(0,_vitest.expect)(style3).toBeDefined();var stats=(0,_runtime.getCacheStats)();(0,_vitest.expect)(stats.size).toBe(3);(0,_vitest.expect)(stats.keys).toContain("m-4");(0,_vitest.expect)(stats.keys).toContain("p-2");(0,_vitest.expect)(stats.keys).toContain("bg-blue-500");});(0,_vitest.it)("should clear cache",function(){var style1=(0,_runtime.tw)`m-4`;var style2=(0,_runtime.tw)`p-2`;(0,_vitest.expect)(style1).toBeDefined();(0,_vitest.expect)(style2).toBeDefined();(0,_vitest.expect)((0,_runtime.getCacheStats)().size).toBe(2);(0,_runtime.clearCache)();(0,_vitest.expect)((0,_runtime.getCacheStats)().size).toBe(0);});});(0,_vitest.describe)("state modifiers",function(){(0,_vitest.it)("should return activeStyle when active: modifier is used",function(){var result=(0,_runtime.tw)`bg-blue-500 active:bg-blue-700`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toBeUndefined();});(0,_vitest.it)("should return disabledStyle when disabled: modifier is used",function(){var result=(0,_runtime.tw)`bg-blue-500 disabled:bg-gray-300`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toEqual({backgroundColor:"#d1d5dc"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toBeUndefined();});(0,_vitest.it)("should return both activeStyle and disabledStyle when both modifiers are used",function(){var result=(0,_runtime.tw)`bg-blue-500 active:bg-blue-700 disabled:bg-gray-300`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toEqual({backgroundColor:"#d1d5dc"});});(0,_vitest.it)("should merge base and active styles with multiple properties",function(){var result=(0,_runtime.tw)`p-4 m-2 bg-blue-500 active:bg-blue-700 active:p-6`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({padding:16,margin:8,backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6",padding:24});});(0,_vitest.it)("should handle only modifier classes (no base)",function(){var result=(0,_runtime.tw)`active:bg-blue-700`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});});(0,_vitest.it)("should work with twStyle function",function(){var result=(0,_runtime.twStyle)("bg-blue-500 active:bg-blue-700");(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});});(0,_vitest.it)("should provide raw hex values for animations",function(){var _result$activeStyle;var result=(0,_runtime.tw)`bg-blue-500 active:bg-blue-700`;(0,_vitest.expect)(result==null?void 0:result.style.backgroundColor).toBe("#2b7fff");(0,_vitest.expect)(result==null||(_result$activeStyle=result.activeStyle)==null?void 0:_result$activeStyle.backgroundColor).toBe("#1447e6");});(0,_vitest.it)("should return focusStyle when focus: modifier is used",function(){var result=(0,_runtime.tw)`bg-blue-500 focus:bg-blue-800`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.focusStyle).toEqual({backgroundColor:"#193cb8"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toBeUndefined();(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toBeUndefined();});(0,_vitest.it)("should return all three modifier styles when all are used",function(){var result=(0,_runtime.tw)`bg-blue-500 active:bg-blue-700 focus:bg-blue-800 disabled:bg-gray-300`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});(0,_vitest.expect)(result==null?void 0:result.focusStyle).toEqual({backgroundColor:"#193cb8"});(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toEqual({backgroundColor:"#d1d5dc"});});});});
+var _vitest=require("vitest");var _runtime=require("./runtime");(0,_vitest.describe)("runtime",function(){(0,_vitest.beforeEach)(function(){(0,_runtime.clearCache)();(0,_runtime.setConfig)({});});(0,_vitest.describe)("tw template tag",function(){(0,_vitest.it)("should parse static classes",function(){var result=(0,_runtime.tw)`m-4 p-2 bg-blue-500`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8,backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toBeUndefined();(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toBeUndefined();});(0,_vitest.it)("should handle interpolated values",function(){var isActive=true;var result=(0,_runtime.tw)`m-4 ${isActive&&"bg-blue-500"}`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,backgroundColor:"#2b7fff"});});(0,_vitest.it)("should handle conditional classes",function(){var isLarge=true;var result=(0,_runtime.tw)`p-4 ${isLarge?"text-xl":"text-sm"}`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({padding:16,fontSize:20});});(0,_vitest.it)("should handle falsy values",function(){var result=(0,_runtime.tw)`m-4 ${false} ${null} ${undefined} p-2`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8});});(0,_vitest.it)("should preserve zero values in template literals",function(){var result=(0,_runtime.tw)`opacity-${0} m-4`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({opacity:0,margin:16});});(0,_vitest.it)("should preserve empty string values in template literals",function(){var result=(0,_runtime.tw)`m-4 ${""}p-2`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8});});(0,_vitest.it)("should handle mixed falsy and truthy numeric values",function(){var spacing=0;var result=(0,_runtime.tw)`m-${spacing} p-4`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:0,padding:16});});(0,_vitest.it)("should return empty style object for empty className",function(){var result=(0,_runtime.tw)``;(0,_vitest.expect)(result).toEqual({style:{}});});(0,_vitest.it)("should normalize whitespace",function(){var result=(0,_runtime.tw)`m-4    p-2   bg-blue-500`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8,backgroundColor:"#2b7fff"});});});(0,_vitest.describe)("twStyle function",function(){(0,_vitest.it)("should parse className string",function(){var result=(0,_runtime.twStyle)("m-4 p-2 bg-blue-500");(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8,backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toBeUndefined();});(0,_vitest.it)("should return undefined for empty string",function(){var result=(0,_runtime.twStyle)("");(0,_vitest.expect)(result).toBeUndefined();});(0,_vitest.it)("should normalize whitespace",function(){var result=(0,_runtime.twStyle)("m-4    p-2   bg-blue-500");(0,_vitest.expect)(result==null?void 0:result.style).toEqual({margin:16,padding:8,backgroundColor:"#2b7fff"});});});(0,_vitest.describe)("setConfig",function(){(0,_vitest.it)("should set custom colors",function(){(0,_runtime.setConfig)({theme:{extend:{colors:{primary:"#007AFF",secondary:"#5856D6"}}}});var theme=(0,_runtime.getCustomTheme)();(0,_vitest.expect)(theme.colors).toEqual({primary:"#007AFF",secondary:"#5856D6"});});(0,_vitest.it)("should flatten nested colors",function(){(0,_runtime.setConfig)({theme:{extend:{colors:{brand:{light:"#FF6B6B",dark:"#CC0000"}}}}});var theme=(0,_runtime.getCustomTheme)();(0,_vitest.expect)(theme.colors).toEqual({"brand-light":"#FF6B6B","brand-dark":"#CC0000"});});(0,_vitest.it)("should handle mixed flat and nested colors",function(){(0,_runtime.setConfig)({theme:{extend:{colors:{primary:"#007AFF",brand:{light:"#FF6B6B",dark:"#CC0000"}}}}});var theme=(0,_runtime.getCustomTheme)();(0,_vitest.expect)(theme.colors).toEqual({primary:"#007AFF","brand-light":"#FF6B6B","brand-dark":"#CC0000"});});(0,_vitest.it)("should clear cache when config changes",function(){var style=(0,_runtime.tw)`bg-blue-500`;(0,_vitest.expect)(style).toBeDefined();(0,_vitest.expect)((0,_runtime.getCacheStats)().size).toBe(1);(0,_runtime.setConfig)({theme:{extend:{colors:{primary:"#007AFF"}}}});(0,_vitest.expect)((0,_runtime.getCacheStats)().size).toBe(0);});(0,_vitest.it)("should use custom colors in parsing",function(){(0,_runtime.setConfig)({theme:{extend:{colors:{primary:"#007AFF"}}}});var result=(0,_runtime.tw)`bg-primary`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#007AFF"});});});(0,_vitest.describe)("cache",function(){(0,_vitest.it)("should cache parsed styles",function(){var result1=(0,_runtime.tw)`m-4 p-2`;var result2=(0,_runtime.tw)`m-4 p-2`;(0,_vitest.expect)(result1).toBe(result2);});(0,_vitest.it)("should track cache stats",function(){var style1=(0,_runtime.tw)`m-4`;var style2=(0,_runtime.tw)`p-2`;var style3=(0,_runtime.tw)`bg-blue-500`;(0,_vitest.expect)(style1).toBeDefined();(0,_vitest.expect)(style2).toBeDefined();(0,_vitest.expect)(style3).toBeDefined();var stats=(0,_runtime.getCacheStats)();(0,_vitest.expect)(stats.size).toBe(3);(0,_vitest.expect)(stats.keys).toContain("m-4");(0,_vitest.expect)(stats.keys).toContain("p-2");(0,_vitest.expect)(stats.keys).toContain("bg-blue-500");});(0,_vitest.it)("should clear cache",function(){var style1=(0,_runtime.tw)`m-4`;var style2=(0,_runtime.tw)`p-2`;(0,_vitest.expect)(style1).toBeDefined();(0,_vitest.expect)(style2).toBeDefined();(0,_vitest.expect)((0,_runtime.getCacheStats)().size).toBe(2);(0,_runtime.clearCache)();(0,_vitest.expect)((0,_runtime.getCacheStats)().size).toBe(0);});});(0,_vitest.describe)("state modifiers",function(){(0,_vitest.it)("should return activeStyle when active: modifier is used",function(){var result=(0,_runtime.tw)`bg-blue-500 active:bg-blue-700`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toBeUndefined();});(0,_vitest.it)("should return disabledStyle when disabled: modifier is used",function(){var result=(0,_runtime.tw)`bg-blue-500 disabled:bg-gray-300`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toEqual({backgroundColor:"#d1d5dc"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toBeUndefined();});(0,_vitest.it)("should return both activeStyle and disabledStyle when both modifiers are used",function(){var result=(0,_runtime.tw)`bg-blue-500 active:bg-blue-700 disabled:bg-gray-300`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toEqual({backgroundColor:"#d1d5dc"});});(0,_vitest.it)("should merge base and active styles with multiple properties",function(){var result=(0,_runtime.tw)`p-4 m-2 bg-blue-500 active:bg-blue-700 active:p-6`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({padding:16,margin:8,backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6",padding:24});});(0,_vitest.it)("should handle only modifier classes (no base)",function(){var result=(0,_runtime.tw)`active:bg-blue-700`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});});(0,_vitest.it)("should work with twStyle function",function(){var result=(0,_runtime.twStyle)("bg-blue-500 active:bg-blue-700");(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});});(0,_vitest.it)("should provide raw hex values for animations",function(){var _result$activeStyle;var result=(0,_runtime.tw)`bg-blue-500 active:bg-blue-700`;(0,_vitest.expect)(result==null?void 0:result.style.backgroundColor).toBe("#2b7fff");(0,_vitest.expect)(result==null||(_result$activeStyle=result.activeStyle)==null?void 0:_result$activeStyle.backgroundColor).toBe("#1447e6");});(0,_vitest.it)("should return focusStyle when focus: modifier is used",function(){var result=(0,_runtime.tw)`bg-blue-500 focus:bg-blue-800`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.focusStyle).toEqual({backgroundColor:"#193cb8"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toBeUndefined();(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toBeUndefined();});(0,_vitest.it)("should return all three modifier styles when all are used",function(){var result=(0,_runtime.tw)`bg-blue-500 active:bg-blue-700 focus:bg-blue-800 disabled:bg-gray-300`;(0,_vitest.expect)(result==null?void 0:result.style).toEqual({backgroundColor:"#2b7fff"});(0,_vitest.expect)(result==null?void 0:result.activeStyle).toEqual({backgroundColor:"#1447e6"});(0,_vitest.expect)(result==null?void 0:result.focusStyle).toEqual({backgroundColor:"#193cb8"});(0,_vitest.expect)(result==null?void 0:result.disabledStyle).toEqual({backgroundColor:"#d1d5dc"});});});});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgcrea/react-native-tailwind",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Compile-time Tailwind CSS for React Native with zero runtime overhead",
   "author": "Olivier Louvignes <olivier@mgcrea.io> (https://github.com/mgcrea)",
   "homepage": "https://github.com/mgcrea/react-native-tailwind#readme",

package/src/babel/config-loader.test.ts

@@ -1,6 +1,6 @@
 import * as fs from "fs";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { extractCustomColors, findTailwindConfig, loadTailwindConfig } from "./config-loader";
+import { extractCustomTheme, findTailwindConfig, loadTailwindConfig } from "./config-loader";
 
 // Mock fs
 vi.mock("fs");
@@ -115,15 +115,15 @@ describe("config-loader", () => {
     });
   });
 
-  describe("extractCustomColors", () => {
-    it("should return empty object when no config found", () => {
+  describe("extractCustomTheme", () => {
+    it("should return empty theme when no config found", () => {
       vi.spyOn(fs, "existsSync").mockReturnValue(false);
 
-      const result = extractCustomColors("/project/src/file.ts");
-      expect(result).toEqual({});
+      const result = extractCustomTheme("/project/src/file.ts");
+      expect(result).toEqual({ colors: {}, fontFamily: {} });
     });
 
-    it("should return empty object when config has no theme", () => {
+    it("should return empty theme when config has no theme", () => {
       const configPath = "/project/tailwind.config.js";
 
       vi.spyOn(fs, "existsSync").mockImplementation((filepath) => filepath === configPath);
@@ -131,22 +131,24 @@ describe("config-loader", () => {
 
       // loadTailwindConfig will be called, but we've already tested it
       // For integration, we'd need to mock the entire flow
-      const result = extractCustomColors("/project/src/file.ts");
+      const result = extractCustomTheme("/project/src/file.ts");
 
       // Without actual config loading, this returns empty
-      expect(result).toEqual({});
+      expect(result).toEqual({ colors: {}, fontFamily: {} });
     });
 
-    it("should extract colors from theme.extend.colors", () => {
+    it("should extract colors and fontFamily from theme.extend", () => {
       // This would require complex mocking of the entire require flow
-      // Testing the logic: theme.extend.colors is preferred
+      // Testing the logic: theme.extend is preferred
       const colors = { brand: { light: "#fff", dark: "#000" } };
+      const fontFamily = { sans: ['"SF Pro"'], custom: ['"Custom Font"'] };
       const theme = {
-        extend: { colors },
+        extend: { colors, fontFamily },
       };
 
-      // If we had the config, we'd flatten the colors
+      // If we had the config, we'd flatten the colors and convert fontFamily
       expect(theme.extend.colors).toEqual(colors);
+      expect(theme.extend.fontFamily).toEqual(fontFamily);
     });
   });
 });

package/src/babel/config-loader.ts

@@ -13,8 +13,10 @@ export type TailwindConfig = {
   theme?: {
     extend?: {
       colors?: Record<string, string | Record<string, string>>;
+      fontFamily?: Record<string, string | string[]>;
     };
     colors?: Record<string, string | Record<string, string>>;
+    fontFamily?: Record<string, string | string[]>;
   };
 };
 
@@ -82,23 +84,31 @@ export function loadTailwindConfig(configPath: string): TailwindConfig | null {
 }
 
 /**
- * Extract custom colors from tailwind config
- * Prefers theme.extend.colors over theme.colors to avoid overriding defaults
+ * Custom theme configuration extracted from tailwind.config
  */
-export function extractCustomColors(filename: string): Record<string, string> {
+export type CustomTheme = {
+  colors: Record<string, string>;
+  fontFamily: Record<string, string>;
+};
+
+/**
+ * Extract all custom theme extensions from tailwind config
+ * Prefers theme.extend.* over theme.* to avoid overriding defaults
+ */
+export function extractCustomTheme(filename: string): CustomTheme {
   const projectDir = path.dirname(filename);
   const configPath = findTailwindConfig(projectDir);
 
   if (!configPath) {
-    return {};
+    return { colors: {}, fontFamily: {} };
   }
 
   const config = loadTailwindConfig(configPath);
   if (!config?.theme) {
-    return {};
+    return { colors: {}, fontFamily: {} };
   }
 
-  // Warn if using theme.colors instead of theme.extend.colors
+  // Extract colors
   /* v8 ignore next 5 */
   if (config.theme.colors && !config.theme.extend?.colors && process.env.NODE_ENV !== "production") {
     console.warn(
@@ -106,9 +116,31 @@ export function extractCustomColors(filename: string): Record<string, string> {
         "Use theme.extend.colors to add custom colors while keeping defaults.",
     );
   }
-
-  // Prefer theme.extend.colors
   const colors = config.theme.extend?.colors ?? config.theme.colors ?? {};
 
-  return flattenColors(colors);
+  // Extract fontFamily
+  /* v8 ignore next 5 */
+  if (config.theme.fontFamily && !config.theme.extend?.fontFamily && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[react-native-tailwind] Using theme.fontFamily will override all default font families. " +
+        "Use theme.extend.fontFamily to add custom fonts while keeping defaults.",
+    );
+  }
+  const fontFamily = config.theme.extend?.fontFamily ?? config.theme.fontFamily ?? {};
+
+  // Convert fontFamily values to strings (take first value if array)
+  const fontFamilyResult: Record<string, string> = {};
+  for (const [key, value] of Object.entries(fontFamily)) {
+    if (Array.isArray(value)) {
+      // Take first font in the array (React Native doesn't support font stacks)
+      fontFamilyResult[key] = value[0];
+    } else {
+      fontFamilyResult[key] = value;
+    }
+  }
+
+  return {
+    colors: flattenColors(colors),
+    fontFamily: fontFamilyResult,
+  };
 }

package/src/babel/plugin.ts

@@ -18,7 +18,8 @@ import {
 } from "../parser/index.js";
 import type { StyleObject } from "../types/core.js";
 import { generateStyleKey } from "../utils/styleKey.js";
-import { extractCustomColors } from "./config-loader.js";
+import type { CustomTheme } from "./config-loader.js";
+import { extractCustomTheme } from "./config-loader.js";
 
 // Import utility functions
 import type { SchemeModifierConfig } from "../types/config.js";
@@ -99,7 +100,7 @@ type PluginState = PluginPass & {
   hasColorSchemeImport: boolean;
   needsColorSchemeImport: boolean;
   colorSchemeVariableName: string;
-  customColors: Record<string, string>;
+  customTheme: CustomTheme;
   schemeModifierConfig: SchemeModifierConfig;
   supportedAttributes: Set<string>;
   attributePatterns: RegExp[];
@@ -231,8 +232,8 @@ export default function reactNativeTailwindBabelPlugin(
           state.hasTwImport = false;
           state.functionComponentsNeedingColorScheme = new Set();
 
-          // Load custom colors from tailwind.config.*
-          state.customColors = extractCustomColors(state.file.opts.filename ?? "");
+          // Load custom theme from tailwind.config.*
+          state.customTheme = extractCustomTheme(state.file.opts.filename ?? "");
 
           // Use scheme modifier config from plugin options
           state.schemeModifierConfig = schemeModifierConfig;
@@ -480,7 +481,7 @@ export default function reactNativeTailwindBabelPlugin(
               // Expand scheme: into dark: and light:
               const expanded = expandSchemeModifier(
                 modifier,
-                state.customColors,
+                state.customTheme.colors ?? {},
                 state.schemeModifierConfig.darkSuffix,
                 state.schemeModifierConfig.lightSuffix,
               );
@@ -507,7 +508,7 @@ export default function reactNativeTailwindBabelPlugin(
 
             if (componentSupport?.supportedModifiers.includes("placeholder")) {
               const placeholderClasses = placeholderModifiers.map((m) => m.baseClass).join(" ");
-              const placeholderColor = parsePlaceholderClasses(placeholderClasses, state.customColors);
+              const placeholderColor = parsePlaceholderClasses(placeholderClasses, state.customTheme.colors);
 
               if (placeholderColor) {
                 // Add or merge placeholderTextColor prop
@@ -561,7 +562,7 @@ export default function reactNativeTailwindBabelPlugin(
               // Add base classes
               if (hasBaseClasses) {
                 const baseClassName = baseClasses.join(" ");
-                const baseStyleObject = parseClassName(baseClassName, state.customColors);
+                const baseStyleObject = parseClassName(baseClassName, state.customTheme);
                 const baseStyleKey = generateStyleKey(baseClassName);
                 state.styleRegistry.set(baseStyleKey, baseStyleObject);
                 styleArrayElements.push(
@@ -611,7 +612,7 @@ export default function reactNativeTailwindBabelPlugin(
                 }
 
                 const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
-                const modifierStyleObject = parseClassName(modifierClassNames, state.customColors);
+                const modifierStyleObject = parseClassName(modifierClassNames, state.customTheme);
                 const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
                 state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
 
@@ -653,7 +654,7 @@ export default function reactNativeTailwindBabelPlugin(
             // Add base classes
             if (hasBaseClasses) {
               const baseClassName = baseClasses.join(" ");
-              const baseStyleObject = parseClassName(baseClassName, state.customColors);
+              const baseStyleObject = parseClassName(baseClassName, state.customTheme);
               const baseStyleKey = generateStyleKey(baseClassName);
               state.styleRegistry.set(baseStyleKey, baseStyleObject);
               styleExpressions.push(
@@ -815,7 +816,7 @@ export default function reactNativeTailwindBabelPlugin(
             return;
           }
 
-          const styleObject = parseClassName(classNameForStyle, state.customColors);
+          const styleObject = parseClassName(classNameForStyle, state.customTheme);
           const styleKey = generateStyleKey(classNameForStyle);
           state.styleRegistry.set(styleKey, styleObject);
 

package/src/babel/utils/colorSchemeModifierProcessing.ts

@@ -3,7 +3,7 @@
  */
 
 import type * as BabelTypes from "@babel/types";
-import type { ColorSchemeModifierType, ParsedModifier } from "../../parser/index.js";
+import type { ColorSchemeModifierType, CustomTheme, ParsedModifier } from "../../parser/index.js";
 import type { StyleObject } from "../../types/core.js";
 
 /**
@@ -12,7 +12,7 @@ import type { StyleObject } from "../../types/core.js";
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export interface ColorSchemeModifierProcessingState {
   styleRegistry: Map<string, StyleObject>;
-  customColors: Record<string, string>;
+  customTheme: CustomTheme;
   stylesIdentifier: string;
   needsColorSchemeImport: boolean;
   colorSchemeVariableName: string;
@@ -38,7 +38,7 @@ export interface ColorSchemeModifierProcessingState {
 export function processColorSchemeModifiers(
   colorSchemeModifiers: ParsedModifier[],
   state: ColorSchemeModifierProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   t: typeof BabelTypes,
 ): BabelTypes.Expression[] {
@@ -65,7 +65,7 @@ export function processColorSchemeModifiers(
   for (const [scheme, modifiers] of modifiersByScheme) {
     // Parse all classes for this color scheme together
     const classNames = modifiers.map((m) => m.baseClass).join(" ");
-    const styleObject = parseClassName(classNames, state.customColors);
+    const styleObject = parseClassName(classNames, state.customTheme);
     const styleKey = generateStyleKey(`${scheme}_${classNames}`);
 
     // Register style in the registry

package/src/babel/utils/dynamicProcessing.ts

@@ -4,7 +4,7 @@
 
 import type { NodePath } from "@babel/core";
 import type * as BabelTypes from "@babel/types";
-import type { ParsedModifier } from "../../parser/index.js";
+import type { CustomTheme, ParsedModifier } from "../../parser/index.js";
 import type { SchemeModifierConfig } from "../../types/config.js";
 import type { StyleObject } from "../../types/core.js";
 
@@ -14,7 +14,7 @@ import type { StyleObject } from "../../types/core.js";
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export interface DynamicProcessingState {
   styleRegistry: Map<string, StyleObject>;
-  customColors: Record<string, string>;
+  customTheme: CustomTheme;
   schemeModifierConfig: SchemeModifierConfig;
   stylesIdentifier: string;
   needsPlatformImport: boolean;
@@ -37,7 +37,7 @@ export type SplitModifierClassesFn = (className: string) => {
 export type ProcessPlatformModifiersFn = (
   modifiers: ParsedModifier[],
   state: DynamicProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   t: typeof BabelTypes,
 ) => BabelTypes.Expression;
@@ -48,7 +48,7 @@ export type ProcessPlatformModifiersFn = (
 export type ProcessColorSchemeModifiersFn = (
   modifiers: ParsedModifier[],
   state: DynamicProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   t: typeof BabelTypes,
 ) => BabelTypes.Expression[];
@@ -85,7 +85,7 @@ export type DynamicExpressionResult = {
 export function processDynamicExpression(
   expression: BabelTypes.Expression,
   state: DynamicProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   splitModifierClasses: SplitModifierClassesFn,
   processPlatformModifiers: ProcessPlatformModifiersFn,
@@ -164,7 +164,7 @@ export function processDynamicExpression(
 function processTemplateLiteral(
   node: BabelTypes.TemplateLiteral,
   state: DynamicProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   splitModifierClasses: SplitModifierClassesFn,
   processPlatformModifiers: ProcessPlatformModifiersFn,
@@ -262,7 +262,7 @@ function processTemplateLiteral(
 function processConditionalExpression(
   node: BabelTypes.ConditionalExpression,
   state: DynamicProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   splitModifierClasses: SplitModifierClassesFn,
   processPlatformModifiers: ProcessPlatformModifiersFn,
@@ -325,7 +325,7 @@ function processConditionalExpression(
 function processLogicalExpression(
   node: BabelTypes.LogicalExpression,
   state: DynamicProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   splitModifierClasses: SplitModifierClassesFn,
   processPlatformModifiers: ProcessPlatformModifiersFn,
@@ -376,7 +376,7 @@ function processLogicalExpression(
 function processStringOrExpressionHelper(
   node: BabelTypes.StringLiteral | BabelTypes.Expression,
   state: DynamicProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   splitModifierClasses: SplitModifierClassesFn,
   processPlatformModifiers: ProcessPlatformModifiersFn,
@@ -405,7 +405,7 @@ function processStringOrExpressionHelper(
         // Expand scheme: into dark: and light:
         const expanded = expandSchemeModifier(
           modifier,
-          state.customColors,
+          state.customTheme.colors ?? {},
           state.schemeModifierConfig.darkSuffix ?? "-dark",
           state.schemeModifierConfig.lightSuffix ?? "-light",
         );
@@ -425,7 +425,7 @@ function processStringOrExpressionHelper(
     // Process base classes
     if (baseClasses.length > 0) {
       const baseClassName = baseClasses.join(" ");
-      const styleObject = parseClassName(baseClassName, state.customColors);
+      const styleObject = parseClassName(baseClassName, state.customTheme);
       const styleKey = generateStyleKey(baseClassName);
       state.styleRegistry.set(styleKey, styleObject);
       styleElements.push(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)));

package/src/babel/utils/modifierProcessing.ts

@@ -3,7 +3,7 @@
  */
 
 import type * as BabelTypes from "@babel/types";
-import type { ModifierType, ParsedModifier } from "../../parser/index.js";
+import type { CustomTheme, ModifierType, ParsedModifier } from "../../parser/index.js";
 import type { StyleObject } from "../../types/core.js";
 import { getStatePropertyForModifier } from "./componentSupport.js";
 
@@ -13,7 +13,7 @@ import { getStatePropertyForModifier } from "./componentSupport.js";
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export interface ModifierProcessingState {
   styleRegistry: Map<string, StyleObject>;
-  customColors: Record<string, string>;
+  customTheme: CustomTheme;
   stylesIdentifier: string;
 }
 
@@ -24,7 +24,7 @@ export interface ModifierProcessingState {
 export function processStaticClassNameWithModifiers(
   className: string,
   state: ModifierProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   splitModifierClasses: (className: string) => { baseClasses: string[]; modifierClasses: ParsedModifier[] },
   t: typeof BabelTypes,
@@ -35,7 +35,7 @@ export function processStaticClassNameWithModifiers(
   let baseStyleExpression: BabelTypes.Node | null = null;
   if (baseClasses.length > 0) {
     const baseClassName = baseClasses.join(" ");
-    const baseStyleObject = parseClassName(baseClassName, state.customColors);
+    const baseStyleObject = parseClassName(baseClassName, state.customTheme);
     const baseStyleKey = generateStyleKey(baseClassName);
     state.styleRegistry.set(baseStyleKey, baseStyleObject);
     baseStyleExpression = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey));
@@ -66,7 +66,7 @@ export function processStaticClassNameWithModifiers(
   for (const [modifierType, modifiers] of modifiersByType) {
     // Parse all modifier classes together
     const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
-    const modifierStyleObject = parseClassName(modifierClassNames, state.customColors);
+    const modifierStyleObject = parseClassName(modifierClassNames, state.customTheme);
     const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
     state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
 

package/src/babel/utils/platformModifierProcessing.ts

@@ -3,7 +3,7 @@
  */
 
 import type * as BabelTypes from "@babel/types";
-import type { ParsedModifier, PlatformModifierType } from "../../parser/index.js";
+import type { CustomTheme, ParsedModifier, PlatformModifierType } from "../../parser/index.js";
 import type { StyleObject } from "../../types/core.js";
 
 /**
@@ -12,7 +12,7 @@ import type { StyleObject } from "../../types/core.js";
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export interface PlatformModifierProcessingState {
   styleRegistry: Map<string, StyleObject>;
-  customColors: Record<string, string>;
+  customTheme: CustomTheme;
   stylesIdentifier: string;
   needsPlatformImport: boolean;
 }
@@ -34,7 +34,7 @@ export interface PlatformModifierProcessingState {
 export function processPlatformModifiers(
   platformModifiers: ParsedModifier[],
   state: PlatformModifierProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   t: typeof BabelTypes,
 ): BabelTypes.Expression {
@@ -61,7 +61,7 @@ export function processPlatformModifiers(
   for (const [platform, modifiers] of modifiersByPlatform) {
     // Parse all classes for this platform together
     const classNames = modifiers.map((m) => m.baseClass).join(" ");
-    const styleObject = parseClassName(classNames, state.customColors);
+    const styleObject = parseClassName(classNames, state.customTheme);
     const styleKey = generateStyleKey(`${platform}_${classNames}`);
 
     // Register style in the registry

package/src/babel/utils/twProcessing.ts

@@ -4,7 +4,7 @@
 
 import type { NodePath } from "@babel/core";
 import type * as BabelTypes from "@babel/types";
-import type { ModifierType, ParsedModifier } from "../../parser/index.js";
+import type { CustomTheme, ModifierType, ParsedModifier } from "../../parser/index.js";
 import { expandSchemeModifier, isSchemeModifier } from "../../parser/index.js";
 import type { SchemeModifierConfig } from "../../types/config.js";
 import type { StyleObject } from "../../types/core.js";
@@ -15,7 +15,7 @@ import type { StyleObject } from "../../types/core.js";
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export interface TwProcessingState {
   styleRegistry: Map<string, StyleObject>;
-  customColors: Record<string, string>;
+  customTheme: CustomTheme;
   schemeModifierConfig: SchemeModifierConfig;
   stylesIdentifier: string;
 }
@@ -28,7 +28,7 @@ export function processTwCall(
   className: string,
   path: NodePath,
   state: TwProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   splitModifierClasses: (className: string) => { baseClasses: string[]; modifierClasses: ParsedModifier[] },
   t: typeof BabelTypes,
@@ -42,7 +42,7 @@ export function processTwCall(
       // Expand scheme: into dark: and light:
       const expanded = expandSchemeModifier(
         modifier,
-        state.customColors,
+        state.customTheme.colors ?? {},
         state.schemeModifierConfig.darkSuffix ?? "-dark",
         state.schemeModifierConfig.lightSuffix ?? "-light",
       );
@@ -59,7 +59,7 @@ export function processTwCall(
   // Parse and add base styles
   if (baseClasses.length > 0) {
     const baseClassName = baseClasses.join(" ");
-    const baseStyleObject = parseClassName(baseClassName, state.customColors);
+    const baseStyleObject = parseClassName(baseClassName, state.customTheme);
     const baseStyleKey = generateStyleKey(baseClassName);
     state.styleRegistry.set(baseStyleKey, baseStyleObject);
 
@@ -89,7 +89,7 @@ export function processTwCall(
   // Add modifier styles
   for (const [modifierType, modifiers] of modifiersByType) {
     const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
-    const modifierStyleObject = parseClassName(modifierClassNames, state.customColors);
+    const modifierStyleObject = parseClassName(modifierClassNames, state.customTheme);
     const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
     state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
 

package/src/parser/index.ts

@@ -14,18 +14,26 @@ import { parseSpacing } from "./spacing";
 import { parseTransform } from "./transforms";
 import { parseTypography } from "./typography";
 
+/**
+ * Custom theme configuration (subset of tailwind.config theme extensions)
+ */
+export type CustomTheme = {
+  colors?: Record<string, string>;
+  fontFamily?: Record<string, string>;
+};
+
 /**
  * Parse a className string and return a React Native style object
  * @param className - Space-separated class names
- * @param customColors - Optional custom colors from tailwind.config
+ * @param customTheme - Optional custom theme from tailwind.config
  * @returns React Native style object
  */
-export function parseClassName(className: string, customColors?: Record<string, string>): StyleObject {
+export function parseClassName(className: string, customTheme?: CustomTheme): StyleObject {
   const classes = className.split(/\s+/).filter(Boolean);
   const style: StyleObject = {};
 
   for (const cls of classes) {
-    const parsedStyle = parseClass(cls, customColors);
+    const parsedStyle = parseClass(cls, customTheme);
     Object.assign(style, parsedStyle);
   }
 
@@ -35,19 +43,19 @@ export function parseClassName(className: string, customColors?: Record<string,
 /**
  * Parse a single class name
  * @param cls - Single class name
- * @param customColors - Optional custom colors from tailwind.config
+ * @param customTheme - Optional custom theme from tailwind.config
  * @returns React Native style object
  */
-export function parseClass(cls: string, customColors?: Record<string, string>): StyleObject {
+export function parseClass(cls: string, customTheme?: CustomTheme): StyleObject {
   // Try each parser in order
   // Note: parseBorder must come before parseColor to avoid border-[3px] being parsed as a color
-  // parseColor gets custom colors, others don't need it
+  // parseColor and parseTypography get custom theme, others don't need it
   const parsers: Array<(cls: string) => StyleObject | null> = [
     parseSpacing,
     parseBorder,
-    (cls: string) => parseColor(cls, customColors),
+    (cls: string) => parseColor(cls, customTheme?.colors),
     parseLayout,
-    parseTypography,
+    (cls: string) => parseTypography(cls, customTheme?.fontFamily),
     parseSizing,
     parseShadow,
     parseAspectRatio,

package/src/parser/typography.ts

@@ -164,8 +164,20 @@ function parseArbitraryLineHeight(value: string): number | null {
 
 /**
  * Parse typography classes
+ * @param cls - Class name to parse
+ * @param customFontFamily - Optional custom fontFamily from tailwind.config
  */
-export function parseTypography(cls: string): StyleObject | null {
+export function parseTypography(cls: string, customFontFamily?: Record<string, string>): StyleObject | null {
+  // Merge custom fontFamily with defaults (custom takes precedence)
+  const fontFamilyMap = customFontFamily
+    ? {
+        ...FONT_FAMILY_MAP,
+        ...Object.fromEntries(
+          Object.entries(customFontFamily).map(([key, value]) => [`font-${key}`, { fontFamily: value }]),
+        ),
+      }
+    : FONT_FAMILY_MAP;
+
   // Font size: text-base, text-lg, text-[18px], etc.
   if (cls.startsWith("text-")) {
     const sizeKey = cls.substring(5);
@@ -202,7 +214,7 @@ export function parseTypography(cls: string): StyleObject | null {
 
   // Try each lookup table in order
   return (
-    FONT_FAMILY_MAP[cls] ??
+    fontFamilyMap[cls] ??
     FONT_WEIGHT_MAP[cls] ??
     FONT_STYLE_MAP[cls] ??
     TEXT_ALIGN_MAP[cls] ??