tailwind-to-style 2.10.2 → 2.10.4

package/dist/index.browser.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.10.2
+ * tailwind-to-style v2.10.4
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -25,6 +25,8 @@ var tailwindToStyle = (function (exports) {
       ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
       pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       bounce: "bounce 1s infinite",
+      "fade-in": "fadeIn 2s ease-in-out infinite",
+      "slide-up": "slideUp 2s ease-in-out infinite",
       custom: "custom_value"
     },
     aspectRatio: {
@@ -656,6 +658,11 @@ var tailwindToStyle = (function (exports) {
       0: "0",
       DEFAULT: "1"
     },
+    fontFamily: {
+      sans: ["ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", '"Segoe UI"', "Roboto", '"Helvetica Neue"', "Arial", '"Noto Sans"', "sans-serif", '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'].join(", "),
+      serif: ["ui-serif", "Georgia", "Cambria", '"Times New Roman"', "Times", "serif"].join(", "),
+      mono: ["ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", '"Liberation Mono"', '"Courier New"', "monospace"].join(", ")
+    },
     fontSize: {
       xs: "0.75rem",
       sm: "0.875rem",
@@ -1541,6 +1548,31 @@ var tailwindToStyle = (function (exports) {
           transform: "none",
           animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
         }
+      },
+      fadeIn: {
+        "0%": {
+          opacity: "0"
+        },
+        "50%": {
+          opacity: "1"
+        },
+        "100%": {
+          opacity: "0"
+        }
+      },
+      slideUp: {
+        "0%": {
+          transform: "translateY(20px)",
+          opacity: "0"
+        },
+        "50%": {
+          transform: "translateY(0)",
+          opacity: "1"
+        },
+        "100%": {
+          transform: "translateY(-20px)",
+          opacity: "0"
+        }
       }
     },
     transitionProperty: {
@@ -2061,7 +2093,7 @@ var tailwindToStyle = (function (exports) {
     return cssString;
   }
 
-  function generator$2M() {
+  function generator$2N() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2078,6 +2110,13 @@ var tailwindToStyle = (function (exports) {
         getCssByOptions
       } = _ref;
       let cssString = getCssByColors(accentColor, (key, value, rgbValue) => {
+        if (value === "custom_value") {
+          return `
+            ${prefix}-${key} {
+              accent-color: ${value};
+            }
+          `;
+        }
         let rgbPropertyValue = "";
         if (rgbValue) {
           rgbPropertyValue = `accent-color: rgba(${rgbValue}, var(--accent-opacity));`;
@@ -2090,17 +2129,21 @@ var tailwindToStyle = (function (exports) {
             }
           `;
       });
-      cssString += getCssByOptions(opacity, (key, value) => `
-          ${prefix}-${key} {
-            --accent-opacity: ${value};
-          }
-        `);
+      cssString += getCssByOptions(opacity, (key, value) => {
+        // Skip 'custom' to avoid overwriting accent-custom from colors
+        if (key === "custom") return "";
+        return `
+            ${prefix}-${key} {
+              --accent-opacity: ${value};
+            }
+          `;
+      });
       return cssString;
     }, configOptions);
     return responsiveCssString;
   }
 
-  function generator$2L() {
+  function generator$2M() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix
@@ -2139,7 +2182,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2K() {
+  function generator$2L() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -2167,7 +2210,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2J() {
+  function generator$2K() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -2194,7 +2237,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2I() {
+  function generator$2J() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -2438,7 +2481,7 @@ var tailwindToStyle = (function (exports) {
    * Animation Generator
    * Generates animation utility classes with dynamic inline animations
    */
-  function generator$2H() {
+  function generator$2I() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2446,18 +2489,39 @@ var tailwindToStyle = (function (exports) {
     } = configOptions;
     const prefix = `${globalPrefix}animate`;
     const {
-      animation = {}
+      animation = {},
+      keyframes = {}
     } = theme;
     const responsiveCssString = generateCssString$1(_ref => {
       let {
         getCssByOptions
       } = _ref;
-      // Merge theme animations with inline animations
+      // Generate keyframes first
+      let keyframesCSS = "";
+      for (const [name, keyframe] of Object.entries(keyframes)) {
+        keyframesCSS += `@keyframes ${name} {\n`;
+        for (const [percentage, styles] of Object.entries(keyframe)) {
+          keyframesCSS += `  ${percentage} {\n`;
+          for (const [prop, value] of Object.entries(styles)) {
+            const cssProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+            keyframesCSS += `    ${cssProp}: ${value};\n`;
+          }
+          keyframesCSS += "  }\n";
+        }
+        keyframesCSS += "}\n";
+      }
+
+      // Merge theme animations with inline animations (but skip inline if keyframes exist)
       const allAnimations = {
         ...animation,
-        // Add inline animations to the mix
+        // Add inline animations to the mix, but skip if keyframes version exists
         ...Object.keys(INLINE_ANIMATIONS).reduce((acc, key) => {
-          acc[key] = `inline-${key}`; // Special marker for inline animations
+          // Check if keyframes version exists (both camelCase and kebab-case)
+          const camelCaseKey = key.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+          const hasKeyframes = keyframes[key] || keyframes[camelCaseKey];
+          if (!hasKeyframes) {
+            acc[key] = `inline-${key}`; // Special marker for inline animations
+          }
           return acc;
         }, {})
       };
@@ -2503,12 +2567,14 @@ var tailwindToStyle = (function (exports) {
           }
         `;
       });
-      return cssString;
+
+      // Combine keyframes and animation classes
+      return keyframesCSS + cssString;
     }, configOptions);
     return responsiveCssString;
   }
 
-  function generator$2G() {
+  function generator$2H() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix
@@ -2528,7 +2594,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2F() {
+  function generator$2G() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2536,13 +2602,31 @@ var tailwindToStyle = (function (exports) {
     } = configOptions;
     const prefix = `${globalPrefix}aspect`;
     const {
-      spacing = {}
+      spacing = {},
+      aspectRatio = {}
     } = theme;
-    let responsiveCssString = generateCssString$1(_ref => {
+    const responsiveCssString = generateCssString$1(_ref => {
       let {
         getCssByOptions
       } = _ref;
-      const cssString = getCssByOptions(spacing, key => `
+      // Generate aspect-ratio utilities (aspect-auto, aspect-square, aspect-video, etc.)
+      let cssString = getCssByOptions(aspectRatio, (key, value) => {
+        if (value === "custom_value") {
+          return `
+            ${prefix}-${key} {
+              aspect-ratio: ${value};
+            }
+          `;
+        }
+        return `
+          ${prefix}-${key} {
+            aspect-ratio: ${value};
+          }
+        `;
+      });
+
+      // Generate legacy aspect-h and aspect-w utilities
+      cssString += getCssByOptions(spacing, key => `
           ${prefix}-h-${key} {
             --aspect-h: ${key};
           }
@@ -2557,7 +2641,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2E() {
+  function generator$2F() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -2578,7 +2662,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2D() {
+  function generator$2E() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -2605,7 +2689,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2C() {
+  function generator$2D() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2645,7 +2729,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2B() {
+  function generator$2C() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2679,7 +2763,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2A() {
+  function generator$2B() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2703,7 +2787,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2z() {
+  function generator$2A() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -2729,7 +2813,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2y() {
+  function generator$2z() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2763,7 +2847,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2x() {
+  function generator$2y() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -2791,7 +2875,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2w() {
+  function generator$2x() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2825,7 +2909,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2v() {
+  function generator$2w() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2854,7 +2938,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2u() {
+  function generator$2v() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2883,7 +2967,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2t() {
+  function generator$2u() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2912,7 +2996,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2s() {
+  function generator$2t() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix,
@@ -2932,7 +3016,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2r() {
+  function generator$2s() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2961,7 +3045,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2q() {
+  function generator$2r() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2990,7 +3074,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2p() {
+  function generator$2q() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3019,7 +3103,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2o() {
+  function generator$2p() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3048,7 +3132,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2n() {
+  function generator$2o() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3077,7 +3161,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2m() {
+  function generator$2n() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3106,7 +3190,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2l() {
+  function generator$2m() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3140,7 +3224,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2k() {
+  function generator$2l() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -3161,7 +3245,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2j() {
+  function generator$2k() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3190,6 +3274,9 @@ var tailwindToStyle = (function (exports) {
           ${customPrefix}${key} {
             border-color: ${value};
           }
+          ${prefix}${key} {
+            border-color: ${value};
+          }
         `;
         }
         return `
@@ -3249,7 +3336,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2i() {
+  function generator$2j() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3273,7 +3360,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2h() {
+  function generator$2i() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3348,7 +3435,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2g() {
+  function generator$2h() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3383,7 +3470,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2f() {
+  function generator$2g() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -3404,7 +3491,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2e() {
+  function generator$2f() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3469,7 +3556,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2d() {
+  function generator$2e() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -3491,7 +3578,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2c() {
+  function generator$2d() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3545,7 +3632,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2b() {
+  function generator$2c() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -3569,7 +3656,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$2a() {
+  function generator$2b() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix
@@ -3589,7 +3676,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$29() {
+  function generator$2a() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix
@@ -3609,7 +3696,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$28() {
+  function generator$29() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix
@@ -3629,7 +3716,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$27() {
+  function generator$28() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3663,7 +3750,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$26() {
+  function generator$27() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -3684,7 +3771,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$25() {
+  function generator$26() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3701,6 +3788,13 @@ var tailwindToStyle = (function (exports) {
         getCssByOptions
       } = _ref;
       let cssString = getCssByColors(caretColor, (key, value, rgbValue) => {
+        if (value === "custom_value") {
+          return `
+            ${prefix}-${key} {
+              caret-color: ${value};
+            }
+          `;
+        }
         let rgbPropertyValue = "";
         if (rgbValue) {
           rgbPropertyValue = `caret-color: rgba(${rgbValue}, var(--caret-opacity));`;
@@ -3713,17 +3807,21 @@ var tailwindToStyle = (function (exports) {
             }
           `;
       });
-      cssString += getCssByOptions(opacity, (key, value) => `
-          ${prefix}-${key} {
-            --caret-opacity: ${value};
-          }
-        `);
+      cssString += getCssByOptions(opacity, (key, value) => {
+        // Skip 'custom' to avoid overwriting caret-custom from colors
+        if (key === "custom") return "";
+        return `
+            ${prefix}-${key} {
+              --caret-opacity: ${value};
+            }
+          `;
+      });
       return cssString;
     }, configOptions);
     return responsiveCssString;
   }
 
-  function generator$24() {
+  function generator$25() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -3744,7 +3842,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$23() {
+  function generator$24() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix,
@@ -3767,7 +3865,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$22() {
+  function generator$23() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix
@@ -3783,7 +3881,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$21() {
+  function generator$22() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3807,7 +3905,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$20() {
+  function generator$21() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3841,7 +3939,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$1$() {
+  function generator$20() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -3862,7 +3960,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$1_() {
+  function generator$1$() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix
@@ -3882,7 +3980,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$1Z() {
+  function generator$1_() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3913,7 +4011,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$1Y() {
+  function generator$1Z() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3937,7 +4035,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$1X() {
+  function generator$1Y() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -3958,7 +4056,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$1W() {
+  function generator$1X() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -4006,7 +4104,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$1V() {
+  function generator$1W() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -4034,7 +4132,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$1U() {
+  function generator$1V() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -4060,7 +4158,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$1T(_ref) {
+  function generator$1U(_ref) {
     let {
       prefix
     } = _ref;
@@ -4073,7 +4171,7 @@ var tailwindToStyle = (function (exports) {
 `;
   }
 
-  function generator$1S() {
+  function generator$1T() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -4097,7 +4195,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$1R() {
+  function generator$1S() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -4121,7 +4219,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$1Q() {
+  function generator$1R() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -4147,7 +4245,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$1P() {
+  function generator$1Q() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -4171,7 +4269,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$1O() {
+  function generator$1P() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -4195,7 +4293,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$1N() {
+  function generator$1O() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -4221,7 +4319,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
-  function generator$1M() {
+  function generator$1N() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -4242,6 +4340,32 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
 
+  function generator$1M() {
+    let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      prefix: globalPrefix,
+      theme = {}
+    } = configOptions;
+    const prefix = `${globalPrefix}font`;
+    const {
+      fontFamily = {}
+    } = theme;
+    const responsiveCssString = generateCssString$1(_ref => {
+      let {
+        getCssByOptions
+      } = _ref;
+      const cssString = getCssByOptions(fontFamily, (key, value) => {
+        return `
+          ${prefix}-${key} {
+            font-family: ${value};
+          }
+        `;
+      });
+      return cssString;
+    }, configOptions);
+    return responsiveCssString;
+  }
+
   function generator$1L() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
@@ -6593,6 +6717,9 @@ var tailwindToStyle = (function (exports) {
           ${customPrefix}-${key} {
             color: ${value};
           }
+          ${prefix}-${key} {
+            color: ${value};
+          }
         `;
         }
         return `
@@ -7788,7 +7915,10 @@ var tailwindToStyle = (function (exports) {
 
         // Split by comma and process each font
         const fonts = decodedValue.split(",").map(font => {
-          const trimmedFont = font.trim();
+          let trimmedFont = font.trim();
+
+          // Replace underscores with spaces (Tailwind convention)
+          trimmedFont = trimmedFont.replace(/_/g, " ");
 
           // If font contains spaces and is not already quoted, add quotes
           if (trimmedFont.includes(" ") && !trimmedFont.startsWith('"') && !trimmedFont.startsWith("'")) {
@@ -8130,71 +8260,72 @@ var tailwindToStyle = (function (exports) {
   }
 
   const plugins = {
-    accentColor: generator$2M,
-    accessibility: generator$2L,
-    alignContent: generator$2K,
-    alignItems: generator$2J,
-    alignSelf: generator$2I,
-    animation: generator$2H,
-    appearance: generator$2G,
-    aspect: generator$2F,
-    backgroundAttachment: generator$2E,
-    backgroundClip: generator$2D,
-    backgroundColor: generator$2C,
-    backgroundImage: generator$2B,
-    backgroundOpacity: generator$2A,
-    backgroundOrigin: generator$2z,
-    backgroundPosition: generator$2y,
-    backgroundRepeat: generator$2x,
-    backgroundSize: generator$2w,
-    backdropBlur: generator$2v,
-    backdropBrightness: generator$2u,
-    backdropContrast: generator$2t,
-    backdropFilter: generator$2s,
-    backdropGrayscale: generator$2r,
-    backdropHueRotate: generator$2q,
-    backdropInvert: generator$2p,
-    backdropOpacity: generator$2o,
-    backdropSaturate: generator$2n,
-    backdropSepia: generator$2m,
-    blur: generator$2l,
-    borderCollapse: generator$2k,
-    borderColor: generator$2j,
-    borderOpacity: generator$2i,
-    borderRadius: generator$2h,
-    borderSpacing: generator$2g,
-    borderStyle: generator$2f,
-    borderWidth: generator$2e,
-    boxDecorationBreak: generator$2d,
-    boxShadow: generator$2c,
-    boxSizing: generator$2b,
-    breakAfter: generator$2a,
-    breakBefore: generator$29,
-    breakInside: generator$28,
-    brightness: generator$27,
-    captionSide: generator$26,
-    caretColor: generator$25,
-    clear: generator$24,
-    columns: generator$23,
-    container: generator$22,
-    content: generator$21,
-    contrast: generator$20,
-    cursor: generator$1$,
-    display: generator$1_,
-    divideColor: generator$1Z,
-    divideOpacity: generator$1Y,
-    divideStyle: generator$1X,
-    divideWidth: generator$1W,
-    dropShadow: generator$1V,
-    fill: generator$1U,
-    filter: generator$1T,
-    flex: generator$1S,
-    flexBasis: generator$1R,
-    flexDirection: generator$1Q,
-    flexGrow: generator$1P,
-    flexShrink: generator$1O,
-    flexWrap: generator$1N,
-    float: generator$1M,
+    accentColor: generator$2N,
+    accessibility: generator$2M,
+    alignContent: generator$2L,
+    alignItems: generator$2K,
+    alignSelf: generator$2J,
+    animation: generator$2I,
+    appearance: generator$2H,
+    aspect: generator$2G,
+    backgroundAttachment: generator$2F,
+    backgroundClip: generator$2E,
+    backgroundColor: generator$2D,
+    backgroundImage: generator$2C,
+    backgroundOpacity: generator$2B,
+    backgroundOrigin: generator$2A,
+    backgroundPosition: generator$2z,
+    backgroundRepeat: generator$2y,
+    backgroundSize: generator$2x,
+    backdropBlur: generator$2w,
+    backdropBrightness: generator$2v,
+    backdropContrast: generator$2u,
+    backdropFilter: generator$2t,
+    backdropGrayscale: generator$2s,
+    backdropHueRotate: generator$2r,
+    backdropInvert: generator$2q,
+    backdropOpacity: generator$2p,
+    backdropSaturate: generator$2o,
+    backdropSepia: generator$2n,
+    blur: generator$2m,
+    borderCollapse: generator$2l,
+    borderColor: generator$2k,
+    borderOpacity: generator$2j,
+    borderRadius: generator$2i,
+    borderSpacing: generator$2h,
+    borderStyle: generator$2g,
+    borderWidth: generator$2f,
+    boxDecorationBreak: generator$2e,
+    boxShadow: generator$2d,
+    boxSizing: generator$2c,
+    breakAfter: generator$2b,
+    breakBefore: generator$2a,
+    breakInside: generator$29,
+    brightness: generator$28,
+    captionSide: generator$27,
+    caretColor: generator$26,
+    clear: generator$25,
+    columns: generator$24,
+    container: generator$23,
+    content: generator$22,
+    contrast: generator$21,
+    cursor: generator$20,
+    display: generator$1$,
+    divideColor: generator$1_,
+    divideOpacity: generator$1Z,
+    divideStyle: generator$1Y,
+    divideWidth: generator$1X,
+    dropShadow: generator$1W,
+    fill: generator$1V,
+    filter: generator$1U,
+    flex: generator$1T,
+    flexBasis: generator$1S,
+    flexDirection: generator$1R,
+    flexGrow: generator$1Q,
+    flexShrink: generator$1P,
+    flexWrap: generator$1O,
+    float: generator$1N,
+    fontFamily: generator$1M,
     fontSize: generator$1L,
     fontSmoothing: generator$1K,
     fontStyle: generator$1J,
@@ -8324,10 +8455,10 @@ var tailwindToStyle = (function (exports) {
     return null;
   }
 
-  /**
-   * Resolve all CSS custom properties (var) in a CSS string and output only clear CSS (no custom property)
-   * @param {string} cssString
-   * @returns {string} e.g. 'color: rgba(255,255,255,1); background: #fff;'
+  /**
+   * Resolve all CSS custom properties (var) in a CSS string and output only clear CSS (no custom property)
+   * @param {string} cssString
+   * @returns {string} e.g. 'color: rgba(255,255,255,1); background: #fff;'
    */
   function resolveCssToClearCss(cssString) {
     const customVars = {};
@@ -8621,11 +8752,11 @@ var tailwindToStyle = (function (exports) {
     }
   }
 
-  /**
-   * Process opacity modifier from class name (e.g., text-red-500/50 -> 50% opacity)
-   * @param {string} className - Class name with potential opacity modifier
-   * @param {string} cssDeclaration - CSS declaration to modify
-   * @returns {string} Modified CSS declaration with opacity applied
+  /**
+   * Process opacity modifier from class name (e.g., text-red-500/50 -> 50% opacity)
+   * @param {string} className - Class name with potential opacity modifier
+   * @param {string} cssDeclaration - CSS declaration to modify
+   * @returns {string} Modified CSS declaration with opacity applied
    */
   function processOpacityModifier(className, cssDeclaration) {
     const opacityMatch = className.match(/\/(\d+)$/);
@@ -8686,11 +8817,11 @@ var tailwindToStyle = (function (exports) {
     return modifiedDeclaration;
   }
 
-  /**
-   * Convert Tailwind class string to inline CSS styles or JSON object
-   * @param {string} classNames - String containing Tailwind classes to convert
-   * @param {boolean} convertToJson - If true, result will be JSON object, if false becomes CSS string
-   * @returns {string|Object} Inline CSS string or style JSON object
+  /**
+   * Convert Tailwind class string to inline CSS styles or JSON object
+   * @param {string} classNames - String containing Tailwind classes to convert
+   * @param {boolean} convertToJson - If true, result will be JSON object, if false becomes CSS string
+   * @returns {string|Object} Inline CSS string or style JSON object
    */
   function tws(classNames, convertToJson) {
     const totalMarker = performanceMonitor.start("tws:total");
@@ -9134,17 +9265,18 @@ var tailwindToStyle = (function (exports) {
     return cssString.trim();
   }
 
-  /**
-   * Generate CSS string from style object with SCSS-like syntax
-   * Supports nested selectors, state variants, responsive variants, and @css directives
-   * @param {Object} obj - Object with SCSS-like style format
-   * @param {Object} [options] - Additional options, e.g. { inject: true/false }
-   * @returns {string} Generated CSS string
+  /**
+   * Generate CSS string from style object with SCSS-like syntax
+   * Supports nested selectors, state variants, responsive variants, and @css directives
+   * @param {Object} obj - Object with SCSS-like style format
+   * @param {Object} [options] - Additional options, e.g. { inject: true/false }
+   * @returns {string} Generated CSS string
    */
   function twsx(obj) {
     let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const totalMarker = performanceMonitor.start("twsx:total");
     try {
+      var _options$theme2, _userConfigData$theme2;
       if (!obj || typeof obj !== "object") {
         logger.warn("twsx: Expected an object but received:", obj);
         return "";
@@ -9221,12 +9353,48 @@ var tailwindToStyle = (function (exports) {
       // Generate CSS string
       const cssString = performanceMonitor.measure(() => generateCssString(styles), "twsx:generate");
 
+      // Generate keyframes CSS separately
+      const keyframesMarker = performanceMonitor.start("twsx:keyframes");
+      const userConfigData = getConfig();
+      const mergedOptions = {
+        ...options,
+        theme: {
+          ...options.theme,
+          ...userConfigData.theme,
+          extend: {
+            ...((_options$theme2 = options.theme) === null || _options$theme2 === void 0 ? void 0 : _options$theme2.extend),
+            ...((_userConfigData$theme2 = userConfigData.theme) === null || _userConfigData$theme2 === void 0 ? void 0 : _userConfigData$theme2.extend)
+          }
+        }
+      };
+      const configOptions = getConfigOptions(mergedOptions, Object.keys(plugins));
+      const {
+        keyframes = {}
+      } = configOptions.theme || {};
+      let keyframesCSS = "";
+      for (const [name, keyframe] of Object.entries(keyframes)) {
+        keyframesCSS += `@keyframes ${name} {\n`;
+        for (const [percentage, styles] of Object.entries(keyframe)) {
+          keyframesCSS += `  ${percentage} {\n`;
+          for (const [prop, value] of Object.entries(styles)) {
+            const cssProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+            keyframesCSS += `    ${cssProp}: ${value};\n`;
+          }
+          keyframesCSS += `  }\n`;
+        }
+        keyframesCSS += `}\n`;
+      }
+      performanceMonitor.end(keyframesMarker);
+
+      // Combine keyframes and regular CSS
+      const finalCSS = keyframesCSS + cssString;
+
       // Auto-inject if needed
       if (inject && typeof window !== "undefined" && typeof document !== "undefined") {
-        performanceMonitor.measure(() => autoInjectCss(cssString), "twsx:inject");
+        performanceMonitor.measure(() => autoInjectCss(finalCSS), "twsx:inject");
       }
       performanceMonitor.end(totalMarker);
-      return cssString;
+      return finalCSS;
     } catch (error) {
       performanceMonitor.end(totalMarker);
       handleError(error, {
@@ -9284,19 +9452,19 @@ var tailwindToStyle = (function (exports) {
   }
 
   // Enhanced debounced functions with performance monitoring configuration
-  /**
-   * Debounced version of tws function with performance monitoring
-   * @param {string} classNames - String containing Tailwind classes to convert
-   * @param {boolean} convertToJson - If true, result will be JSON object, if false becomes CSS string
-   * @returns {string|Object} Inline CSS string or style JSON object
+  /**
+   * Debounced version of tws function with performance monitoring
+   * @param {string} classNames - String containing Tailwind classes to convert
+   * @param {boolean} convertToJson - If true, result will be JSON object, if false becomes CSS string
+   * @returns {string|Object} Inline CSS string or style JSON object
    */
   const debouncedTws = debounce(tws, 50); // Faster debounce for tws
 
-  /**
-   * Debounced version of twsx function with performance monitoring
-   * @param {Object} obj - Object with SCSS-like style format
-   * @param {Object} [options] - Additional options
-   * @returns {string} Generated CSS string
+  /**
+   * Debounced version of twsx function with performance monitoring
+   * @param {Object} obj - Object with SCSS-like style format
+   * @param {Object} [options] - Additional options
+   * @returns {string} Generated CSS string
    */
   const debouncedTwsx = debounce(twsx, 100); // Standard debounce for twsx