@mgcrea/react-native-tailwind 0.6.0 → 0.7.0

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/index.ts

@@ -3,8 +3,13 @@
  * Compile-time Tailwind CSS for React Native
  */
 
+// Compile-time tw/twStyle functions (transformed by Babel plugin)
+export { tw, twStyle } from "./stubs/tw.js";
+export type { NativeStyle, TwStyle } from "./stubs/tw.js";
+
 // Main parser functions
 export { parseClass, parseClassName } from "./parser";
+export { flattenColors } from "./utils/flattenColors";
 export { generateStyleKey } from "./utils/styleKey";
 
 // Re-export types

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"] });
   });
 });
 
@@ -220,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", () => {
@@ -261,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", () => {
@@ -293,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,119 +2,14 @@
  * Color utilities (background, text, border colors)
  */
 
+import { TAILWIND_PALETTES } from "../config/palettes";
 import type { StyleObject } from "../types";
+import { flattenColors } from "../utils/flattenColors";
 
-// Tailwind color palette
+// Tailwind color palette (flattened from config)
 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",
-
-  // 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",
-
-  // 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",
-
-  // 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",
-
-  // Basic colors
+  ...flattenColors(TAILWIND_PALETTES),
+  // Add basic colors
   white: "#FFFFFF",
   black: "#000000",
   transparent: "transparent",

package/src/parser/layout.test.ts

@@ -199,6 +199,41 @@ describe("parseLayout - overflow utilities", () => {
   });
 });
 
+describe("parseLayout - opacity utilities", () => {
+  it("should parse opacity-0 (fully transparent)", () => {
+    expect(parseLayout("opacity-0")).toEqual({ opacity: 0 });
+  });
+
+  it("should parse opacity-50 (half transparent)", () => {
+    expect(parseLayout("opacity-50")).toEqual({ opacity: 0.5 });
+  });
+
+  it("should parse opacity-100 (fully opaque)", () => {
+    expect(parseLayout("opacity-100")).toEqual({ opacity: 1 });
+  });
+
+  it("should parse all opacity values", () => {
+    expect(parseLayout("opacity-5")).toEqual({ opacity: 0.05 });
+    expect(parseLayout("opacity-10")).toEqual({ opacity: 0.1 });
+    expect(parseLayout("opacity-15")).toEqual({ opacity: 0.15 });
+    expect(parseLayout("opacity-20")).toEqual({ opacity: 0.2 });
+    expect(parseLayout("opacity-25")).toEqual({ opacity: 0.25 });
+    expect(parseLayout("opacity-30")).toEqual({ opacity: 0.3 });
+    expect(parseLayout("opacity-35")).toEqual({ opacity: 0.35 });
+    expect(parseLayout("opacity-40")).toEqual({ opacity: 0.4 });
+    expect(parseLayout("opacity-45")).toEqual({ opacity: 0.45 });
+    expect(parseLayout("opacity-55")).toEqual({ opacity: 0.55 });
+    expect(parseLayout("opacity-60")).toEqual({ opacity: 0.6 });
+    expect(parseLayout("opacity-65")).toEqual({ opacity: 0.65 });
+    expect(parseLayout("opacity-70")).toEqual({ opacity: 0.7 });
+    expect(parseLayout("opacity-75")).toEqual({ opacity: 0.75 });
+    expect(parseLayout("opacity-80")).toEqual({ opacity: 0.8 });
+    expect(parseLayout("opacity-85")).toEqual({ opacity: 0.85 });
+    expect(parseLayout("opacity-90")).toEqual({ opacity: 0.9 });
+    expect(parseLayout("opacity-95")).toEqual({ opacity: 0.95 });
+  });
+});
+
 describe("parseLayout - edge cases", () => {
   it("should return null for invalid classes", () => {
     expect(parseLayout("invalid")).toBeNull();

package/src/parser/layout.ts

@@ -146,6 +146,31 @@ const OVERFLOW_MAP: Record<string, StyleObject> = {
   "overflow-scroll": { overflow: "scroll" },
 };
 
+// Opacity utilities
+const OPACITY_MAP: Record<string, StyleObject> = {
+  "opacity-0": { opacity: 0 },
+  "opacity-5": { opacity: 0.05 },
+  "opacity-10": { opacity: 0.1 },
+  "opacity-15": { opacity: 0.15 },
+  "opacity-20": { opacity: 0.2 },
+  "opacity-25": { opacity: 0.25 },
+  "opacity-30": { opacity: 0.3 },
+  "opacity-35": { opacity: 0.35 },
+  "opacity-40": { opacity: 0.4 },
+  "opacity-45": { opacity: 0.45 },
+  "opacity-50": { opacity: 0.5 },
+  "opacity-55": { opacity: 0.55 },
+  "opacity-60": { opacity: 0.6 },
+  "opacity-65": { opacity: 0.65 },
+  "opacity-70": { opacity: 0.7 },
+  "opacity-75": { opacity: 0.75 },
+  "opacity-80": { opacity: 0.8 },
+  "opacity-85": { opacity: 0.85 },
+  "opacity-90": { opacity: 0.9 },
+  "opacity-95": { opacity: 0.95 },
+  "opacity-100": { opacity: 1 },
+};
+
 // Z-index scale
 export const Z_INDEX_SCALE: Record<string, number> = {
   0: 0,
@@ -343,6 +368,7 @@ export function parseLayout(cls: string): StyleObject | null {
     ALIGN_CONTENT_MAP[cls] ??
     POSITION_MAP[cls] ??
     OVERFLOW_MAP[cls] ??
+    OPACITY_MAP[cls] ??
     null
   );
 }