tailwind-to-style 2.10.2 → 2.10.4

package/dist/index.esm.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
@@ -22,6 +22,8 @@ const theme = {
     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: {
@@ -653,6 +655,11 @@ const theme = {
     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",
@@ -1538,6 +1545,31 @@ const theme = {
         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: {
@@ -2058,7 +2090,7 @@ function generateCssString$1() {
   return cssString;
 }
 
-function generator$2M() {
+function generator$2N() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2075,6 +2107,13 @@ function generator$2M() {
       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));`;
@@ -2087,17 +2126,21 @@ function generator$2M() {
             }
           `;
     });
-    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
@@ -2136,7 +2179,7 @@ function generator$2L() {
   return responsiveCssString;
 }
 
-function generator$2K() {
+function generator$2L() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -2164,7 +2207,7 @@ function generator$2K() {
   return responsiveCssString;
 }
 
-function generator$2J() {
+function generator$2K() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -2191,7 +2234,7 @@ function generator$2J() {
   return responsiveCssString;
 }
 
-function generator$2I() {
+function generator$2J() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -2435,7 +2478,7 @@ function staggerAnimations(elements, animationName) {
  * 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,
@@ -2443,18 +2486,39 @@ function generator$2H() {
   } = 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;
       }, {})
     };
@@ -2500,12 +2564,14 @@ function generator$2H() {
           }
         `;
     });
-    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
@@ -2525,7 +2591,7 @@ function generator$2G() {
   return responsiveCssString;
 }
 
-function generator$2F() {
+function generator$2G() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2533,13 +2599,31 @@ function generator$2F() {
   } = 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};
           }
@@ -2554,7 +2638,7 @@ function generator$2F() {
   return responsiveCssString;
 }
 
-function generator$2E() {
+function generator$2F() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -2575,7 +2659,7 @@ function generator$2E() {
   return responsiveCssString;
 }
 
-function generator$2D() {
+function generator$2E() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -2602,7 +2686,7 @@ function generator$2D() {
   return responsiveCssString;
 }
 
-function generator$2C() {
+function generator$2D() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2642,7 +2726,7 @@ function generator$2C() {
   return responsiveCssString;
 }
 
-function generator$2B() {
+function generator$2C() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2676,7 +2760,7 @@ function generator$2B() {
   return responsiveCssString;
 }
 
-function generator$2A() {
+function generator$2B() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2700,7 +2784,7 @@ function generator$2A() {
   return responsiveCssString;
 }
 
-function generator$2z() {
+function generator$2A() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -2726,7 +2810,7 @@ function generator$2z() {
   return responsiveCssString;
 }
 
-function generator$2y() {
+function generator$2z() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2760,7 +2844,7 @@ function generator$2y() {
   return responsiveCssString;
 }
 
-function generator$2x() {
+function generator$2y() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -2788,7 +2872,7 @@ function generator$2x() {
   return responsiveCssString;
 }
 
-function generator$2w() {
+function generator$2x() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2822,7 +2906,7 @@ function generator$2w() {
   return responsiveCssString;
 }
 
-function generator$2v() {
+function generator$2w() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2851,7 +2935,7 @@ function generator$2v() {
   return responsiveCssString;
 }
 
-function generator$2u() {
+function generator$2v() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2880,7 +2964,7 @@ function generator$2u() {
   return responsiveCssString;
 }
 
-function generator$2t() {
+function generator$2u() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2909,7 +2993,7 @@ function generator$2t() {
   return responsiveCssString;
 }
 
-function generator$2s() {
+function generator$2t() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix,
@@ -2929,7 +3013,7 @@ function generator$2s() {
   return responsiveCssString;
 }
 
-function generator$2r() {
+function generator$2s() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2958,7 +3042,7 @@ function generator$2r() {
   return responsiveCssString;
 }
 
-function generator$2q() {
+function generator$2r() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2987,7 +3071,7 @@ function generator$2q() {
   return responsiveCssString;
 }
 
-function generator$2p() {
+function generator$2q() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3016,7 +3100,7 @@ function generator$2p() {
   return responsiveCssString;
 }
 
-function generator$2o() {
+function generator$2p() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3045,7 +3129,7 @@ function generator$2o() {
   return responsiveCssString;
 }
 
-function generator$2n() {
+function generator$2o() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3074,7 +3158,7 @@ function generator$2n() {
   return responsiveCssString;
 }
 
-function generator$2m() {
+function generator$2n() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3103,7 +3187,7 @@ function generator$2m() {
   return responsiveCssString;
 }
 
-function generator$2l() {
+function generator$2m() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3137,7 +3221,7 @@ function generator$2l() {
   return responsiveCssString;
 }
 
-function generator$2k() {
+function generator$2l() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -3158,7 +3242,7 @@ function generator$2k() {
   return responsiveCssString;
 }
 
-function generator$2j() {
+function generator$2k() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3187,6 +3271,9 @@ function generator$2j() {
           ${customPrefix}${key} {
             border-color: ${value};
           }
+          ${prefix}${key} {
+            border-color: ${value};
+          }
         `;
       }
       return `
@@ -3246,7 +3333,7 @@ function generator$2j() {
   return responsiveCssString;
 }
 
-function generator$2i() {
+function generator$2j() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3270,7 +3357,7 @@ function generator$2i() {
   return responsiveCssString;
 }
 
-function generator$2h() {
+function generator$2i() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3345,7 +3432,7 @@ function generator$2h() {
   return responsiveCssString;
 }
 
-function generator$2g() {
+function generator$2h() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3380,7 +3467,7 @@ function generator$2g() {
   return responsiveCssString;
 }
 
-function generator$2f() {
+function generator$2g() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -3401,7 +3488,7 @@ function generator$2f() {
   return responsiveCssString;
 }
 
-function generator$2e() {
+function generator$2f() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3466,7 +3553,7 @@ function generator$2e() {
   return responsiveCssString;
 }
 
-function generator$2d() {
+function generator$2e() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -3488,7 +3575,7 @@ function generator$2d() {
   return responsiveCssString;
 }
 
-function generator$2c() {
+function generator$2d() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3542,7 +3629,7 @@ function generator$2c() {
   return responsiveCssString;
 }
 
-function generator$2b() {
+function generator$2c() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -3566,7 +3653,7 @@ function generator$2b() {
   return responsiveCssString;
 }
 
-function generator$2a() {
+function generator$2b() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix
@@ -3586,7 +3673,7 @@ function generator$2a() {
   return responsiveCssString;
 }
 
-function generator$29() {
+function generator$2a() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix
@@ -3606,7 +3693,7 @@ function generator$29() {
   return responsiveCssString;
 }
 
-function generator$28() {
+function generator$29() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix
@@ -3626,7 +3713,7 @@ function generator$28() {
   return responsiveCssString;
 }
 
-function generator$27() {
+function generator$28() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3660,7 +3747,7 @@ function generator$27() {
   return responsiveCssString;
 }
 
-function generator$26() {
+function generator$27() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -3681,7 +3768,7 @@ function generator$26() {
   return responsiveCssString;
 }
 
-function generator$25() {
+function generator$26() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3698,6 +3785,13 @@ function generator$25() {
       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));`;
@@ -3710,17 +3804,21 @@ function generator$25() {
             }
           `;
     });
-    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
@@ -3741,7 +3839,7 @@ function generator$24() {
   return responsiveCssString;
 }
 
-function generator$23() {
+function generator$24() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix,
@@ -3764,7 +3862,7 @@ function generator$23() {
   return responsiveCssString;
 }
 
-function generator$22() {
+function generator$23() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix
@@ -3780,7 +3878,7 @@ function generator$22() {
   return responsiveCssString;
 }
 
-function generator$21() {
+function generator$22() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3804,7 +3902,7 @@ function generator$21() {
   return responsiveCssString;
 }
 
-function generator$20() {
+function generator$21() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3838,7 +3936,7 @@ function generator$20() {
   return responsiveCssString;
 }
 
-function generator$1$() {
+function generator$20() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -3859,7 +3957,7 @@ function generator$1$() {
   return responsiveCssString;
 }
 
-function generator$1_() {
+function generator$1$() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix
@@ -3879,7 +3977,7 @@ function generator$1_() {
   return responsiveCssString;
 }
 
-function generator$1Z() {
+function generator$1_() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3910,7 +4008,7 @@ function generator$1Z() {
   return responsiveCssString;
 }
 
-function generator$1Y() {
+function generator$1Z() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3934,7 +4032,7 @@ function generator$1Y() {
   return responsiveCssString;
 }
 
-function generator$1X() {
+function generator$1Y() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -3955,7 +4053,7 @@ function generator$1X() {
   return responsiveCssString;
 }
 
-function generator$1W() {
+function generator$1X() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -4003,7 +4101,7 @@ function generator$1W() {
   return responsiveCssString;
 }
 
-function generator$1V() {
+function generator$1W() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -4031,7 +4129,7 @@ function generator$1V() {
   return responsiveCssString;
 }
 
-function generator$1U() {
+function generator$1V() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -4057,7 +4155,7 @@ function generator$1U() {
   return responsiveCssString;
 }
 
-function generator$1T(_ref) {
+function generator$1U(_ref) {
   let {
     prefix
   } = _ref;
@@ -4070,7 +4168,7 @@ function generator$1T(_ref) {
 `;
 }
 
-function generator$1S() {
+function generator$1T() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -4094,7 +4192,7 @@ function generator$1S() {
   return responsiveCssString;
 }
 
-function generator$1R() {
+function generator$1S() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -4118,7 +4216,7 @@ function generator$1R() {
   return responsiveCssString;
 }
 
-function generator$1Q() {
+function generator$1R() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -4144,7 +4242,7 @@ function generator$1Q() {
   return responsiveCssString;
 }
 
-function generator$1P() {
+function generator$1Q() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -4168,7 +4266,7 @@ function generator$1P() {
   return responsiveCssString;
 }
 
-function generator$1O() {
+function generator$1P() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -4192,7 +4290,7 @@ function generator$1O() {
   return responsiveCssString;
 }
 
-function generator$1N() {
+function generator$1O() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -4218,7 +4316,7 @@ function generator$1N() {
   return responsiveCssString;
 }
 
-function generator$1M() {
+function generator$1N() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -4239,6 +4337,32 @@ function generator$1M() {
   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 {
@@ -6590,6 +6714,9 @@ function generator$v() {
           ${customPrefix}-${key} {
             color: ${value};
           }
+          ${prefix}-${key} {
+            color: ${value};
+          }
         `;
       }
       return `
@@ -7785,7 +7912,10 @@ const fontFamily = {
 
       // 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("'")) {
@@ -8127,71 +8257,72 @@ function applyDynamicAnimation(element, templateName) {
 }
 
 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,
@@ -8321,10 +8452,10 @@ function parseCustomClassWithPatterns(className) {
   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 = {};
@@ -8618,11 +8749,11 @@ function separateAndResolveCSS(arr) {
   }
 }
 
-/**
- * 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+)$/);
@@ -8683,11 +8814,11 @@ function processOpacityModifier(className, cssDeclaration) {
   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");
@@ -9131,17 +9262,18 @@ function generateCssString(styles) {
   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 "";
@@ -9218,12 +9350,48 @@ function twsx(obj) {
     // 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, {
@@ -9281,19 +9449,19 @@ function autoInjectCss(cssString) {
 }
 
 // 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