@mgcrea/react-native-tailwind 0.5.2 → 0.6.1

package/src/config/palettes.ts

@@ -0,0 +1,304 @@
+export type TailwindPalette = {
+  "50": string;
+  "100": string;
+  "200": string;
+  "300": string;
+  "400": string;
+  "500": string;
+  "600": string;
+  "700": string;
+  "800": string;
+  "900": string;
+  "950": string;
+};
+
+export const TAILWIND_PALETTES = {
+  red: {
+    "50": "#fef2f2",
+    "100": "#ffe2e2",
+    "200": "#ffc9c9",
+    "300": "#ffa2a2",
+    "400": "#ff6467",
+    "500": "#fb2c36",
+    "600": "#e7000b",
+    "700": "#c10007",
+    "800": "#9f0712",
+    "900": "#82181a",
+    "950": "#460809",
+  },
+  orange: {
+    "50": "#fff7ed",
+    "100": "#ffedd4",
+    "200": "#ffd6a7",
+    "300": "#ffb86a",
+    "400": "#ff8904",
+    "500": "#ff6900",
+    "600": "#f54900",
+    "700": "#ca3500",
+    "800": "#9f2d00",
+    "900": "#7e2a0c",
+    "950": "#441306",
+  },
+  amber: {
+    "50": "#fffbeb",
+    "100": "#fef3c6",
+    "200": "#fee685",
+    "300": "#ffd230",
+    "400": "#ffb900",
+    "500": "#fe9a00",
+    "600": "#e17100",
+    "700": "#bb4d00",
+    "800": "#973c00",
+    "900": "#7b3306",
+    "950": "#461901",
+  },
+  yellow: {
+    "50": "#fefce8",
+    "100": "#fef9c2",
+    "200": "#fff085",
+    "300": "#ffdf20",
+    "400": "#fdc700",
+    "500": "#f0b100",
+    "600": "#d08700",
+    "700": "#a65f00",
+    "800": "#894b00",
+    "900": "#733e0a",
+    "950": "#432004",
+  },
+  lime: {
+    "50": "#f7fee7",
+    "100": "#ecfcca",
+    "200": "#d8f999",
+    "300": "#bbf451",
+    "400": "#9ae600",
+    "500": "#7ccf00",
+    "600": "#5ea500",
+    "700": "#497d00",
+    "800": "#3c6300",
+    "900": "#35530e",
+    "950": "#192e03",
+  },
+  green: {
+    "50": "#f0fdf4",
+    "100": "#dcfce7",
+    "200": "#b9f8cf",
+    "300": "#7bf1a8",
+    "400": "#05df72",
+    "500": "#00c950",
+    "600": "#00a63e",
+    "700": "#008236",
+    "800": "#016630",
+    "900": "#0d542b",
+    "950": "#032e15",
+  },
+  emerald: {
+    "50": "#ecfdf5",
+    "100": "#d0fae5",
+    "200": "#a4f4cf",
+    "300": "#5ee9b5",
+    "400": "#00d492",
+    "500": "#00bc7d",
+    "600": "#009966",
+    "700": "#007a55",
+    "800": "#006045",
+    "900": "#004f3b",
+    "950": "#002c22",
+  },
+  teal: {
+    "50": "#f0fdfa",
+    "100": "#cbfbf1",
+    "200": "#96f7e4",
+    "300": "#46ecd5",
+    "400": "#00d5be",
+    "500": "#00bba7",
+    "600": "#009689",
+    "700": "#00786f",
+    "800": "#005f5a",
+    "900": "#0b4f4a",
+    "950": "#022f2e",
+  },
+  cyan: {
+    "50": "#ecfeff",
+    "100": "#cefafe",
+    "200": "#a2f4fd",
+    "300": "#53eafd",
+    "400": "#00d3f2",
+    "500": "#00b8db",
+    "600": "#0092b8",
+    "700": "#007595",
+    "800": "#005f78",
+    "900": "#104e64",
+    "950": "#053345",
+  },
+  sky: {
+    "50": "#f0f9ff",
+    "100": "#dff2fe",
+    "200": "#b8e6fe",
+    "300": "#74d4ff",
+    "400": "#00bcff",
+    "500": "#00a6f4",
+    "600": "#0084d1",
+    "700": "#0069a8",
+    "800": "#00598a",
+    "900": "#024a70",
+    "950": "#052f4a",
+  },
+  blue: {
+    "50": "#eff6ff",
+    "100": "#dbeafe",
+    "200": "#bedbff",
+    "300": "#8ec5ff",
+    "400": "#51a2ff",
+    "500": "#2b7fff",
+    "600": "#155dfc",
+    "700": "#1447e6",
+    "800": "#193cb8",
+    "900": "#1c398e",
+    "950": "#162456",
+  },
+  indigo: {
+    "50": "#eef2ff",
+    "100": "#e0e7ff",
+    "200": "#c6d2ff",
+    "300": "#a3b3ff",
+    "400": "#7c86ff",
+    "500": "#615fff",
+    "600": "#4f39f6",
+    "700": "#432dd7",
+    "800": "#372aac",
+    "900": "#312c85",
+    "950": "#1e1a4d",
+  },
+  violet: {
+    "50": "#f5f3ff",
+    "100": "#ede9fe",
+    "200": "#ddd6ff",
+    "300": "#c4b4ff",
+    "400": "#a684ff",
+    "500": "#8e51ff",
+    "600": "#7f22fe",
+    "700": "#7008e7",
+    "800": "#5d0ec0",
+    "900": "#4d179a",
+    "950": "#2f0d68",
+  },
+  purple: {
+    "50": "#faf5ff",
+    "100": "#f3e8ff",
+    "200": "#e9d4ff",
+    "300": "#dab2ff",
+    "400": "#c27aff",
+    "500": "#ad46ff",
+    "600": "#9810fa",
+    "700": "#8200db",
+    "800": "#6e11b0",
+    "900": "#59168b",
+    "950": "#3c0366",
+  },
+  fuchsia: {
+    "50": "#fdf4ff",
+    "100": "#fae8ff",
+    "200": "#f6cfff",
+    "300": "#f4a8ff",
+    "400": "#ed6aff",
+    "500": "#e12afb",
+    "600": "#c800de",
+    "700": "#a800b7",
+    "800": "#8a0194",
+    "900": "#721378",
+    "950": "#4b004f",
+  },
+  pink: {
+    "50": "#fdf2f8",
+    "100": "#fce7f3",
+    "200": "#fccee8",
+    "300": "#fda5d5",
+    "400": "#fb64b6",
+    "500": "#f6339a",
+    "600": "#e60076",
+    "700": "#c6005c",
+    "800": "#a3004c",
+    "900": "#861043",
+    "950": "#510424",
+  },
+  rose: {
+    "50": "#fff1f2",
+    "100": "#ffe4e6",
+    "200": "#ffccd3",
+    "300": "#ffa1ad",
+    "400": "#ff637e",
+    "500": "#ff2056",
+    "600": "#ec003f",
+    "700": "#c70036",
+    "800": "#a50036",
+    "900": "#8b0836",
+    "950": "#4d0218",
+  },
+  slate: {
+    "50": "#f8fafc",
+    "100": "#f1f5f9",
+    "200": "#e2e8f0",
+    "300": "#cad5e2",
+    "400": "#90a1b9",
+    "500": "#62748e",
+    "600": "#45556c",
+    "700": "#314158",
+    "800": "#1d293d",
+    "900": "#0f172b",
+    "950": "#020618",
+  },
+  gray: {
+    "50": "#f9fafb",
+    "100": "#f3f4f6",
+    "200": "#e5e7eb",
+    "300": "#d1d5dc",
+    "400": "#99a1af",
+    "500": "#6a7282",
+    "600": "#4a5565",
+    "700": "#364153",
+    "800": "#1e2939",
+    "900": "#101828",
+    "950": "#030712",
+  },
+  zinc: {
+    "50": "#fafafa",
+    "100": "#f4f4f5",
+    "200": "#e4e4e7",
+    "300": "#d4d4d8",
+    "400": "#9f9fa9",
+    "500": "#71717b",
+    "600": "#52525c",
+    "700": "#3f3f46",
+    "800": "#27272a",
+    "900": "#18181b",
+    "950": "#09090b",
+  },
+  neutral: {
+    "50": "#fafafa",
+    "100": "#f5f5f5",
+    "200": "#e5e5e5",
+    "300": "#d4d4d4",
+    "400": "#a1a1a1",
+    "500": "#737373",
+    "600": "#525252",
+    "700": "#404040",
+    "800": "#262626",
+    "900": "#171717",
+    "950": "#0a0a0a",
+  },
+  stone: {
+    "50": "#fafaf9",
+    "100": "#f5f5f4",
+    "200": "#e7e5e4",
+    "300": "#d6d3d1",
+    "400": "#a6a09b",
+    "500": "#79716b",
+    "600": "#57534d",
+    "700": "#44403b",
+    "800": "#292524",
+    "900": "#1c1917",
+    "950": "#0c0a09",
+  },
+} satisfies Record<string, TailwindPalette>;
+
+export type TailwindColor = keyof typeof TAILWIND_PALETTES;

