tailwind-to-style 3.2.2 → 3.3.0

package/dist/utils/index.cjs

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v3.2.2
+ * tailwind-to-style v3.3.0
  * Runtime Tailwind CSS to inline styles converter
  * 
  * @author Bigetion
@@ -156,13 +156,15 @@ const theme = {
   },
   borderRadius: {
     none: "0px",
-    sm: "0.125rem",
+    xs: "0.125rem",
+    sm: "0.25rem",
     DEFAULT: "0.25rem",
     md: "0.375rem",
     lg: "0.5rem",
     xl: "0.75rem",
     "2xl": "1rem",
     "3xl": "1.5rem",
+    "4xl": "2rem",
     full: "9999px",
     custom: "custom_value"
   },
@@ -183,7 +185,8 @@ const theme = {
     custom: "custom_value"
   },
   boxShadow: {
-    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
     DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
     md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
     lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
@@ -234,7 +237,8 @@ const theme = {
       600: "#475569",
       700: "#334155",
       800: "#1e293b",
-      900: "#0f172a"
+      900: "#0f172a",
+      950: "#020617"
     },
     gray: {
       50: "#f9fafb",
@@ -246,7 +250,8 @@ const theme = {
       600: "#4b5563",
       700: "#374151",
       800: "#1f2937",
-      900: "#111827"
+      900: "#111827",
+      950: "#030712"
     },
     zinc: {
       50: "#fafafa",
@@ -258,7 +263,8 @@ const theme = {
       600: "#52525b",
       700: "#3f3f46",
       800: "#27272a",
-      900: "#18181b"
+      900: "#18181b",
+      950: "#09090b"
     },
     neutral: {
       50: "#fafafa",
@@ -270,7 +276,8 @@ const theme = {
       600: "#525252",
       700: "#404040",
       800: "#262626",
-      900: "#171717"
+      900: "#171717",
+      950: "#0a0a0a"
     },
     stone: {
       50: "#fafaf9",
@@ -282,7 +289,8 @@ const theme = {
       600: "#57534e",
       700: "#44403c",
       800: "#292524",
-      900: "#1c1917"
+      900: "#1c1917",
+      950: "#0c0a09"
     },
     red: {
       50: "#fef2f2",
@@ -294,7 +302,8 @@ const theme = {
       600: "#dc2626",
       700: "#b91c1c",
       800: "#991b1b",
-      900: "#7f1d1d"
+      900: "#7f1d1d",
+      950: "#450a0a"
     },
     orange: {
       50: "#fff7ed",
@@ -306,7 +315,8 @@ const theme = {
       600: "#ea580c",
       700: "#c2410c",
       800: "#9a3412",
-      900: "#7c2d12"
+      900: "#7c2d12",
+      950: "#431407"
     },
     amber: {
       50: "#fffbeb",
@@ -318,7 +328,8 @@ const theme = {
       600: "#d97706",
       700: "#b45309",
       800: "#92400e",
-      900: "#78350f"
+      900: "#78350f",
+      950: "#451a03"
     },
     yellow: {
       50: "#fefce8",
@@ -330,7 +341,8 @@ const theme = {
       600: "#ca8a04",
       700: "#a16207",
       800: "#854d0e",
-      900: "#713f12"
+      900: "#713f12",
+      950: "#422006"
     },
     lime: {
       50: "#f7fee7",
@@ -342,7 +354,8 @@ const theme = {
       600: "#65a30d",
       700: "#4d7c0f",
       800: "#3f6212",
-      900: "#365314"
+      900: "#365314",
+      950: "#1a2e05"
     },
     green: {
       50: "#f0fdf4",
@@ -354,7 +367,8 @@ const theme = {
       600: "#16a34a",
       700: "#15803d",
       800: "#166534",
-      900: "#14532d"
+      900: "#14532d",
+      950: "#052e16"
     },
     emerald: {
       50: "#ecfdf5",
@@ -366,7 +380,8 @@ const theme = {
       600: "#059669",
       700: "#047857",
       800: "#065f46",
-      900: "#064e3b"
+      900: "#064e3b",
+      950: "#022c22"
     },
     teal: {
       50: "#f0fdfa",
@@ -378,7 +393,8 @@ const theme = {
       600: "#0d9488",
       700: "#0f766e",
       800: "#115e59",
-      900: "#134e4a"
+      900: "#134e4a",
+      950: "#042f2e"
     },
     cyan: {
       50: "#ecfeff",
@@ -390,7 +406,8 @@ const theme = {
       600: "#0891b2",
       700: "#0e7490",
       800: "#155e75",
-      900: "#164e63"
+      900: "#164e63",
+      950: "#083344"
     },
     sky: {
       50: "#f0f9ff",
@@ -402,7 +419,8 @@ const theme = {
       600: "#0284c7",
       700: "#0369a1",
       800: "#075985",
-      900: "#0c4a6e"
+      900: "#0c4a6e",
+      950: "#082f49"
     },
     blue: {
       50: "#eff6ff",
@@ -414,7 +432,8 @@ const theme = {
       600: "#2563eb",
       700: "#1d4ed8",
       800: "#1e40af",
-      900: "#1e3a8a"
+      900: "#1e3a8a",
+      950: "#172554"
     },
     indigo: {
       50: "#eef2ff",
@@ -426,7 +445,8 @@ const theme = {
       600: "#4f46e5",
       700: "#4338ca",
       800: "#3730a3",
-      900: "#312e81"
+      900: "#312e81",
+      950: "#1e1b4b"
     },
     violet: {
       50: "#f5f3ff",
@@ -438,7 +458,8 @@ const theme = {
       600: "#7c3aed",
       700: "#6d28d9",
       800: "#5b21b6",
-      900: "#4c1d95"
+      900: "#4c1d95",
+      950: "#2e1065"
     },
     purple: {
       50: "#faf5ff",
@@ -450,7 +471,8 @@ const theme = {
       600: "#9333ea",
       700: "#7e22ce",
       800: "#6b21a8",
-      900: "#581c87"
+      900: "#581c87",
+      950: "#3b0764"
     },
     fuchsia: {
       50: "#fdf4ff",
@@ -462,7 +484,8 @@ const theme = {
       600: "#c026d3",
       700: "#a21caf",
       800: "#86198f",
-      900: "#701a75"
+      900: "#701a75",
+      950: "#4a044e"
     },
     pink: {
       50: "#fdf2f8",
@@ -474,7 +497,8 @@ const theme = {
       600: "#db2777",
       700: "#be185d",
       800: "#9d174d",
-      900: "#831843"
+      900: "#831843",
+      950: "#500724"
     },
     rose: {
       50: "#fff1f2",
@@ -486,7 +510,8 @@ const theme = {
       600: "#e11d48",
       700: "#be123c",
       800: "#9f1239",
-      900: "#881337"
+      900: "#881337",
+      950: "#4c0519"
     },
     custom: "custom_value"
   },
@@ -678,6 +703,17 @@ const theme = {
     "9xl": "8rem",
     custom: "custom_value"
   },
+  fontStretch: {
+    "ultra-condensed": "ultra-condensed",
+    "extra-condensed": "extra-condensed",
+    condensed: "condensed",
+    "semi-condensed": "semi-condensed",
+    normal: "normal",
+    "semi-expanded": "semi-expanded",
+    expanded: "expanded",
+    "extra-expanded": "extra-expanded",
+    "ultra-expanded": "ultra-expanded"
+  },
   fontWeight: {
     thin: "100",
     extralight: "200",
@@ -926,6 +962,14 @@ const theme = {
       full: "100%"
     };
   },
+  insetShadow: {
+    xs: "inset 0 1px 1px 0 rgb(0 0 0 / 0.05)",
+    sm: "inset 0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    DEFAULT: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+    md: "inset 0 2px 6px 0 rgb(0 0 0 / 0.08)",
+    lg: "inset 0 4px 8px 0 rgb(0 0 0 / 0.10)",
+    none: "none"
+  },
   invert: {
     0: "0",
     DEFAULT: "100%"
@@ -1136,6 +1180,15 @@ const theme = {
     } = _ref32;
     return theme("spacing");
   },
+  perspective: {
+    none: "none",
+    dramatic: "100px",
+    near: "300px",
+    normal: "500px",
+    midrange: "800px",
+    distant: "1200px",
+    custom: "custom_value"
+  },
   ringColor: _ref33 => {
     let {
       theme
@@ -1224,6 +1277,14 @@ const theme = {
     } = _ref37;
     return theme("spacing");
   },
+  screens: {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px",
+    "3xl": "1920px"
+  },
   sepia: {
     0: "0",
     DEFAULT: "100%"
@@ -1615,9 +1676,15 @@ const theme = {
 };
 
 const vars = {
-  transform: "transform: translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) rotate(var(--transform-rotate, 0)) skewX(var(--transform-skew-x, 0)) skewY(var(--transform-skew-y, 0)) scaleX(var(--transform-scale-x, 1)) scaleY(var(--transform-scale-y, 1));",
+  // 2D + 3D composite transform (Tailwind v4 extends with 3D axes)
+  transform: "transform: translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) translateZ(var(--transform-translate-z, 0)) rotate(var(--transform-rotate, 0)) rotateX(var(--transform-rotate-x, 0)) rotateY(var(--transform-rotate-y, 0)) skewX(var(--transform-skew-x, 0)) skewY(var(--transform-skew-y, 0)) scaleX(var(--transform-scale-x, 1)) scaleY(var(--transform-scale-y, 1)) scaleZ(var(--transform-scale-z, 1));",
   filter: "filter: blur(var(--blur, 0)) brightness(var(--brightness, 1)) contrast(var(--contrast, 1)) grayscale(var(--grayscale, 0)) hue-rotate(var(--hue-rotate, 0deg)) invert(var(--invert, 0)) saturate(var(--saturate, 1)) sepia(var(--sepia, 0)) drop-shadow(var(--drop-shadow, 0 0 #0000));",
-  backdropFilter: "-webkit-backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0)); backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0));"
+  backdropFilter: "-webkit-backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0)); backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0));",
+  // Tailwind v4: 3D transform style control
+  transformStyle3d: "transform-style: preserve-3d;",
+  transformStyleFlat: "transform-style: flat;",
+  backfaceVisible: "backface-visibility: visible;",
+  backfaceHidden: "backface-visibility: hidden;"
 };
 
 const configOptions = {

package/dist/utils/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v3.2.2
+ * tailwind-to-style v3.3.0
  * Runtime Tailwind CSS to inline styles converter
  * 
  * @author Bigetion
@@ -154,13 +154,15 @@ const theme = {
   },
   borderRadius: {
     none: "0px",
-    sm: "0.125rem",
+    xs: "0.125rem",
+    sm: "0.25rem",
     DEFAULT: "0.25rem",
     md: "0.375rem",
     lg: "0.5rem",
     xl: "0.75rem",
     "2xl": "1rem",
     "3xl": "1.5rem",
+    "4xl": "2rem",
     full: "9999px",
     custom: "custom_value"
   },
@@ -181,7 +183,8 @@ const theme = {
     custom: "custom_value"
   },
   boxShadow: {
-    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
     DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
     md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
     lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
@@ -232,7 +235,8 @@ const theme = {
       600: "#475569",
       700: "#334155",
       800: "#1e293b",
-      900: "#0f172a"
+      900: "#0f172a",
+      950: "#020617"
     },
     gray: {
       50: "#f9fafb",
@@ -244,7 +248,8 @@ const theme = {
       600: "#4b5563",
       700: "#374151",
       800: "#1f2937",
-      900: "#111827"
+      900: "#111827",
+      950: "#030712"
     },
     zinc: {
       50: "#fafafa",
@@ -256,7 +261,8 @@ const theme = {
       600: "#52525b",
       700: "#3f3f46",
       800: "#27272a",
-      900: "#18181b"
+      900: "#18181b",
+      950: "#09090b"
     },
     neutral: {
       50: "#fafafa",
@@ -268,7 +274,8 @@ const theme = {
       600: "#525252",
       700: "#404040",
       800: "#262626",
-      900: "#171717"
+      900: "#171717",
+      950: "#0a0a0a"
     },
     stone: {
       50: "#fafaf9",
@@ -280,7 +287,8 @@ const theme = {
       600: "#57534e",
       700: "#44403c",
       800: "#292524",
-      900: "#1c1917"
+      900: "#1c1917",
+      950: "#0c0a09"
     },
     red: {
       50: "#fef2f2",
@@ -292,7 +300,8 @@ const theme = {
       600: "#dc2626",
       700: "#b91c1c",
       800: "#991b1b",
-      900: "#7f1d1d"
+      900: "#7f1d1d",
+      950: "#450a0a"
     },
     orange: {
       50: "#fff7ed",
@@ -304,7 +313,8 @@ const theme = {
       600: "#ea580c",
       700: "#c2410c",
       800: "#9a3412",
-      900: "#7c2d12"
+      900: "#7c2d12",
+      950: "#431407"
     },
     amber: {
       50: "#fffbeb",
@@ -316,7 +326,8 @@ const theme = {
       600: "#d97706",
       700: "#b45309",
       800: "#92400e",
-      900: "#78350f"
+      900: "#78350f",
+      950: "#451a03"
     },
     yellow: {
       50: "#fefce8",
@@ -328,7 +339,8 @@ const theme = {
       600: "#ca8a04",
       700: "#a16207",
       800: "#854d0e",
-      900: "#713f12"
+      900: "#713f12",
+      950: "#422006"
     },
     lime: {
       50: "#f7fee7",
@@ -340,7 +352,8 @@ const theme = {
       600: "#65a30d",
       700: "#4d7c0f",
       800: "#3f6212",
-      900: "#365314"
+      900: "#365314",
+      950: "#1a2e05"
     },
     green: {
       50: "#f0fdf4",
@@ -352,7 +365,8 @@ const theme = {
       600: "#16a34a",
       700: "#15803d",
       800: "#166534",
-      900: "#14532d"
+      900: "#14532d",
+      950: "#052e16"
     },
     emerald: {
       50: "#ecfdf5",
@@ -364,7 +378,8 @@ const theme = {
       600: "#059669",
       700: "#047857",
       800: "#065f46",
-      900: "#064e3b"
+      900: "#064e3b",
+      950: "#022c22"
     },
     teal: {
       50: "#f0fdfa",
@@ -376,7 +391,8 @@ const theme = {
       600: "#0d9488",
       700: "#0f766e",
       800: "#115e59",
-      900: "#134e4a"
+      900: "#134e4a",
+      950: "#042f2e"
     },
     cyan: {
       50: "#ecfeff",
@@ -388,7 +404,8 @@ const theme = {
       600: "#0891b2",
       700: "#0e7490",
       800: "#155e75",
-      900: "#164e63"
+      900: "#164e63",
+      950: "#083344"
     },
     sky: {
       50: "#f0f9ff",
@@ -400,7 +417,8 @@ const theme = {
       600: "#0284c7",
       700: "#0369a1",
       800: "#075985",
-      900: "#0c4a6e"
+      900: "#0c4a6e",
+      950: "#082f49"
     },
     blue: {
       50: "#eff6ff",
@@ -412,7 +430,8 @@ const theme = {
       600: "#2563eb",
       700: "#1d4ed8",
       800: "#1e40af",
-      900: "#1e3a8a"
+      900: "#1e3a8a",
+      950: "#172554"
     },
     indigo: {
       50: "#eef2ff",
@@ -424,7 +443,8 @@ const theme = {
       600: "#4f46e5",
       700: "#4338ca",
       800: "#3730a3",
-      900: "#312e81"
+      900: "#312e81",
+      950: "#1e1b4b"
     },
     violet: {
       50: "#f5f3ff",
@@ -436,7 +456,8 @@ const theme = {
       600: "#7c3aed",
       700: "#6d28d9",
       800: "#5b21b6",
-      900: "#4c1d95"
+      900: "#4c1d95",
+      950: "#2e1065"
     },
     purple: {
       50: "#faf5ff",
@@ -448,7 +469,8 @@ const theme = {
       600: "#9333ea",
       700: "#7e22ce",
       800: "#6b21a8",
-      900: "#581c87"
+      900: "#581c87",
+      950: "#3b0764"
     },
     fuchsia: {
       50: "#fdf4ff",
@@ -460,7 +482,8 @@ const theme = {
       600: "#c026d3",
       700: "#a21caf",
       800: "#86198f",
-      900: "#701a75"
+      900: "#701a75",
+      950: "#4a044e"
     },
     pink: {
       50: "#fdf2f8",
@@ -472,7 +495,8 @@ const theme = {
       600: "#db2777",
       700: "#be185d",
       800: "#9d174d",
-      900: "#831843"
+      900: "#831843",
+      950: "#500724"
     },
     rose: {
       50: "#fff1f2",
@@ -484,7 +508,8 @@ const theme = {
       600: "#e11d48",
       700: "#be123c",
       800: "#9f1239",
-      900: "#881337"
+      900: "#881337",
+      950: "#4c0519"
     },
     custom: "custom_value"
   },
@@ -676,6 +701,17 @@ const theme = {
     "9xl": "8rem",
     custom: "custom_value"
   },
+  fontStretch: {
+    "ultra-condensed": "ultra-condensed",
+    "extra-condensed": "extra-condensed",
+    condensed: "condensed",
+    "semi-condensed": "semi-condensed",
+    normal: "normal",
+    "semi-expanded": "semi-expanded",
+    expanded: "expanded",
+    "extra-expanded": "extra-expanded",
+    "ultra-expanded": "ultra-expanded"
+  },
   fontWeight: {
     thin: "100",
     extralight: "200",
@@ -924,6 +960,14 @@ const theme = {
       full: "100%"
     };
   },
+  insetShadow: {
+    xs: "inset 0 1px 1px 0 rgb(0 0 0 / 0.05)",
+    sm: "inset 0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    DEFAULT: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+    md: "inset 0 2px 6px 0 rgb(0 0 0 / 0.08)",
+    lg: "inset 0 4px 8px 0 rgb(0 0 0 / 0.10)",
+    none: "none"
+  },
   invert: {
     0: "0",
     DEFAULT: "100%"
@@ -1134,6 +1178,15 @@ const theme = {
     } = _ref32;
     return theme("spacing");
   },
+  perspective: {
+    none: "none",
+    dramatic: "100px",
+    near: "300px",
+    normal: "500px",
+    midrange: "800px",
+    distant: "1200px",
+    custom: "custom_value"
+  },
   ringColor: _ref33 => {
     let {
       theme
@@ -1222,6 +1275,14 @@ const theme = {
     } = _ref37;
     return theme("spacing");
   },
+  screens: {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px",
+    "3xl": "1920px"
+  },
   sepia: {
     0: "0",
     DEFAULT: "100%"
@@ -1613,9 +1674,15 @@ const theme = {
 };
 
 const vars = {
-  transform: "transform: translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) rotate(var(--transform-rotate, 0)) skewX(var(--transform-skew-x, 0)) skewY(var(--transform-skew-y, 0)) scaleX(var(--transform-scale-x, 1)) scaleY(var(--transform-scale-y, 1));",
+  // 2D + 3D composite transform (Tailwind v4 extends with 3D axes)
+  transform: "transform: translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) translateZ(var(--transform-translate-z, 0)) rotate(var(--transform-rotate, 0)) rotateX(var(--transform-rotate-x, 0)) rotateY(var(--transform-rotate-y, 0)) skewX(var(--transform-skew-x, 0)) skewY(var(--transform-skew-y, 0)) scaleX(var(--transform-scale-x, 1)) scaleY(var(--transform-scale-y, 1)) scaleZ(var(--transform-scale-z, 1));",
   filter: "filter: blur(var(--blur, 0)) brightness(var(--brightness, 1)) contrast(var(--contrast, 1)) grayscale(var(--grayscale, 0)) hue-rotate(var(--hue-rotate, 0deg)) invert(var(--invert, 0)) saturate(var(--saturate, 1)) sepia(var(--sepia, 0)) drop-shadow(var(--drop-shadow, 0 0 #0000));",
-  backdropFilter: "-webkit-backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0)); backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0));"
+  backdropFilter: "-webkit-backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0)); backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0));",
+  // Tailwind v4: 3D transform style control
+  transformStyle3d: "transform-style: preserve-3d;",
+  transformStyleFlat: "transform-style: flat;",
+  backfaceVisible: "backface-visibility: visible;",
+  backfaceHidden: "backface-visibility: hidden;"
 };
 
 const configOptions = {