@mgcrea/react-native-tailwind 0.10.0 → 0.11.0

package/README.md

@@ -425,7 +425,7 @@ export function RuntimeExample() {
 
 #### Configuration
 
-Configure custom colors and other theme options using `setConfig()`:
+Configure custom colors and font families using `setConfig()`:
 
 ```typescript
 import { setConfig } from '@mgcrea/react-native-tailwind/runtime';
@@ -442,13 +442,17 @@ setConfig({
           dark: '#CC0000',
         },
       },
+      fontFamily: {
+        sans: ['"SF Pro Rounded"'],
+        custom: ['"My Custom Font"'],
+      },
     },
   },
 });
 
-// Now you can use custom colors
+// Now you can use custom theme
 <View style={tw`bg-primary p-4`} />
-<Text style={tw`text-brand-light`}>Custom color</Text>
+<Text style={tw`text-brand-light font-custom`}>Custom styling</Text>
 ```
 
 #### API Reference
@@ -1365,7 +1369,7 @@ This pattern allows you to build component libraries with optimized default styl
 
 **Available shades:** `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`
 
-> **Note:** You can extend the color palette with custom colors via `tailwind.config.*` — see [Custom Colors](#custom-colors)
+> **Note:** You can extend the color palette with custom colors via `tailwind.config.*` — see [Custom Theme Extensions](#custom-theme-extensions)
 
 **Opacity Modifiers:**
 
@@ -1911,9 +1915,9 @@ Use arbitrary values for custom sizes, spacing, and borders not in the preset sc
 
 > **Note:** CSS units (`rem`, `em`, `vh`, `vw`) are not supported by React Native.
 
-### Custom Colors
+### Custom Theme Extensions
 
-Extend the default color palette via `tailwind.config.*` in your project root:
+Extend the default color palette and font families via `tailwind.config.*` in your project root:
 
 ```javascript
 // tailwind.config.mjs
@@ -1929,16 +1933,21 @@ export default {
           dark: "#0c4a6e",
         },
       },
+      fontFamily: {
+        sans: ['"SF Pro Rounded"'],
+        custom: ['"My Custom Font"'],
+      },
     },
   },
 };
 ```
 
-Then use your custom colors:
+Then use your custom theme:
 
 ```tsx
 <View className="bg-primary p-4">
-  <Text className="text-brand">Custom branded text</Text>
+  <Text className="text-brand font-custom">Custom branded text</Text>
+  <Text className="font-sans">SF Pro Rounded text</Text>
   <View className="bg-brand-light rounded-lg" />
 </View>
 ```
@@ -1946,13 +1955,14 @@ Then use your custom colors:
 **How it works:**
 
 - Babel plugin discovers config by traversing up from source files
-- Custom colors merged with defaults at build time (custom takes precedence)
-- Nested objects flattened with dash notation: `brand.light` → `brand-light`
+- Custom theme merged with defaults at build time (custom takes precedence)
+- Nested color objects flattened with dash notation: `brand.light` → `brand-light`
+- Font families use first font in array (React Native doesn't support font stacks)
 - Zero runtime overhead — all loading happens during compilation
 
 **Supported formats:** `.js`, `.mjs`, `.cjs`, `.ts`
 
-> **Tip:** Use `theme.extend.colors` to keep default Tailwind colors. Using `theme.colors` directly will override all defaults.
+> **Tip:** Use `theme.extend.*` to keep defaults. Using `theme.colors` or `theme.fontFamily` directly will override all defaults.
 
 ### Programmatic API
 
@@ -1961,10 +1971,17 @@ Access the parser and constants programmatically:
 ```typescript
 import { parseClassName, COLORS, SPACING_SCALE } from "@mgcrea/react-native-tailwind";
 
-// Parse className strings
-const _twStyles = parseClassName("m-4 p-2 bg-blue-500");
+// Parse className strings (no custom theme)
+const styles = parseClassName("m-4 p-2 bg-blue-500");
 // Returns: { margin: 16, padding: 8, backgroundColor: '#3B82F6' }
 
+// Parse with custom theme
+const customStyles = parseClassName("m-4 bg-primary font-custom", {
+  colors: { primary: "#1d4ed8" },
+  fontFamily: { custom: "My Custom Font" },
+});
+// Returns: { margin: 16, backgroundColor: '#1d4ed8', fontFamily: 'My Custom Font' }
+
 // Access default scales
 const blueColor = COLORS["blue-500"]; // '#3B82F6'
 const spacing = SPACING_SCALE[4]; // 16

package/dist/babel/config-loader.d.ts

@@ -6,8 +6,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[]>;
     };
 };
 /**
@@ -19,7 +21,14 @@ export declare function findTailwindConfig(startDir: string): string | null;
  */
 export declare 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 declare 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 declare function extractCustomTheme(filename: string): CustomTheme;

package/dist/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/dist/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/dist/babel/index.cjs

@@ -1678,7 +1678,13 @@ function parseArbitraryLineHeight(value) {
   }
   return null;
 }
-function parseTypography(cls) {
+function parseTypography(cls, customFontFamily) {
+  const fontFamilyMap = customFontFamily ? {
+    ...FONT_FAMILY_MAP,
+    ...Object.fromEntries(
+      Object.entries(customFontFamily).map(([key, value]) => [`font-${key}`, { fontFamily: value }])
+    )
+  } : FONT_FAMILY_MAP;
   if (cls.startsWith("text-")) {
     const sizeKey = cls.substring(5);
     const arbitraryValue = parseArbitraryFontSize(sizeKey);
@@ -1701,7 +1707,7 @@ function parseTypography(cls) {
       return { lineHeight };
     }
   }
-  return FONT_FAMILY_MAP[cls] ?? FONT_WEIGHT_MAP[cls] ?? FONT_STYLE_MAP[cls] ?? TEXT_ALIGN_MAP[cls] ?? TEXT_DECORATION_MAP[cls] ?? TEXT_TRANSFORM_MAP[cls] ?? LINE_HEIGHT_MAP[cls] ?? TRACKING_MAP[cls] ?? null;
+  return fontFamilyMap[cls] ?? FONT_WEIGHT_MAP[cls] ?? FONT_STYLE_MAP[cls] ?? TEXT_ALIGN_MAP[cls] ?? TEXT_DECORATION_MAP[cls] ?? TEXT_TRANSFORM_MAP[cls] ?? LINE_HEIGHT_MAP[cls] ?? TRACKING_MAP[cls] ?? null;
 }
 
 // src/parser/placeholder.ts
@@ -1842,22 +1848,22 @@ function splitModifierClasses(className) {
 }
 
 // src/parser/index.ts
-function parseClassName(className, customColors) {
+function parseClassName(className, customTheme) {
   const classes = className.split(/\s+/).filter(Boolean);
   const style = {};
   for (const cls of classes) {
-    const parsedStyle = parseClass(cls, customColors);
+    const parsedStyle = parseClass(cls, customTheme);
     Object.assign(style, parsedStyle);
   }
   return style;
 }
-function parseClass(cls, customColors) {
+function parseClass(cls, customTheme) {
   const parsers = [
     parseSpacing,
     parseBorder,
-    (cls2) => parseColor(cls2, customColors),
+    (cls2) => parseColor(cls2, customTheme?.colors),
     parseLayout,
-    parseTypography,
+    (cls2) => parseTypography(cls2, customTheme?.fontFamily),
     parseSizing,
     parseShadow,
     parseAspectRatio,
@@ -1925,15 +1931,15 @@ function loadTailwindConfig(configPath) {
     return null;
   }
 }
-function extractCustomColors(filename) {
+function extractCustomTheme(filename) {
   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: {} };
   }
   if (config.theme.colors && !config.theme.extend?.colors && process.env.NODE_ENV !== "production") {
     console.warn(
@@ -1941,7 +1947,24 @@ function extractCustomColors(filename) {
     );
   }
   const colors = config.theme.extend?.colors ?? config.theme.colors ?? {};
-  return flattenColors(colors);
+  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 ?? {};
+  const fontFamilyResult = {};
+  for (const [key, value] of Object.entries(fontFamily)) {
+    if (Array.isArray(value)) {
+      fontFamilyResult[key] = value[0];
+    } else {
+      fontFamilyResult[key] = value;
+    }
+  }
+  return {
+    colors: flattenColors(colors),
+    fontFamily: fontFamilyResult
+  };
 }
 
 // src/babel/utils/attributeMatchers.ts
@@ -1997,7 +2020,7 @@ function processColorSchemeModifiers(colorSchemeModifiers, state, parseClassName
   const conditionalExpressions = [];
   for (const [scheme, modifiers] of modifiersByScheme) {
     const classNames = modifiers.map((m) => m.baseClass).join(" ");
-    const styleObject = parseClassName2(classNames, state.customColors);
+    const styleObject = parseClassName2(classNames, state.customTheme);
     const styleKey = generateStyleKey2(`${scheme}_${classNames}`);
     state.styleRegistry.set(styleKey, styleObject);
     const colorSchemeCheck = t.binaryExpression(
@@ -2252,7 +2275,7 @@ function processStringOrExpressionHelper(node, state, parseClassName2, generateS
       if (isSchemeModifier2(modifier.modifier)) {
         const expanded = expandSchemeModifier2(
           modifier,
-          state.customColors,
+          state.customTheme.colors ?? {},
           state.schemeModifierConfig.darkSuffix ?? "-dark",
           state.schemeModifierConfig.lightSuffix ?? "-light"
         );
@@ -2266,7 +2289,7 @@ function processStringOrExpressionHelper(node, state, parseClassName2, generateS
     const styleElements = [];
     if (baseClasses.length > 0) {
       const baseClassName = baseClasses.join(" ");
-      const styleObject = parseClassName2(baseClassName, state.customColors);
+      const styleObject = parseClassName2(baseClassName, state.customTheme);
       const styleKey = generateStyleKey2(baseClassName);
       state.styleRegistry.set(styleKey, styleObject);
       styleElements.push(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)));
@@ -2373,7 +2396,7 @@ function processStaticClassNameWithModifiers(className, state, parseClassName2,
   let baseStyleExpression = null;
   if (baseClasses.length > 0) {
     const baseClassName = baseClasses.join(" ");
-    const baseStyleObject = parseClassName2(baseClassName, state.customColors);
+    const baseStyleObject = parseClassName2(baseClassName, state.customTheme);
     const baseStyleKey = generateStyleKey2(baseClassName);
     state.styleRegistry.set(baseStyleKey, baseStyleObject);
     baseStyleExpression = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey));
@@ -2394,7 +2417,7 @@ function processStaticClassNameWithModifiers(className, state, parseClassName2,
   }
   for (const [modifierType, modifiers] of modifiersByType) {
     const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
-    const modifierStyleObject = parseClassName2(modifierClassNames, state.customColors);
+    const modifierStyleObject = parseClassName2(modifierClassNames, state.customTheme);
     const modifierStyleKey = generateStyleKey2(`${modifierType}_${modifierClassNames}`);
     state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
     const stateProperty = getStatePropertyForModifier(modifierType);
@@ -2443,7 +2466,7 @@ function processPlatformModifiers(platformModifiers, state, parseClassName2, gen
   const selectProperties = [];
   for (const [platform, modifiers] of modifiersByPlatform) {
     const classNames = modifiers.map((m) => m.baseClass).join(" ");
-    const styleObject = parseClassName2(classNames, state.customColors);
+    const styleObject = parseClassName2(classNames, state.customTheme);
     const styleKey = generateStyleKey2(`${platform}_${classNames}`);
     state.styleRegistry.set(styleKey, styleObject);
     const styleReference = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
@@ -2708,7 +2731,7 @@ function processTwCall(className, path2, state, parseClassName2, generateStyleKe
     if (isSchemeModifier(modifier.modifier)) {
       const expanded = expandSchemeModifier(
         modifier,
-        state.customColors,
+        state.customTheme.colors ?? {},
         state.schemeModifierConfig.darkSuffix ?? "-dark",
         state.schemeModifierConfig.lightSuffix ?? "-light"
       );
@@ -2720,7 +2743,7 @@ function processTwCall(className, path2, state, parseClassName2, generateStyleKe
   const objectProperties = [];
   if (baseClasses.length > 0) {
     const baseClassName = baseClasses.join(" ");
-    const baseStyleObject = parseClassName2(baseClassName, state.customColors);
+    const baseStyleObject = parseClassName2(baseClassName, state.customTheme);
     const baseStyleKey = generateStyleKey2(baseClassName);
     state.styleRegistry.set(baseStyleKey, baseStyleObject);
     objectProperties.push(
@@ -2744,7 +2767,7 @@ function processTwCall(className, path2, state, parseClassName2, generateStyleKe
   }
   for (const [modifierType, modifiers] of modifiersByType) {
     const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
-    const modifierStyleObject = parseClassName2(modifierClassNames, state.customColors);
+    const modifierStyleObject = parseClassName2(modifierClassNames, state.customTheme);
     const modifierStyleKey = generateStyleKey2(`${modifierType}_${modifierClassNames}`);
     state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
     const propertyName = `${modifierType}Style`;
@@ -2848,7 +2871,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           state.twImportNames = /* @__PURE__ */ new Set();
           state.hasTwImport = false;
           state.functionComponentsNeedingColorScheme = /* @__PURE__ */ new Set();
-          state.customColors = extractCustomColors(state.file.opts.filename ?? "");
+          state.customTheme = extractCustomTheme(state.file.opts.filename ?? "");
           state.schemeModifierConfig = schemeModifierConfig;
         },
         exit(path2, state) {
@@ -3014,7 +3037,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
             if (isSchemeModifier(modifier.modifier)) {
               const expanded = expandSchemeModifier(
                 modifier,
-                state.customColors,
+                state.customTheme.colors ?? {},
                 state.schemeModifierConfig.darkSuffix,
                 state.schemeModifierConfig.lightSuffix
               );
@@ -3034,7 +3057,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
             const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
             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) {
                 addOrMergePlaceholderTextColorProp(jsxOpeningElement, placeholderColor, t);
               }
@@ -3070,7 +3093,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
               const styleArrayElements = [];
               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(
@@ -3110,7 +3133,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
                   continue;
                 }
                 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);
                 const stateProperty = getStatePropertyForModifier(modifierType);
@@ -3140,7 +3163,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
             const styleExpressions = [];
             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(
@@ -3256,7 +3279,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
             path2.remove();
             return;
           }
-          const styleObject = parseClassName(classNameForStyle, state.customColors);
+          const styleObject = parseClassName(classNameForStyle, state.customTheme);
           const styleKey = generateStyleKey(classNameForStyle);
           state.styleRegistry.set(styleKey, styleObject);
           const styleAttribute = findStyleAttribute(path2, targetStyleProp, t);

package/dist/babel/plugin.d.ts

@@ -5,6 +5,7 @@
 import type { NodePath, PluginObj, PluginPass } from "@babel/core";
 import * as BabelTypes from "@babel/types";
 import type { StyleObject } from "../types/core.js";
+import type { CustomTheme } from "./config-loader.js";
 import type { SchemeModifierConfig } from "../types/config.js";
 /**
  * Plugin options
@@ -50,7 +51,7 @@ type PluginState = PluginPass & {
     hasColorSchemeImport: boolean;
     needsColorSchemeImport: boolean;
     colorSchemeVariableName: string;
-    customColors: Record<string, string>;
+    customTheme: CustomTheme;
     schemeModifierConfig: SchemeModifierConfig;
     supportedAttributes: Set<string>;
     attributePatterns: RegExp[];

package/dist/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/dist/babel/utils/colorSchemeModifierProcessing.d.ts

@@ -2,14 +2,14 @@
  * Utility functions for processing color scheme modifiers (dark:, light:)
  */
 import type * as BabelTypes from "@babel/types";
-import type { ParsedModifier } from "../../parser/index.js";
+import type { CustomTheme, ParsedModifier } from "../../parser/index.js";
 import type { StyleObject } from "../../types/core.js";
 /**
  * Plugin state interface (subset needed for color scheme modifier processing)
  */
 export interface ColorSchemeModifierProcessingState {
     styleRegistry: Map<string, StyleObject>;
-    customColors: Record<string, string>;
+    customTheme: CustomTheme;
     stylesIdentifier: string;
     needsColorSchemeImport: boolean;
     colorSchemeVariableName: string;
@@ -31,4 +31,4 @@ export interface ColorSchemeModifierProcessingState {
  *   _twColorScheme === 'light' && styles._light_bg_white
  * ]
  */
-export declare function processColorSchemeModifiers(colorSchemeModifiers: ParsedModifier[], state: ColorSchemeModifierProcessingState, parseClassName: (className: string, customColors: Record<string, string>) => StyleObject, generateStyleKey: (className: string) => string, t: typeof BabelTypes): BabelTypes.Expression[];
+export declare function processColorSchemeModifiers(colorSchemeModifiers: ParsedModifier[], state: ColorSchemeModifierProcessingState, parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject, generateStyleKey: (className: string) => string, t: typeof BabelTypes): BabelTypes.Expression[];