package/src/parser/colors.test.ts

@@ -1,6 +1,22 @@
 import { describe, expect, it } from "vitest";
 import { COLORS, parseColor } from "./colors";
 
+// Helper to apply opacity to hex color for testing
+function applyOpacity(hex: string, opacity: number): string {
+  if (hex === "transparent") return "transparent";
+  const cleanHex = hex.replace(/^#/, "");
+  const fullHex =
+    cleanHex.length === 3
+      ? cleanHex
+          .split("")
+          .map((char) => char + char)
+          .join("")
+      : cleanHex;
+  const alpha = Math.round((opacity / 100) * 255);
+  const alphaHex = alpha.toString(16).padStart(2, "0").toUpperCase();
+  return `#${fullHex.toUpperCase()}${alphaHex}`;
+}
+
 describe("COLORS", () => {
   it("should export complete color palette", () => {
     expect(COLORS).toMatchSnapshot();
@@ -9,10 +25,10 @@ describe("COLORS", () => {
 
 describe("parseColor - background colors", () => {
   it("should parse background colors with preset values", () => {
-    expect(parseColor("bg-blue-500")).toEqual({ backgroundColor: "#3B82F6" });
-    expect(parseColor("bg-red-500")).toEqual({ backgroundColor: "#EF4444" });
-    expect(parseColor("bg-green-500")).toEqual({ backgroundColor: "#22C55E" });
-    expect(parseColor("bg-gray-300")).toEqual({ backgroundColor: "#D1D5DB" });
+    expect(parseColor("bg-blue-500")).toEqual({ backgroundColor: COLORS["blue-500"] });
+    expect(parseColor("bg-red-500")).toEqual({ backgroundColor: COLORS["red-500"] });
+    expect(parseColor("bg-green-500")).toEqual({ backgroundColor: COLORS["green-500"] });
+    expect(parseColor("bg-gray-300")).toEqual({ backgroundColor: COLORS["gray-300"] });
   });
 
   it("should parse background colors with basic values", () => {
@@ -57,10 +73,10 @@ describe("parseColor - background colors", () => {
 
 describe("parseColor - text colors", () => {
   it("should parse text colors with preset values", () => {
-    expect(parseColor("text-blue-500")).toEqual({ color: "#3B82F6" });
-    expect(parseColor("text-red-500")).toEqual({ color: "#EF4444" });
-    expect(parseColor("text-green-500")).toEqual({ color: "#22C55E" });
-    expect(parseColor("text-gray-700")).toEqual({ color: "#374151" });
+    expect(parseColor("text-blue-500")).toEqual({ color: COLORS["blue-500"] });
+    expect(parseColor("text-red-500")).toEqual({ color: COLORS["red-500"] });
+    expect(parseColor("text-green-500")).toEqual({ color: COLORS["green-500"] });
+    expect(parseColor("text-gray-700")).toEqual({ color: COLORS["gray-700"] });
   });
 
   it("should parse text colors with basic values", () => {
@@ -88,10 +104,10 @@ describe("parseColor - text colors", () => {
 
 describe("parseColor - border colors", () => {
   it("should parse border colors with preset values", () => {
-    expect(parseColor("border-blue-500")).toEqual({ borderColor: "#3B82F6" });
-    expect(parseColor("border-red-500")).toEqual({ borderColor: "#EF4444" });
-    expect(parseColor("border-green-500")).toEqual({ borderColor: "#22C55E" });
-    expect(parseColor("border-gray-200")).toEqual({ borderColor: "#E5E7EB" });
+    expect(parseColor("border-blue-500")).toEqual({ borderColor: COLORS["blue-500"] });
+    expect(parseColor("border-red-500")).toEqual({ borderColor: COLORS["red-500"] });
+    expect(parseColor("border-green-500")).toEqual({ borderColor: COLORS["green-500"] });
+    expect(parseColor("border-gray-200")).toEqual({ borderColor: COLORS["gray-200"] });
   });
 
   it("should parse border colors with basic values", () => {
@@ -153,7 +169,7 @@ describe("parseColor - custom colors", () => {
   });
 
   it("should fallback to preset colors when custom color not found", () => {
-    expect(parseColor("bg-red-500", customColors)).toEqual({ backgroundColor: "#EF4444" });
+    expect(parseColor("bg-red-500", customColors)).toEqual({ backgroundColor: COLORS["red-500"] });
   });
 });
 
@@ -192,6 +208,16 @@ describe("parseColor - edge cases", () => {
     expect(parseColor("bg-[rgb(255,0,0)]")).toBeNull(); // RGB format not supported
   });
 
+  it("should return null for non-color arbitrary values (to let other parsers handle them)", () => {
+    // These should be handled by typography parser
+    expect(parseColor("text-[13px]")).toBeNull();
+    expect(parseColor("text-[18px]")).toBeNull();
+    expect(parseColor("text-[24]")).toBeNull();
+    // These should be handled by sizing parser
+    expect(parseColor("bg-[100%]")).toBeNull();
+    expect(parseColor("bg-[50px]")).toBeNull();
+  });
+
   it("should not match partial class names", () => {
     expect(parseColor("background-blue-500")).toBeNull();
     expect(parseColor("textcolor-red-500")).toBeNull();
@@ -210,9 +236,9 @@ describe("parseColor - edge cases", () => {
 
 describe("parseColor - comprehensive coverage", () => {
   it("should parse all color types with same preset color", () => {
-    expect(parseColor("bg-blue-500")).toEqual({ backgroundColor: "#3B82F6" });
-    expect(parseColor("text-blue-500")).toEqual({ color: "#3B82F6" });
-    expect(parseColor("border-blue-500")).toEqual({ borderColor: "#3B82F6" });
+    expect(parseColor("bg-blue-500")).toEqual({ backgroundColor: COLORS["blue-500"] });
+    expect(parseColor("text-blue-500")).toEqual({ color: COLORS["blue-500"] });
+    expect(parseColor("border-blue-500")).toEqual({ borderColor: COLORS["blue-500"] });
   });
 
   it("should parse all color types with same arbitrary hex", () => {
@@ -251,23 +277,23 @@ describe("parseColor - comprehensive coverage", () => {
 
 describe("parseColor - opacity modifiers", () => {
   it("should parse background colors with opacity modifiers", () => {
-    expect(parseColor("bg-black/50")).toEqual({ backgroundColor: "#00000080" });
-    expect(parseColor("bg-white/50")).toEqual({ backgroundColor: "#FFFFFF80" });
-    expect(parseColor("bg-blue-500/80")).toEqual({ backgroundColor: "#3B82F6CC" });
-    expect(parseColor("bg-red-500/30")).toEqual({ backgroundColor: "#EF44444D" });
+    expect(parseColor("bg-black/50")).toEqual({ backgroundColor: applyOpacity(COLORS.black, 50) });
+    expect(parseColor("bg-white/50")).toEqual({ backgroundColor: applyOpacity(COLORS.white, 50) });
+    expect(parseColor("bg-blue-500/80")).toEqual({ backgroundColor: applyOpacity(COLORS["blue-500"], 80) });
+    expect(parseColor("bg-red-500/30")).toEqual({ backgroundColor: applyOpacity(COLORS["red-500"], 30) });
   });
 
   it("should parse text colors with opacity modifiers", () => {
-    expect(parseColor("text-black/80")).toEqual({ color: "#000000CC" });
-    expect(parseColor("text-white/90")).toEqual({ color: "#FFFFFFE6" });
-    expect(parseColor("text-gray-900/70")).toEqual({ color: "#111827B3" });
-    expect(parseColor("text-blue-500/50")).toEqual({ color: "#3B82F680" });
+    expect(parseColor("text-black/80")).toEqual({ color: applyOpacity(COLORS.black, 80) });
+    expect(parseColor("text-white/90")).toEqual({ color: applyOpacity(COLORS.white, 90) });
+    expect(parseColor("text-gray-900/70")).toEqual({ color: applyOpacity(COLORS["gray-900"], 70) });
+    expect(parseColor("text-blue-500/50")).toEqual({ color: applyOpacity(COLORS["blue-500"], 50) });
   });
 
   it("should parse border colors with opacity modifiers", () => {
-    expect(parseColor("border-black/25")).toEqual({ borderColor: "#00000040" });
-    expect(parseColor("border-red-500/60")).toEqual({ borderColor: "#EF444499" });
-    expect(parseColor("border-gray-200/40")).toEqual({ borderColor: "#E5E7EB66" });
+    expect(parseColor("border-black/25")).toEqual({ borderColor: applyOpacity(COLORS.black, 25) });
+    expect(parseColor("border-red-500/60")).toEqual({ borderColor: applyOpacity(COLORS["red-500"], 60) });
+    expect(parseColor("border-gray-200/40")).toEqual({ borderColor: applyOpacity(COLORS["gray-200"], 40) });
   });
 
   it("should handle opacity modifier with arbitrary hex colors", () => {
@@ -283,13 +309,13 @@ describe("parseColor - opacity modifiers", () => {
   });
 
   it("should handle opacity 0 (fully transparent)", () => {
-    expect(parseColor("bg-black/0")).toEqual({ backgroundColor: "#00000000" });
-    expect(parseColor("text-red-500/0")).toEqual({ color: "#EF444400" });
+    expect(parseColor("bg-black/0")).toEqual({ backgroundColor: applyOpacity(COLORS.black, 0) });
+    expect(parseColor("text-red-500/0")).toEqual({ color: applyOpacity(COLORS["red-500"], 0) });
   });
 
   it("should handle opacity 100 (fully opaque)", () => {
-    expect(parseColor("bg-black/100")).toEqual({ backgroundColor: "#000000FF" });
-    expect(parseColor("text-blue-500/100")).toEqual({ color: "#3B82F6FF" });
+    expect(parseColor("bg-black/100")).toEqual({ backgroundColor: applyOpacity(COLORS.black, 100) });
+    expect(parseColor("text-blue-500/100")).toEqual({ color: applyOpacity(COLORS["blue-500"], 100) });
   });
 
   it("should handle transparent color with opacity modifier", () => {

package/src/parser/colors.ts

@@ -2,123 +2,32 @@
  * Color utilities (background, text, border colors)
  */
 
+import { TAILWIND_PALETTES } from "../config/palettes";
 import type { StyleObject } from "../types";
 
-// Tailwind color palette
-export const COLORS: Record<string, string> = {
-  // Gray
-  "gray-50": "#F9FAFB",
-  "gray-100": "#F3F4F6",
-  "gray-200": "#E5E7EB",
-  "gray-300": "#D1D5DB",
-  "gray-400": "#9CA3AF",
-  "gray-500": "#6B7280",
-  "gray-600": "#4B5563",
-  "gray-700": "#374151",
-  "gray-800": "#1F2937",
-  "gray-900": "#111827",
-
-  // Red
-  "red-50": "#FEF2F2",
-  "red-100": "#FEE2E2",
-  "red-200": "#FECACA",
-  "red-300": "#FCA5A5",
-  "red-400": "#F87171",
-  "red-500": "#EF4444",
-  "red-600": "#DC2626",
-  "red-700": "#B91C1C",
-  "red-800": "#991B1B",
-  "red-900": "#7F1D1D",
-
-  // Blue
-  "blue-50": "#EFF6FF",
-  "blue-100": "#DBEAFE",
-  "blue-200": "#BFDBFE",
-  "blue-300": "#93C5FD",
-  "blue-400": "#60A5FA",
-  "blue-500": "#3B82F6",
-  "blue-600": "#2563EB",
-  "blue-700": "#1D4ED8",
-  "blue-800": "#1E40AF",
-  "blue-900": "#1E3A8A",
-
-  // Green
-  "green-50": "#F0FDF4",
-  "green-100": "#DCFCE7",
-  "green-200": "#BBF7D0",
-  "green-300": "#86EFAC",
-  "green-400": "#4ADE80",
-  "green-500": "#22C55E",
-  "green-600": "#16A34A",
-  "green-700": "#15803D",
-  "green-800": "#166534",
-  "green-900": "#14532D",
-
-  // Yellow
-  "yellow-50": "#FEFCE8",
-  "yellow-100": "#FEF9C3",
-  "yellow-200": "#FEF08A",
-  "yellow-300": "#FDE047",
-  "yellow-400": "#FACC15",
-  "yellow-500": "#EAB308",
-  "yellow-600": "#CA8A04",
-  "yellow-700": "#A16207",
-  "yellow-800": "#854D0E",
-  "yellow-900": "#713F12",
-
-  // Purple
-  "purple-50": "#FAF5FF",
-  "purple-100": "#F3E8FF",
-  "purple-200": "#E9D5FF",
-  "purple-300": "#D8B4FE",
-  "purple-400": "#C084FC",
-  "purple-500": "#A855F7",
-  "purple-600": "#9333EA",
-  "purple-700": "#7E22CE",
-  "purple-800": "#6B21A8",
-  "purple-900": "#581C87",
+/**
+ * Flatten TAILWIND_PALETTES nested structure into flat color map
+ * Converts { red: { "50": "#fff", "100": "#eee" } } to { "red-50": "#fff", "red-100": "#eee" }
+ */
+function flattenColors(): Record<string, string> {
+  const flat: Record<string, string> = {};
 
-  // Pink
-  "pink-50": "#FDF2F8",
-  "pink-100": "#FCE7F3",
-  "pink-200": "#FBCFE8",
-  "pink-300": "#F9A8D4",
-  "pink-400": "#F472B6",
-  "pink-500": "#EC4899",
-  "pink-600": "#DB2777",
-  "pink-700": "#BE185D",
-  "pink-800": "#9D174D",
-  "pink-900": "#831843",
+  for (const [colorName, shades] of Object.entries(TAILWIND_PALETTES)) {
+    for (const [shade, hex] of Object.entries(shades)) {
+      flat[`${colorName}-${shade}`] = hex;
+    }
+  }
 
-  // Orange
-  "orange-50": "#FFF7ED",
-  "orange-100": "#FFEDD5",
-  "orange-200": "#FED7AA",
-  "orange-300": "#FDBA74",
-  "orange-400": "#FB923C",
-  "orange-500": "#F97316",
-  "orange-600": "#EA580C",
-  "orange-700": "#C2410C",
-  "orange-800": "#9A3412",
-  "orange-900": "#7C2D12",
+  // Add basic colors
+  flat.white = "#FFFFFF";
+  flat.black = "#000000";
+  flat.transparent = "transparent";
 
-  // Indigo
-  "indigo-50": "#EEF2FF",
-  "indigo-100": "#E0E7FF",
-  "indigo-200": "#C7D2FE",
-  "indigo-300": "#A5B4FC",
-  "indigo-400": "#818CF8",
-  "indigo-500": "#6366F1",
-  "indigo-600": "#4F46E5",
-  "indigo-700": "#4338CA",
-  "indigo-800": "#3730A3",
-  "indigo-900": "#312E81",
+  return flat;
+}
 
-  // Basic colors
-  white: "#FFFFFF",
-  black: "#000000",
-  transparent: "transparent",
-};
+// Tailwind color palette (flattened from config)
+export const COLORS: Record<string, string> = flattenColors();
 
 /**
  * Apply opacity to hex color by appending alpha channel
@@ -241,8 +150,13 @@ export function parseColor(cls: string, customColors?: Record<string, string>):
   };
 
   // Background color: bg-blue-500, bg-blue-500/50, bg-[#ff0000]/80
+  // Only parse arbitrary values that look like colors (start with #)
   if (cls.startsWith("bg-")) {
     const colorKey = cls.substring(3);
+    // Skip arbitrary values that don't look like colors (e.g., bg-[100%] is sizing)
+    if (colorKey.startsWith("[") && !colorKey.startsWith("[#")) {
+      return null;
+    }
     const color = parseColorWithOpacity(colorKey);
     if (color) {
       return { backgroundColor: color };
@@ -250,8 +164,13 @@ export function parseColor(cls: string, customColors?: Record<string, string>):
   }
 
   // Text color: text-blue-500, text-blue-500/50, text-[#ff0000]/80
+  // Only parse arbitrary values that look like colors (start with #)
   if (cls.startsWith("text-")) {
     const colorKey = cls.substring(5);
+    // Skip arbitrary values that don't look like colors (e.g., text-[13px] is font size)
+    if (colorKey.startsWith("[") && !colorKey.startsWith("[#")) {
+      return null;
+    }
     const color = parseColorWithOpacity(colorKey);
     if (color) {
       return { color: color };
@@ -261,6 +180,10 @@ export function parseColor(cls: string, customColors?: Record<string, string>):
   // Border color: border-blue-500, border-blue-500/50, border-[#ff0000]/80
   if (cls.startsWith("border-") && !cls.match(/^border-[0-9]/)) {
     const colorKey = cls.substring(7);
+    // Skip arbitrary values that don't look like colors (e.g., border-[3px] is width)
+    if (colorKey.startsWith("[") && !colorKey.startsWith("[#")) {
+      return null;
+    }
     const color = parseColorWithOpacity(colorKey);
     if (color) {
       return { borderColor: color };

package/src/parser/index.ts

@@ -11,6 +11,7 @@ import { parseLayout } from "./layout";
 import { parseShadow } from "./shadows";
 import { parseSizing } from "./sizing";
 import { parseSpacing } from "./spacing";
+import { parseTransform } from "./transforms";
 import { parseTypography } from "./typography";
 
 /**
@@ -50,6 +51,7 @@ export function parseClass(cls: string, customColors?: Record<string, string>):
     parseSizing,
     parseShadow,
     parseAspectRatio,
+    parseTransform,
   ];
 
   for (const parser of parsers) {
@@ -75,6 +77,7 @@ export { parseLayout } from "./layout";
 export { parseShadow } from "./shadows";
 export { parseSizing } from "./sizing";
 export { parseSpacing } from "./spacing";
+export { parseTransform } from "./transforms";
 export { parseTypography } from "./typography";
 
 // Re-export modifier utilities