npm - tailwind-to-style - Versions diffs - 2.10.0-beta.1 → 2.10.1 - Mend

tailwind-to-style 2.10.0-beta.1 → 2.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.browser.js +1454 -417
package/dist/index.cjs +1454 -417
package/dist/index.esm.js +1444 -418
package/dist/index.min.js +1 -1
package/dist/index.min.js.map +1 -1
package/dist/react.cjs.js +8468 -0
package/dist/react.d.ts +76 -0
package/dist/react.esm.js +8456 -0
package/package.json +1 -1

package/dist/index.browser.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.10.0-beta.1
+ * tailwind-to-style v2.10.1
  * Convert tailwind classes to inline style
  *
  * @author Bigetion
@@ -1594,9 +1594,9 @@ var tailwindToStyle = (function (exports) {
     vars
   };
-  /**
-   * TailwindCache singleton for managing generated Tailwind CSS
-   * Replaces global state with proper encapsulation
+  /**
+   * TailwindCache singleton for managing generated Tailwind CSS
+   * Replaces global state with proper encapsulation
    */
   class TailwindCache {
     constructor() {
@@ -1605,44 +1605,44 @@ var tailwindToStyle = (function (exports) {
       this.initialized = false;
     }
-    /**
-     * Get or generate the CSS object
-     * @param {Function} generateFn - Function to generate CSS string
-     * @param {Function} convertFn - Function to convert CSS string to object
-     * @returns {Object} CSS object lookup
+    /**
+     * Get or generate the CSS object
+     * @param {Function} generateFn - Function to generate CSS string
+     * @param {Function} convertFn - Function to convert CSS string to object
+     * @returns {Object} CSS object lookup
      */
     getOrGenerate(generateFn, convertFn) {
       if (!this.initialized) {
-        this.twString = generateFn().replace(/\s\s+/g, ' ');
+        this.twString = generateFn().replace(/\s\s+/g, " ");
         this.cssObject = convertFn(this.twString);
         this.initialized = true;
       }
       return this.cssObject;
     }
-    /**
-     * Get the CSS string
+    /**
+     * Get the CSS string
      */
     getCssString() {
       return this.twString;
     }
-    /**
-     * Get the CSS object
+    /**
+     * Get the CSS object
      */
     getCssObject() {
       return this.cssObject;
     }
-    /**
-     * Check if cache is initialized
+    /**
+     * Check if cache is initialized
      */
     isInitialized() {
       return this.initialized;
     }
-    /**
-     * Reset the cache (useful for testing)
+    /**
+     * Reset the cache (useful for testing)
      */
     reset() {
       this.twString = null;
@@ -1654,9 +1654,9 @@ var tailwindToStyle = (function (exports) {
   // Singleton instance
   let instance = null;
-  /**
-   * Get the TailwindCache singleton instance
-   * @returns {TailwindCache} The cache instance
+  /**
+   * Get the TailwindCache singleton instance
+   * @returns {TailwindCache} The cache instance
    */
   function getTailwindCache() {
     if (!instance) {
@@ -1665,8 +1665,8 @@ var tailwindToStyle = (function (exports) {
     return instance;
   }
-  /**
-   * Reset the TailwindCache singleton (for testing)
+  /**
+   * Reset the TailwindCache singleton (for testing)
    */
   function resetTailwindCache() {
     if (instance) {
@@ -1676,13 +1676,13 @@ var tailwindToStyle = (function (exports) {
   }
   var _process$env;
-  /**
-   * Logger class with configurable log levels
-   * Prevents console spam in production
+  /**
+   * Logger class with configurable log levels
+   * Prevents console spam in production
    */
   class Logger {
     constructor() {
-      let level = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'warn';
+      let level = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "warn";
       this.level = level;
       this.levels = {
         debug: 0,
@@ -1693,9 +1693,9 @@ var tailwindToStyle = (function (exports) {
       };
     }
-    /**
-     * Set the log level
-     * @param {string} level - One of 'debug', 'info', 'warn', 'error', 'silent'
+    /**
+     * Set the log level
+     * @param {string} level - One of 'debug', 'info', 'warn', 'error', 'silent'
      */
     setLevel(level) {
       if (this.levels[level] !== undefined) {
@@ -1703,25 +1703,25 @@ var tailwindToStyle = (function (exports) {
       }
     }
-    /**
-     * Get current log level
+    /**
+     * Get current log level
      */
     getLevel() {
       return this.level;
     }
-    /**
-     * Check if a message should be logged
+    /**
+     * Check if a message should be logged
      */
     shouldLog(level) {
       return this.levels[level] >= this.levels[this.level];
     }
-    /**
-     * Log debug message
+    /**
+     * Log debug message
      */
     debug(message) {
-      if (this.shouldLog('debug')) {
+      if (this.shouldLog("debug")) {
         for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
           args[_key - 1] = arguments[_key];
         }
@@ -1729,11 +1729,11 @@ var tailwindToStyle = (function (exports) {
       }
     }
-    /**
-     * Log info message
+    /**
+     * Log info message
      */
     info(message) {
-      if (this.shouldLog('info')) {
+      if (this.shouldLog("info")) {
         for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
           args[_key2 - 1] = arguments[_key2];
         }
@@ -1741,11 +1741,11 @@ var tailwindToStyle = (function (exports) {
       }
     }
-    /**
-     * Log warning message
+    /**
+     * Log warning message
      */
     warn(message) {
-      if (this.shouldLog('warn')) {
+      if (this.shouldLog("warn")) {
         for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
           args[_key3 - 1] = arguments[_key3];
         }
@@ -1753,11 +1753,11 @@ var tailwindToStyle = (function (exports) {
       }
     }
-    /**
-     * Log error message
+    /**
+     * Log error message
      */
     error(message) {
-      if (this.shouldLog('error')) {
+      if (this.shouldLog("error")) {
         for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
           args[_key4 - 1] = arguments[_key4];
         }
@@ -1767,16 +1767,16 @@ var tailwindToStyle = (function (exports) {
   }
   // Create singleton instance with production-safe defaults
-  const isProduction = typeof process !== 'undefined' && ((_process$env = process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) === 'production';
-  const logger = new Logger(isProduction ? 'error' : 'warn');
+  const isProduction = typeof process !== "undefined" && ((_process$env = process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) === "production";
+  const logger = new Logger(isProduction ? "error" : "warn");
-  /**
-   * User Configuration Management
-   * Handles theme extensions and custom plugin registration
+  /**
+   * User Configuration Management
+   * Handles theme extensions and custom plugin registration
    */
-  /**
-   * User configuration state
+  /**
+   * User configuration state
    */
   let userConfig = {
     theme: {
@@ -1787,11 +1787,11 @@ var tailwindToStyle = (function (exports) {
     prefix: ""
   };
-  /**
-   * Deep merge two objects
-   * @param {Object} target - Target object
-   * @param {Object} source - Source object
-   * @returns {Object} Merged object
+  /**
+   * Deep merge two objects
+   * @param {Object} target - Target object
+   * @param {Object} source - Source object
+   * @returns {Object} Merged object
    */
   function deepMerge(target, source) {
     const result = {
@@ -1807,31 +1807,31 @@ var tailwindToStyle = (function (exports) {
     return result;
   }
-  /**
-   * Configure tailwind-to-style with custom theme and plugins
-   * @param {Object} config - Configuration object
-   * @param {Object} [config.theme] - Theme configuration
-   * @param {Object} [config.theme.extend] - Theme extensions
-   * @param {Array} [config.plugins] - Array of plugins
-   * @param {Object} [config.corePlugins] - Core plugins to enable/disable
-   * @param {string} [config.prefix] - Prefix for all classes
-   *
-   * @example
-   * configure({
-   *   theme: {
-   *     extend: {
-   *       colors: {
-   *         brand: {
-   *           500: '#3B82F6',
-   *         },
-   *       },
-   *       spacing: {
-   *         128: '32rem',
-   *       },
-   *     },
-   *   },
-   *   plugins: [myCustomPlugin],
-   * });
+  /**
+   * Configure tailwind-to-style with custom theme and plugins
+   * @param {Object} config - Configuration object
+   * @param {Object} [config.theme] - Theme configuration
+   * @param {Object} [config.theme.extend] - Theme extensions
+   * @param {Array} [config.plugins] - Array of plugins
+   * @param {Object} [config.corePlugins] - Core plugins to enable/disable
+   * @param {string} [config.prefix] - Prefix for all classes
+   *
+   * @example
+   * configure({
+   *   theme: {
+   *     extend: {
+   *       colors: {
+   *         brand: {
+   *           500: '#3B82F6',
+   *         },
+   *       },
+   *       spacing: {
+   *         128: '32rem',
+   *       },
+   *     },
+   *   },
+   *   plugins: [myCustomPlugin],
+   * });
    */
   function configure() {
     let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -1885,9 +1885,9 @@ var tailwindToStyle = (function (exports) {
     }
   }
-  /**
-   * Get current user configuration
-   * @returns {Object} Current configuration
+  /**
+   * Get current user configuration
+   * @returns {Object} Current configuration
    */
   function getConfig() {
     return {
@@ -1895,8 +1895,8 @@ var tailwindToStyle = (function (exports) {
     };
   }
-  /**
-   * Reset configuration to defaults
+  /**
+   * Reset configuration to defaults
    */
   function resetConfig() {
     userConfig = {
@@ -1911,26 +1911,26 @@ var tailwindToStyle = (function (exports) {
     logger.info("Configuration reset to defaults");
   }
-  /**
-   * Get extended theme value
-   * @param {string} key - Theme key (e.g., 'colors', 'spacing')
-   * @returns {Object} Extended theme values
+  /**
+   * Get extended theme value
+   * @param {string} key - Theme key (e.g., 'colors', 'spacing')
+   * @returns {Object} Extended theme values
    */
   function getExtendedTheme(key) {
     return userConfig.theme.extend[key] || {};
   }
-  /**
-   * Get all registered plugins
-   * @returns {Array} Array of plugins
+  /**
+   * Get all registered plugins
+   * @returns {Array} Array of plugins
    */
   function getPlugins() {
     return userConfig.plugins;
   }
-  /**
-   * Get configured prefix
-   * @returns {string} Prefix string
+  /**
+   * Get configured prefix
+   * @returns {string} Prefix string
    */
   function getPrefix() {
     return userConfig.prefix;
@@ -1978,6 +1978,19 @@ var tailwindToStyle = (function (exports) {
       }
     });
+    // Re-resolve theme functions after all extensions are applied
+    // This ensures that theme functions like backgroundColor: ({ theme }) => theme("colors")
+    // get the updated colors including custom theme extensions
+    themeKeys.forEach(key => {
+      if (isFunction(configOptions.theme[key])) {
+        newTheme[key] = configOptions.theme[key]({
+          theme: keyRef => {
+            return newTheme[keyRef];
+          }
+        });
+      }
+    });
     // Get user prefix
     const userPrefix = getPrefix();
     const finalPrefix = userPrefix || options.prefix || "";
@@ -2048,7 +2061,7 @@ var tailwindToStyle = (function (exports) {
     return cssString;
   }
-  function generator$2w() {
+  function generator$2M() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2087,7 +2100,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2v() {
+  function generator$2L() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix
@@ -2126,7 +2139,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2u() {
+  function generator$2K() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -2154,7 +2167,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2t() {
+  function generator$2J() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -2181,7 +2194,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2s() {
+  function generator$2I() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -2208,14 +2221,224 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  /**
-   * Animation Generator
-   * Generates animation utility classes
-   * Note: Keyframes are defined in theme but not rendered here since inline styles
-   * can't use @keyframes. The animation values should reference keyframe names that
-   * are already defined in your global CSS.
+  /**
+   * Inline Animation System
+   * Generate animation properties directly without keyframes
    */
-  function generator$2r() {
+  /* eslint-disable no-undef */
+  /**
+   * Convert animation config to inline transition properties
+   */
+  function animationToTransition(animationConfig) {
+    const {
+      property = "all",
+      duration = 300,
+      easing = "ease-out",
+      delay = 0
+    } = animationConfig;
+    return {
+      transitionProperty: property,
+      transitionDuration: `${duration}ms`,
+      transitionTimingFunction: easing,
+      transitionDelay: `${delay}ms`
+    };
+  }
+  /**
+   * Built-in animation configs that work with transitions
+   */
+  const INLINE_ANIMATIONS = {
+    "fade-in": {
+      initial: {
+        opacity: 0
+      },
+      final: {
+        opacity: 1
+      },
+      transition: {
+        duration: 500,
+        easing: "ease-out"
+      }
+    },
+    "slide-up": {
+      initial: {
+        transform: "translateY(20px)",
+        opacity: 0
+      },
+      final: {
+        transform: "translateY(0)",
+        opacity: 1
+      },
+      transition: {
+        duration: 500,
+        easing: "ease-out"
+      }
+    },
+    "slide-down": {
+      initial: {
+        transform: "translateY(-20px)",
+        opacity: 0
+      },
+      final: {
+        transform: "translateY(0)",
+        opacity: 1
+      },
+      transition: {
+        duration: 500,
+        easing: "ease-out"
+      }
+    },
+    "zoom-in": {
+      initial: {
+        transform: "scale(0.8)",
+        opacity: 0
+      },
+      final: {
+        transform: "scale(1)",
+        opacity: 1
+      },
+      transition: {
+        duration: 400,
+        easing: "cubic-bezier(0.4, 0, 0.2, 1)"
+      }
+    },
+    "zoom-out": {
+      initial: {
+        transform: "scale(1.2)",
+        opacity: 0
+      },
+      final: {
+        transform: "scale(1)",
+        opacity: 1
+      },
+      transition: {
+        duration: 400,
+        easing: "cubic-bezier(0.4, 0, 0.2, 1)"
+      }
+    }
+  };
+  /**
+   * Apply inline animation to element
+   */
+  function applyInlineAnimation(element, animationName) {
+    let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    if (!element || !INLINE_ANIMATIONS[animationName]) return null;
+    const animation = INLINE_ANIMATIONS[animationName];
+    const {
+      autoStart = true,
+      onComplete
+    } = options;
+    // Apply initial state
+    Object.assign(element.style, animation.initial);
+    // Apply transition properties
+    const transitionProps = animationToTransition(animation.transition);
+    Object.assign(element.style, transitionProps);
+    if (autoStart) {
+      // Trigger animation on next frame
+      requestAnimationFrame(() => {
+        Object.assign(element.style, animation.final);
+        if (onComplete) {
+          setTimeout(onComplete, animation.transition.duration);
+        }
+      });
+    }
+    return {
+      start: () => Object.assign(element.style, animation.final),
+      reset: () => Object.assign(element.style, animation.initial),
+      animation
+    };
+  }
+  /**
+   * Animate element with custom properties
+   */
+  function animateElement(element, fromProps, toProps) {
+    let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    if (!element) return null;
+    const {
+      duration = 300,
+      easing = "ease-out",
+      delay = 0,
+      onComplete
+    } = options;
+    // Apply initial state
+    Object.assign(element.style, fromProps);
+    // Apply transition
+    element.style.transition = `all ${duration}ms ${easing} ${delay}ms`;
+    // Trigger animation
+    requestAnimationFrame(() => {
+      Object.assign(element.style, toProps);
+      if (onComplete) {
+        setTimeout(onComplete, duration + delay);
+      }
+    });
+    return {
+      element,
+      duration: duration + delay
+    };
+  }
+  /**
+   * Chain multiple animations
+   */
+  function chainAnimations(element, animations) {
+    let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    if (!element || !animations.length) return Promise.resolve();
+    const {
+      onProgress
+    } = options;
+    let currentIndex = 0;
+    return new Promise(resolve => {
+      function runNext() {
+        if (currentIndex >= animations.length) {
+          resolve();
+          return;
+        }
+        const animation = animations[currentIndex];
+        animateElement(element, animation.from, animation.to, {
+          ...animation.options,
+          onComplete: () => {
+            if (onProgress) {
+              onProgress(currentIndex, animations.length);
+            }
+            currentIndex++;
+            runNext();
+          }
+        });
+      }
+      runNext();
+    });
+  }
+  /**
+   * Stagger animations for multiple elements
+   */
+  function staggerAnimations(elements, animationName) {
+    let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    const {
+      staggerDelay = 100,
+      ...animationOptions
+    } = options;
+    return elements.map((element, index) => {
+      return setTimeout(() => {
+        applyInlineAnimation(element, animationName, animationOptions);
+      }, index * staggerDelay);
+    });
+  }
+  /**
+   * Animation Generator
+   * Generates animation utility classes with dynamic inline animations
+   */
+  function generator$2H() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2229,7 +2452,51 @@ var tailwindToStyle = (function (exports) {
       let {
         getCssByOptions
       } = _ref;
-      const cssString = getCssByOptions(animation, (key, value) => {
+      // Merge theme animations with inline animations
+      const allAnimations = {
+        ...animation,
+        // Add inline animations to the mix
+        ...Object.keys(INLINE_ANIMATIONS).reduce((acc, key) => {
+          acc[key] = `inline-${key}`; // Special marker for inline animations
+          return acc;
+        }, {})
+      };
+      const cssString = getCssByOptions(allAnimations, (key, value) => {
+        // Check if this is an inline animation
+        if (value.startsWith("inline-")) {
+          const animationKey = value.replace("inline-", "");
+          const inlineAnimation = INLINE_ANIMATIONS[animationKey];
+          if (inlineAnimation) {
+            // Generate CSS for inline animation (initial state + transition)
+            const transitionProps = animationToTransition(inlineAnimation.transition);
+            const initialProps = inlineAnimation.initial;
+            let css = `${prefix}-${key} {\n`;
+            // Add initial state properties
+            for (const [prop, val] of Object.entries(initialProps)) {
+              const cssProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+              css += `  ${cssProp}: ${val};\n`;
+            }
+            // Add transition properties
+            for (const [prop, val] of Object.entries(transitionProps)) {
+              const cssProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+              css += `  ${cssProp}: ${val};\n`;
+            }
+            css += "}\n";
+            // Add hover/active state for final animation
+            css += `${prefix}-${key}:hover, ${prefix}-${key}.animate-active {\n`;
+            for (const [prop, val] of Object.entries(inlineAnimation.final)) {
+              const cssProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+              css += `  ${cssProp}: ${val};\n`;
+            }
+            css += "}\n";
+            return css;
+          }
+        }
+        // Fallback to traditional animation property
         return `
           ${prefix}-${key} {
             animation: ${value};
@@ -2241,7 +2508,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2q() {
+  function generator$2G() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix
@@ -2261,7 +2528,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2p() {
+  function generator$2F() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2290,7 +2557,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2o() {
+  function generator$2E() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -2311,7 +2578,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2n() {
+  function generator$2D() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -2338,7 +2605,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2m() {
+  function generator$2C() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2378,7 +2645,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2l() {
+  function generator$2B() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2412,7 +2679,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2k() {
+  function generator$2A() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2436,7 +2703,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2j() {
+  function generator$2z() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -2462,7 +2729,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2i() {
+  function generator$2y() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2496,7 +2763,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2h() {
+  function generator$2x() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -2524,7 +2791,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2g() {
+  function generator$2w() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2558,7 +2825,288 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2f() {
+  function generator$2v() {
+    let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      prefix: globalPrefix,
+      theme = {},
+      vars = {}
+    } = configOptions;
+    const prefix = `${globalPrefix}backdrop-blur`;
+    const {
+      backdropBlur = {}
+    } = theme;
+    const responsiveCssString = generateCssString$1(_ref => {
+      let {
+        getCssByOptions
+      } = _ref;
+      const cssString = getCssByOptions(backdropBlur, (keyTmp, value) => {
+        const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
+        return `
+        ${prefix}${key} {
+          --tw-backdrop-blur: blur(${value});
+          ${vars.backdropFilter}
+        }
+      `;
+      });
+      return cssString;
+    }, configOptions);
+    return responsiveCssString;
+  }
+  function generator$2u() {
+    let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      prefix: globalPrefix,
+      theme = {},
+      vars = {}
+    } = configOptions;
+    const prefix = `${globalPrefix}backdrop-brightness`;
+    const {
+      backdropBrightness = {}
+    } = theme;
+    const responsiveCssString = generateCssString$1(_ref => {
+      let {
+        getCssByOptions
+      } = _ref;
+      const cssString = getCssByOptions(backdropBrightness, (keyTmp, value) => {
+        const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
+        return `
+        ${prefix}${key} {
+          --tw-backdrop-brightness: brightness(${value});
+          ${vars.backdropFilter}
+        }
+      `;
+      });
+      return cssString;
+    }, configOptions);
+    return responsiveCssString;
+  }
+  function generator$2t() {
+    let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      prefix: globalPrefix,
+      theme = {},
+      vars = {}
+    } = configOptions;
+    const prefix = `${globalPrefix}backdrop-contrast`;
+    const {
+      backdropContrast = {}
+    } = theme;
+    const responsiveCssString = generateCssString$1(_ref => {
+      let {
+        getCssByOptions
+      } = _ref;
+      const cssString = getCssByOptions(backdropContrast, (keyTmp, value) => {
+        const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
+        return `
+        ${prefix}${key} {
+          --tw-backdrop-contrast: contrast(${value});
+          ${vars.backdropFilter}
+        }
+      `;
+      });
+      return cssString;
+    }, configOptions);
+    return responsiveCssString;
+  }
+  function generator$2s() {
+    let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      prefix,
+      vars = {}
+    } = configOptions;
+    const responsiveCssString = generateCssString$1(() => {
+      const cssString = `
+      ${prefix}backdrop-filter {
+        ${vars.backdropFilter}
+      }
+      ${prefix}backdrop-filter-none {
+        backdrop-filter: none;
+      }
+    `;
+      return cssString;
+    }, configOptions);
+    return responsiveCssString;
+  }
+  function generator$2r() {
+    let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      prefix: globalPrefix,
+      theme = {},
+      vars = {}
+    } = configOptions;
+    const prefix = `${globalPrefix}backdrop-grayscale`;
+    const {
+      backdropGrayscale = {}
+    } = theme;
+    const responsiveCssString = generateCssString$1(_ref => {
+      let {
+        getCssByOptions
+      } = _ref;
+      const cssString = getCssByOptions(backdropGrayscale, (keyTmp, value) => {
+        const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
+        return `
+        ${prefix}${key} {
+          --tw-backdrop-grayscale: grayscale(${value});
+          ${vars.backdropFilter}
+        }
+      `;
+      });
+      return cssString;
+    }, configOptions);
+    return responsiveCssString;
+  }
+  function generator$2q() {
+    let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      prefix: globalPrefix,
+      theme = {},
+      vars = {}
+    } = configOptions;
+    const prefix = `${globalPrefix}backdrop-hue-rotate`;
+    const {
+      backdropHueRotate = {}
+    } = theme;
+    const responsiveCssString = generateCssString$1(_ref => {
+      let {
+        getCssByOptions
+      } = _ref;
+      const cssString = getCssByOptions(backdropHueRotate, (keyTmp, value) => {
+        const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
+        return `
+        ${prefix}${key} {
+          --tw-backdrop-hue-rotate: hue-rotate(${value});
+          ${vars.backdropFilter}
+        }
+      `;
+      });
+      return cssString;
+    }, configOptions);
+    return responsiveCssString;
+  }
+  function generator$2p() {
+    let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      prefix: globalPrefix,
+      theme = {},
+      vars = {}
+    } = configOptions;
+    const prefix = `${globalPrefix}backdrop-invert`;
+    const {
+      backdropInvert = {}
+    } = theme;
+    const responsiveCssString = generateCssString$1(_ref => {
+      let {
+        getCssByOptions
+      } = _ref;
+      const cssString = getCssByOptions(backdropInvert, (keyTmp, value) => {
+        const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
+        return `
+        ${prefix}${key} {
+          --tw-backdrop-invert: invert(${value});
+          ${vars.backdropFilter}
+        }
+      `;
+      });
+      return cssString;
+    }, configOptions);
+    return responsiveCssString;
+  }
+  function generator$2o() {
+    let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      prefix: globalPrefix,
+      theme = {},
+      vars = {}
+    } = configOptions;
+    const prefix = `${globalPrefix}backdrop-opacity`;
+    const {
+      backdropOpacity = {}
+    } = theme;
+    const responsiveCssString = generateCssString$1(_ref => {
+      let {
+        getCssByOptions
+      } = _ref;
+      const cssString = getCssByOptions(backdropOpacity, (keyTmp, value) => {
+        const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
+        return `
+        ${prefix}${key} {
+          --tw-backdrop-opacity: opacity(${value});
+          ${vars.backdropFilter}
+        }
+      `;
+      });
+      return cssString;
+    }, configOptions);
+    return responsiveCssString;
+  }
+  function generator$2n() {
+    let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      prefix: globalPrefix,
+      theme = {},
+      vars = {}
+    } = configOptions;
+    const prefix = `${globalPrefix}backdrop-saturate`;
+    const {
+      backdropSaturate = {}
+    } = theme;
+    const responsiveCssString = generateCssString$1(_ref => {
+      let {
+        getCssByOptions
+      } = _ref;
+      const cssString = getCssByOptions(backdropSaturate, (keyTmp, value) => {
+        const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
+        return `
+        ${prefix}${key} {
+          --tw-backdrop-saturate: saturate(${value});
+          ${vars.backdropFilter}
+        }
+      `;
+      });
+      return cssString;
+    }, configOptions);
+    return responsiveCssString;
+  }
+  function generator$2m() {
+    let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      prefix: globalPrefix,
+      theme = {},
+      vars = {}
+    } = configOptions;
+    const prefix = `${globalPrefix}backdrop-sepia`;
+    const {
+      backdropSepia = {}
+    } = theme;
+    const responsiveCssString = generateCssString$1(_ref => {
+      let {
+        getCssByOptions
+      } = _ref;
+      const cssString = getCssByOptions(backdropSepia, (keyTmp, value) => {
+        const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
+        return `
+        ${prefix}${key} {
+          --tw-backdrop-sepia: sepia(${value});
+          ${vars.backdropFilter}
+        }
+      `;
+      });
+      return cssString;
+    }, configOptions);
+    return responsiveCssString;
+  }
+  function generator$2l() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2592,7 +3140,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2e() {
+  function generator$2k() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -2613,7 +3161,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2d() {
+  function generator$2j() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2701,7 +3249,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2c() {
+  function generator$2i() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2725,7 +3273,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2b() {
+  function generator$2h() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2800,7 +3348,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$2a() {
+  function generator$2g() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2835,7 +3383,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$29() {
+  function generator$2f() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -2856,7 +3404,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$28() {
+  function generator$2e() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2921,7 +3469,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$27() {
+  function generator$2d() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -2943,7 +3491,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$26() {
+  function generator$2c() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -2997,7 +3545,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$25() {
+  function generator$2b() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -3021,7 +3569,67 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$24() {
+  function generator$2a() {
+    let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      prefix
+    } = configOptions;
+    const propertyOptions = ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"];
+    const responsiveCssString = generateCssString$1(_ref => {
+      let {
+        getCssByOptions
+      } = _ref;
+      const cssString = getCssByOptions(propertyOptions, (key, value) => `
+        ${prefix}break-after-${key} {
+          break-after: ${value};
+        }
+      `);
+      return cssString;
+    }, configOptions);
+    return responsiveCssString;
+  }
+  function generator$29() {
+    let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      prefix
+    } = configOptions;
+    const propertyOptions = ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"];
+    const responsiveCssString = generateCssString$1(_ref => {
+      let {
+        getCssByOptions
+      } = _ref;
+      const cssString = getCssByOptions(propertyOptions, (key, value) => `
+        ${prefix}break-before-${key} {
+          break-before: ${value};
+        }
+      `);
+      return cssString;
+    }, configOptions);
+    return responsiveCssString;
+  }
+  function generator$28() {
+    let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      prefix
+    } = configOptions;
+    const propertyOptions = ["auto", "avoid", "avoid-page", "avoid-column"];
+    const responsiveCssString = generateCssString$1(_ref => {
+      let {
+        getCssByOptions
+      } = _ref;
+      const cssString = getCssByOptions(propertyOptions, (key, value) => `
+        ${prefix}break-inside-${key} {
+          break-inside: ${value};
+        }
+      `);
+      return cssString;
+    }, configOptions);
+    return responsiveCssString;
+  }
+  function generator$27() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3055,7 +3663,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$23() {
+  function generator$26() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -3076,7 +3684,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$22() {
+  function generator$25() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3115,7 +3723,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$21() {
+  function generator$24() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -3136,7 +3744,46 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$20() {
+  function generator$23() {
+    let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      prefix,
+      theme = {}
+    } = configOptions;
+    const {
+      columns = {}
+    } = theme;
+    const responsiveCssString = generateCssString$1(_ref => {
+      let {
+        getCssByOptions
+      } = _ref;
+      const cssString = getCssByOptions(columns, (key, value) => `
+        ${prefix}columns-${key} {
+          columns: ${value};
+        }
+      `);
+      return cssString;
+    }, configOptions);
+    return responsiveCssString;
+  }
+  function generator$22() {
+    let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      prefix
+    } = configOptions;
+    const responsiveCssString = generateCssString$1(() => {
+      const cssString = `
+      ${prefix}container {
+        width: 100%;
+      }
+    `;
+      return cssString;
+    }, configOptions);
+    return responsiveCssString;
+  }
+  function generator$21() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3160,7 +3807,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,
@@ -3194,7 +3841,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: globalPrefix
@@ -3215,7 +3862,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
@@ -3235,7 +3882,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,
@@ -3266,7 +3913,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,
@@ -3290,7 +3937,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
@@ -3311,7 +3958,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,
@@ -3359,7 +4006,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,
@@ -3387,7 +4034,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1T() {
+  function generator$1U() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3413,7 +4060,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1S(_ref) {
+  function generator$1T(_ref) {
     let {
       prefix
     } = _ref;
@@ -3426,7 +4073,7 @@ var tailwindToStyle = (function (exports) {
 `;
   }
-  function generator$1R() {
+  function generator$1S() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3450,7 +4097,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,
@@ -3474,7 +4121,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
@@ -3500,7 +4147,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,
@@ -3524,7 +4171,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,
@@ -3548,7 +4195,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
@@ -3574,7 +4221,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1L() {
+  function generator$1M() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -3595,7 +4242,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1K() {
+  function generator$1L() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3629,7 +4276,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1J() {
+  function generator$1K() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix
@@ -3649,7 +4296,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1I() {
+  function generator$1J() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix
@@ -3672,7 +4319,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1H() {
+  function generator$1I() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix
@@ -3702,7 +4349,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1G() {
+  function generator$1H() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3736,7 +4383,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1F() {
+  function generator$1G() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3766,7 +4413,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1E() {
+  function generator$1F() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix,
@@ -3805,7 +4452,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1D() {
+  function generator$1E() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3839,7 +4486,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1C() {
+  function generator$1D() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3863,7 +4510,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1B() {
+  function generator$1C() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -3889,7 +4536,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1A() {
+  function generator$1B() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3913,7 +4560,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1z() {
+  function generator$1A() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -3937,7 +4584,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,
@@ -3961,7 +4608,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,
@@ -3985,7 +4632,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,
@@ -4009,7 +4656,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,
@@ -4033,7 +4680,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,
@@ -4057,7 +4704,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1t() {
+  function generator$1u() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -4081,7 +4728,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1s() {
+  function generator$1t() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -4105,7 +4752,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,
@@ -4129,7 +4776,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,
@@ -4167,7 +4814,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
@@ -4189,7 +4836,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,
@@ -4247,7 +4894,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,
@@ -4281,7 +4928,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
@@ -4305,7 +4952,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1l() {
+  function generator$1m() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -4333,7 +4980,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1k() {
+  function generator$1l() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -4354,7 +5001,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1j() {
+  function generator$1k() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix
@@ -4375,7 +5022,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1i() {
+  function generator$1j() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -4399,7 +5046,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1h() {
+  function generator$1i() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -4426,7 +5073,7 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  function generator$1g() {
+  function generator$1h() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       prefix: globalPrefix,
@@ -4450,6 +5097,22 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
+  function generator$1g() {
+    let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      prefix
+    } = configOptions;
+    const responsiveCssString = generateCssString$1(() => {
+      const cssString = `
+      ${prefix}list-image-none {
+        list-style-image: none;
+      }
+    `;
+      return cssString;
+    }, configOptions);
+    return responsiveCssString;
+  }
   function generator$1f() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
@@ -6406,9 +7069,9 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  /**
-   * Transition Delay Generator
-   * Generates transition-delay utility classes
+  /**
+   * Transition Delay Generator
+   * Generates transition-delay utility classes
    */
   function generator$c() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -6436,9 +7099,9 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  /**
-   * Transition Duration Generator
-   * Generates transition-duration utility classes
+  /**
+   * Transition Duration Generator
+   * Generates transition-duration utility classes
    */
   function generator$b() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -6466,9 +7129,9 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  /**
-   * Transition Property Generator
-   * Generates transition-property utility classes
+  /**
+   * Transition Property Generator
+   * Generates transition-property utility classes
    */
   function generator$a() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -6507,9 +7170,9 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  /**
-   * Transition Timing Function Generator
-   * Generates transition-timing-function utility classes (ease)
+  /**
+   * Transition Timing Function Generator
+   * Generates transition-timing-function utility classes (ease)
    */
   function generator$9() {
     let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -6778,9 +7441,9 @@ var tailwindToStyle = (function (exports) {
     return responsiveCssString;
   }
-  /**
-   * Proper LRU (Least Recently Used) Cache implementation
-   * Efficiently manages memory by removing least recently used items
+  /**
+   * Proper LRU (Least Recently Used) Cache implementation
+   * Efficiently manages memory by removing least recently used items
    */
   class LRUCache {
     constructor() {
@@ -6789,9 +7452,9 @@ var tailwindToStyle = (function (exports) {
       this.cache = new Map();
     }
-    /**
-     * Get value from cache
-     * Updates the item as most recently used
+    /**
+     * Get value from cache
+     * Updates the item as most recently used
      */
     get(key) {
       if (!this.cache.has(key)) {
@@ -6804,9 +7467,9 @@ var tailwindToStyle = (function (exports) {
       return value;
     }
-    /**
-     * Set value in cache
-     * Removes least recently used item if cache is full
+    /**
+     * Set value in cache
+     * Removes least recently used item if cache is full
      */
     set(key, value) {
       // If key exists, delete it first to update position
@@ -6820,61 +7483,61 @@ var tailwindToStyle = (function (exports) {
       this.cache.set(key, value);
     }
-    /**
-     * Check if key exists in cache
+    /**
+     * Check if key exists in cache
      */
     has(key) {
       return this.cache.has(key);
     }
-    /**
-     * Clear all cache entries
+    /**
+     * Clear all cache entries
      */
     clear() {
       this.cache.clear();
     }
-    /**
-     * Get current cache size
+    /**
+     * Get current cache size
      */
     get size() {
       return this.cache.size;
     }
-    /**
-     * Delete specific key
+    /**
+     * Delete specific key
      */
     delete(key) {
       return this.cache.delete(key);
     }
   }
-  /**
-   * Custom error class for tailwind-to-style
+  /**
+   * Custom error class for tailwind-to-style
    */
   class TwsError extends Error {
     constructor(message) {
       let context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       super(message);
-      this.name = 'TwsError';
+      this.name = "TwsError";
       this.context = context;
       this.timestamp = new Date().toISOString();
     }
   }
-  /**
-   * Error event handlers
+  /**
+   * Error event handlers
    */
   const errorHandlers = new Set();
-  /**
-   * Register an error handler
-   * @param {Function} handler - Function to call when errors occur
-   * @returns {Function} Unsubscribe function
+  /**
+   * Register an error handler
+   * @param {Function} handler - Function to call when errors occur
+   * @returns {Function} Unsubscribe function
    */
   function onError(handler) {
-    if (typeof handler !== 'function') {
-      throw new TypeError('Error handler must be a function');
+    if (typeof handler !== "function") {
+      throw new TypeError("Error handler must be a function");
     }
     errorHandlers.add(handler);
@@ -6882,10 +7545,10 @@ var tailwindToStyle = (function (exports) {
     return () => errorHandlers.delete(handler);
   }
-  /**
-   * Handle and broadcast errors
-   * @param {Error} error - The error that occurred
-   * @param {Object} context - Additional context about the error
+  /**
+   * Handle and broadcast errors
+   * @param {Error} error - The error that occurred
+   * @param {Object} context - Additional context about the error
    */
   function handleError(error) {
     let context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -6899,41 +7562,41 @@ var tailwindToStyle = (function (exports) {
       try {
         handler(twsError);
       } catch (handlerError) {
-        logger.error('Error in error handler:', handlerError);
+        logger.error("Error in error handler:", handlerError);
       }
     });
     return twsError;
   }
-  /**
-   * Plugin API for tailwind-to-style
-   * Allows users to create custom utilities and extend functionality
+  /**
+   * Plugin API for tailwind-to-style
+   * Allows users to create custom utilities and extend functionality
    */
-  /**
-   * Create a plugin for tailwind-to-style
-   *
-   * @param {string} name - Plugin name
-   * @param {Object} definition - Plugin definition
-   * @param {Object} [definition.utilities] - Custom utility classes
-   * @param {Object} [definition.components] - Custom component classes
-   * @param {Function} [definition.handler] - Custom handler function
-   * @returns {Object} Plugin object
-   *
-   * @example
-   * const myPlugin = createPlugin('my-plugin', {
-   *   utilities: {
-   *     '.text-gradient': {
-   *       'background-clip': 'text',
-   *       '-webkit-background-clip': 'text',
-   *       '-webkit-text-fill-color': 'transparent',
-   *     },
-   *     '.glass': {
-   *       'backdrop-filter': 'blur(10px)',
-   *       'background-color': 'rgba(255, 255, 255, 0.1)',
-   *     },
-   *   },
-   * });
+  /**
+   * Create a plugin for tailwind-to-style
+   *
+   * @param {string} name - Plugin name
+   * @param {Object} definition - Plugin definition
+   * @param {Object} [definition.utilities] - Custom utility classes
+   * @param {Object} [definition.components] - Custom component classes
+   * @param {Function} [definition.handler] - Custom handler function
+   * @returns {Object} Plugin object
+   *
+   * @example
+   * const myPlugin = createPlugin('my-plugin', {
+   *   utilities: {
+   *     '.text-gradient': {
+   *       'background-clip': 'text',
+   *       '-webkit-background-clip': 'text',
+   *       '-webkit-text-fill-color': 'transparent',
+   *     },
+   *     '.glass': {
+   *       'backdrop-filter': 'blur(10px)',
+   *       'background-color': 'rgba(255, 255, 255, 0.1)',
+   *     },
+   *   },
+   * });
    */
   function createPlugin(name, definition) {
     if (!name || typeof name !== "string") {
@@ -6953,28 +7616,28 @@ var tailwindToStyle = (function (exports) {
     return plugin;
   }
-  /**
-   * Create a utility plugin with dynamic values
-   *
-   * @param {string} name - Plugin name
-   * @param {Object} config - Configuration
-   * @param {string} config.prefix - Class prefix (e.g., 'text', 'bg')
-   * @param {Object} config.values - Values object
-   * @param {Function} config.formatter - Function to format CSS properties
-   * @returns {Object} Plugin object
-   *
-   * @example
-   * const textShadowPlugin = createUtilityPlugin('text-shadow', {
-   *   prefix: 'text-shadow',
-   *   values: {
-   *     sm: '1px 1px 2px rgba(0,0,0,0.1)',
-   *     md: '2px 2px 4px rgba(0,0,0,0.1)',
-   *     lg: '4px 4px 8px rgba(0,0,0,0.1)',
-   *   },
-   *   formatter: (value) => ({
-   *     'text-shadow': value,
-   *   }),
-   * });
+  /**
+   * Create a utility plugin with dynamic values
+   *
+   * @param {string} name - Plugin name
+   * @param {Object} config - Configuration
+   * @param {string} config.prefix - Class prefix (e.g., 'text', 'bg')
+   * @param {Object} config.values - Values object
+   * @param {Function} config.formatter - Function to format CSS properties
+   * @returns {Object} Plugin object
+   *
+   * @example
+   * const textShadowPlugin = createUtilityPlugin('text-shadow', {
+   *   prefix: 'text-shadow',
+   *   values: {
+   *     sm: '1px 1px 2px rgba(0,0,0,0.1)',
+   *     md: '2px 2px 4px rgba(0,0,0,0.1)',
+   *     lg: '4px 4px 8px rgba(0,0,0,0.1)',
+   *   },
+   *   formatter: (value) => ({
+   *     'text-shadow': value,
+   *   }),
+   * });
    */
   function createUtilityPlugin(name, config) {
     const {
@@ -6996,17 +7659,17 @@ var tailwindToStyle = (function (exports) {
     });
   }
-  /**
-   * Create a variant plugin
-   *
-   * @param {string} name - Plugin name
-   * @param {Function} handler - Variant handler function
-   * @returns {Object} Plugin object
-   *
-   * @example
-   * const hoverParentPlugin = createVariantPlugin('hover-parent', (selector) => {
-   *   return `.parent:hover ${selector}`;
-   * });
+  /**
+   * Create a variant plugin
+   *
+   * @param {string} name - Plugin name
+   * @param {Function} handler - Variant handler function
+   * @returns {Object} Plugin object
+   *
+   * @example
+   * const hoverParentPlugin = createVariantPlugin('hover-parent', (selector) => {
+   *   return `.parent:hover ${selector}`;
+   * });
    */
   function createVariantPlugin(name, handler) {
     if (!handler || typeof handler !== "function") {
@@ -7020,11 +7683,11 @@ var tailwindToStyle = (function (exports) {
     });
   }
-  /**
-   * Convert plugin utilities to lookup object
-   * @param {Object} plugin - Plugin object
-   * @param {string} [prefix] - Optional prefix for all classes
-   * @returns {Object} Lookup object
+  /**
+   * Convert plugin utilities to lookup object
+   * @param {Object} plugin - Plugin object
+   * @param {string} [prefix] - Optional prefix for all classes
+   * @returns {Object} Lookup object
    */
   function pluginToLookup(plugin) {
     let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
@@ -7143,88 +7806,427 @@ var tailwindToStyle = (function (exports) {
     ...fontFamily
   };
+  /**
+   * Web Animations API Integration
+   * Dynamic animations without keyframes injection
+   */
+  /* eslint-disable no-undef */
+  /**
+   * Built-in animation definitions using Web Animations API
+   */
+  const BUILTIN_ANIMATIONS = {
+    spin: {
+      keyframes: [{
+        transform: "rotate(0deg)"
+      }, {
+        transform: "rotate(360deg)"
+      }],
+      options: {
+        duration: 1000,
+        iterations: Infinity
+      }
+    },
+    ping: {
+      keyframes: [{
+        transform: "scale(1)",
+        opacity: 1
+      }, {
+        transform: "scale(2)",
+        opacity: 0
+      }],
+      options: {
+        duration: 1000,
+        iterations: Infinity
+      }
+    },
+    pulse: {
+      keyframes: [{
+        opacity: 1
+      }, {
+        opacity: 0.5
+      }, {
+        opacity: 1
+      }],
+      options: {
+        duration: 2000,
+        iterations: Infinity
+      }
+    },
+    bounce: {
+      keyframes: [{
+        transform: "translateY(0)",
+        animationTimingFunction: "cubic-bezier(0.8,0,1,1)"
+      }, {
+        transform: "translateY(-25%)",
+        animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
+      }, {
+        transform: "translateY(0)",
+        animationTimingFunction: "cubic-bezier(0.8,0,1,1)"
+      }],
+      options: {
+        duration: 1000,
+        iterations: Infinity
+      }
+    },
+    "fade-in": {
+      keyframes: [{
+        opacity: 0
+      }, {
+        opacity: 1
+      }],
+      options: {
+        duration: 500,
+        fill: "forwards"
+      }
+    },
+    "slide-up": {
+      keyframes: [{
+        transform: "translateY(20px)",
+        opacity: 0
+      }, {
+        transform: "translateY(0)",
+        opacity: 1
+      }],
+      options: {
+        duration: 500,
+        fill: "forwards"
+      }
+    }
+  };
+  /**
+   * Apply animation using Web Animations API
+   */
+  function applyWebAnimation(element, animationName) {
+    let customAnimations = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    if (!element || typeof element.animate !== "function") return null;
+    const animation = BUILTIN_ANIMATIONS[animationName] || customAnimations[animationName];
+    if (!animation) return null;
+    return element.animate(animation.keyframes, animation.options);
+  }
+  /**
+   * Create animation observer for elements with animation classes
+   */
+  function createAnimationObserver() {
+    let customAnimations = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    if (typeof MutationObserver === "undefined") return null;
+    const observer = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        mutation.addedNodes.forEach(node => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            processAnimationElements(node, customAnimations);
+          }
+        });
+        if (mutation.type === "attributes" && mutation.attributeName === "class") {
+          processAnimationElements(mutation.target, customAnimations);
+        }
+      });
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    return observer;
+  }
+  /**
+   * Process elements for animation classes
+   */
+  function processAnimationElements(element) {
+    let customAnimations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (!element.classList) return;
+    const animationClasses = Array.from(element.classList).filter(cls => cls.startsWith("animate-")).map(cls => cls.replace("animate-", ""));
+    animationClasses.forEach(animationName => {
+      applyWebAnimation(element, animationName, customAnimations);
+    });
+  }
+  /**
+   * Initialize web animations for existing elements
+   */
+  function initWebAnimations() {
+    let customAnimations = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    if (typeof document === "undefined") return;
+    // Process existing elements
+    const animatedElements = document.querySelectorAll('[class*="animate-"]');
+    animatedElements.forEach(element => {
+      processAnimationElements(element, customAnimations);
+    });
+    // Create observer for new elements
+    return createAnimationObserver(customAnimations);
+  }
+  /**
+   * Dynamic Animation System
+   * Uses CSS variables for dynamic keyframe generation
+   */
+  /* eslint-disable no-undef */
+  let animationStyleElement = null;
+  let animationCounter = 0;
+  /**
+   * Initialize dynamic animation style element
+   */
+  function initAnimationStyleElement() {
+    if (typeof document === "undefined") return null;
+    if (!animationStyleElement) {
+      animationStyleElement = document.createElement("style");
+      animationStyleElement.id = "twsx-dynamic-animations";
+      animationStyleElement.setAttribute("data-twsx", "dynamic-animations");
+      document.head.appendChild(animationStyleElement);
+    }
+    return animationStyleElement;
+  }
+  /**
+   * Generate dynamic keyframe with CSS variables
+   */
+  function generateDynamicKeyframe(name, keyframeObj) {
+    let variables = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    let css = `@keyframes ${name} {\n`;
+    for (const [percentage, styles] of Object.entries(keyframeObj)) {
+      css += `  ${percentage} {\n`;
+      if (typeof styles === "object") {
+        for (const [prop, value] of Object.entries(styles)) {
+          const cssProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+          // Replace variables in value
+          let finalValue = value;
+          for (const [varName, varValue] of Object.entries(variables)) {
+            finalValue = finalValue.replace(new RegExp(`\\$\\{${varName}\\}`, "g"), varValue);
+          }
+          css += `    ${cssProp}: ${finalValue};\n`;
+        }
+      }
+      css += "  }\n";
+    }
+    css += "}\n";
+    return css;
+  }
+  /**
+   * Create dynamic animation with parameters
+   */
+  function createDynamicAnimation(baseKeyframes) {
+    let parameters = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const animationId = `dynamic-anim-${++animationCounter}`;
+    const styleElement = initAnimationStyleElement();
+    if (!styleElement) return null;
+    // Generate keyframes with parameters
+    const keyframeCSS = generateDynamicKeyframe(animationId, baseKeyframes, parameters);
+    styleElement.textContent += keyframeCSS;
+    return animationId;
+  }
+  /**
+   * Predefined dynamic animation templates
+   */
+  const DYNAMIC_TEMPLATES = {
+    slideIn: {
+      keyframes: {
+        "0%": {
+          transform: "translate${direction}(${distance})",
+          opacity: "${startOpacity}"
+        },
+        "100%": {
+          transform: "translate${direction}(0)",
+          opacity: "${endOpacity}"
+        }
+      },
+      defaults: {
+        direction: "Y",
+        distance: "20px",
+        startOpacity: "0",
+        endOpacity: "1"
+      }
+    },
+    scale: {
+      keyframes: {
+        "0%": {
+          transform: "scale(${startScale})",
+          opacity: "${startOpacity}"
+        },
+        "100%": {
+          transform: "scale(${endScale})",
+          opacity: "${endOpacity}"
+        }
+      },
+      defaults: {
+        startScale: "0.8",
+        endScale: "1",
+        startOpacity: "0",
+        endOpacity: "1"
+      }
+    },
+    rotate: {
+      keyframes: {
+        "0%": {
+          transform: "rotate(${startAngle})"
+        },
+        "100%": {
+          transform: "rotate(${endAngle})"
+        }
+      },
+      defaults: {
+        startAngle: "0deg",
+        endAngle: "360deg"
+      }
+    },
+    colorShift: {
+      keyframes: {
+        "0%": {
+          backgroundColor: "${startColor}",
+          color: "${startTextColor}"
+        },
+        "100%": {
+          backgroundColor: "${endColor}",
+          color: "${endTextColor}"
+        }
+      },
+      defaults: {
+        startColor: "transparent",
+        endColor: "#3b82f6",
+        startTextColor: "inherit",
+        endTextColor: "white"
+      }
+    }
+  };
+  /**
+   * Create animation from template
+   */
+  function createTemplateAnimation(templateName) {
+    let customParams = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const template = DYNAMIC_TEMPLATES[templateName];
+    if (!template) return null;
+    const params = {
+      ...template.defaults,
+      ...customParams
+    };
+    return createDynamicAnimation(template.keyframes, params);
+  }
+  /**
+   * Apply dynamic animation to element
+   */
+  function applyDynamicAnimation(element, templateName) {
+    let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    let duration = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 500;
+    if (!element) return null;
+    const animationName = createTemplateAnimation(templateName, params);
+    if (!animationName) return null;
+    element.style.animation = `${animationName} ${duration}ms ease-out forwards`;
+    return animationName;
+  }
   const plugins = {
-    accentColor: generator$2w,
-    accessibility: generator$2v,
-    alignContent: generator$2u,
-    alignItems: generator$2t,
-    alignSelf: generator$2s,
-    animation: generator$2r,
-    appearance: generator$2q,
-    aspect: generator$2p,
-    backgroundAttachment: generator$2o,
-    backgroundClip: generator$2n,
-    backgroundColor: generator$2m,
-    backgroundImage: generator$2l,
-    backgroundOpacity: generator$2k,
-    backgroundOrigin: generator$2j,
-    backgroundPosition: generator$2i,
-    backgroundRepeat: generator$2h,
-    backgroundSize: generator$2g,
-    blur: generator$2f,
-    borderCollapse: generator$2e,
-    borderColor: generator$2d,
-    borderOpacity: generator$2c,
-    borderRadius: generator$2b,
-    borderSpacing: generator$2a,
-    borderStyle: generator$29,
-    borderWidth: generator$28,
-    boxDecorationBreak: generator$27,
-    boxShadow: generator$26,
-    boxSizing: generator$25,
-    brightness: generator$24,
-    captionSide: generator$23,
-    caretColor: generator$22,
-    clear: generator$21,
-    content: generator$20,
-    contrast: generator$1$,
-    cursor: generator$1_,
-    display: generator$1Z,
-    divideColor: generator$1Y,
-    divideOpacity: generator$1X,
-    divideStyle: generator$1W,
-    divideWidth: generator$1V,
-    dropShadow: generator$1U,
-    fill: generator$1T,
-    filter: generator$1S,
-    flex: generator$1R,
-    flexBasis: generator$1Q,
-    flexDirection: generator$1P,
-    flexGrow: generator$1O,
-    flexShrink: generator$1N,
-    flexWrap: generator$1M,
-    float: generator$1L,
-    fontSize: generator$1K,
-    fontSmoothing: generator$1J,
-    fontStyle: generator$1I,
-    fontVariantNumeric: generator$1H,
-    fontWeight: generator$1G,
-    gap: generator$1F,
-    gradientColorStops: generator$1E,
-    grayscale: generator$1D,
-    gridAutoColumns: generator$1C,
-    gridAutoFlow: generator$1B,
-    gridAutoRows: generator$1A,
-    gridColumn: generator$1z,
-    gridColumnEnd: generator$1y,
-    gridColumnStart: generator$1x,
-    gridRow: generator$1w,
-    gridRowEnd: generator$1v,
-    gridRowStart: generator$1u,
-    gridTemplateColumns: generator$1t,
-    gridTemplateRows: generator$1s,
-    height: generator$1r,
-    hueRotate: generator$1q,
-    hyphens: generator$1p,
-    inset: generator$1o,
-    invert: generator$1n,
-    isolation: generator$1m,
-    justifyContent: generator$1l,
-    justifyItems: generator$1k,
-    justifySelf: generator$1j,
-    letterSpacing: generator$1i,
-    lineClamp: generator$1h,
-    lineHeight: generator$1g,
+    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,
+    fontSize: generator$1L,
+    fontSmoothing: generator$1K,
+    fontStyle: generator$1J,
+    fontVariantNumeric: generator$1I,
+    fontWeight: generator$1H,
+    gap: generator$1G,
+    gradientColorStops: generator$1F,
+    grayscale: generator$1E,
+    gridAutoColumns: generator$1D,
+    gridAutoFlow: generator$1C,
+    gridAutoRows: generator$1B,
+    gridColumn: generator$1A,
+    gridColumnEnd: generator$1z,
+    gridColumnStart: generator$1y,
+    gridRow: generator$1x,
+    gridRowEnd: generator$1w,
+    gridRowStart: generator$1v,
+    gridTemplateColumns: generator$1u,
+    gridTemplateRows: generator$1t,
+    height: generator$1s,
+    hueRotate: generator$1r,
+    hyphens: generator$1q,
+    inset: generator$1p,
+    invert: generator$1o,
+    isolation: generator$1n,
+    justifyContent: generator$1m,
+    justifyItems: generator$1l,
+    justifySelf: generator$1k,
+    letterSpacing: generator$1j,
+    lineClamp: generator$1i,
+    lineHeight: generator$1h,
+    listStyleImage: generator$1g,
     listStylePosition: generator$1f,
     listStyleType: generator$1e,
     margin: generator$1d,
@@ -7322,10 +8324,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 = {};
@@ -7355,19 +8357,40 @@ var tailwindToStyle = (function (exports) {
   // Cache for getConfigOptions - use LRU cache
   const configOptionsCache = new LRUCache(500);
   function generateTailwindCssString() {
+    var _options$theme, _userConfigData$theme;
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const pluginKeys = Object.keys(plugins);
+    // Merge user config with options
+    const userConfigData = getConfig();
+    const mergedOptions = {
+      ...options,
+      theme: {
+        ...options.theme,
+        ...userConfigData.theme,
+        extend: {
+          ...((_options$theme = options.theme) === null || _options$theme === void 0 ? void 0 : _options$theme.extend),
+          ...((_userConfigData$theme = userConfigData.theme) === null || _userConfigData$theme === void 0 ? void 0 : _userConfigData$theme.extend)
+        }
+      }
+    };
     // Use cache to prevent unnecessary reprocessing
-    const key = JSON.stringify(options);
+    // Include user config in cache key to ensure cache invalidation
+    const key = JSON.stringify({
+      options: mergedOptions,
+      userConfigHash: JSON.stringify(userConfigData)
+    });
     if (!configOptionsCache.has(key)) {
-      configOptionsCache.set(key, getConfigOptions(options, pluginKeys));
+      const configOptions = getConfigOptions(mergedOptions, pluginKeys);
+      configOptionsCache.set(key, configOptions);
     }
     const configOptions = configOptionsCache.get(key);
     const {
       corePlugins = {}
     } = configOptions;
     const corePluginKeys = Object.keys(corePlugins);
-    let cssString = ``;
+    let cssString = "";
     Object.keys(plugins).forEach(key => {
       if (corePluginKeys.indexOf(key) >= 0 && !corePlugins[key]) {
         cssString += "";
@@ -7416,10 +8439,10 @@ var tailwindToStyle = (function (exports) {
     dark: (state, sel) => `.dark ${sel}`
   };
   const selectorVariants = {
-    first: () => `> :first-child`,
-    last: () => `> :last-child`,
-    odd: () => `> :nth-child(odd)`,
-    even: () => `> :nth-child(even)`,
+    first: () => "> :first-child",
+    last: () => "> :last-child",
+    odd: () => "> :nth-child(odd)",
+    even: () => "> :nth-child(even)",
     not: arg => `> :not(${arg})`,
     number: arg => `> :nth-child(${arg})`
   };
@@ -7506,7 +8529,10 @@ var tailwindToStyle = (function (exports) {
       }
       const context = this;
       callCount++;
+      // eslint-disable-next-line no-undef
       clearTimeout(timeout);
+      // eslint-disable-next-line no-undef
       timeout = setTimeout(() => {
         const marker = performanceMonitor.start(`debounced:${func.name || "anonymous"}`);
         try {
@@ -7595,11 +8621,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+)$/);
@@ -7660,11 +8686,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");
@@ -8103,17 +9129,17 @@ var tailwindToStyle = (function (exports) {
       for (const subSel in content) {
         cssString += `${subSel}{${content[subSel].trim().replace(/\n/g, "")}}`;
       }
-      cssString += `}`;
+      cssString += "}";
     }
     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] : {};
@@ -8167,9 +9193,9 @@ var tailwindToStyle = (function (exports) {
       // Process each selector
       const processMarker = performanceMonitor.start("twsx:process");
       for (const selector in flattered) {
-        let val = flattered[selector];
+        const val = flattered[selector];
         let baseClass = "";
-        let nested = {};
+        const nested = {};
         if (typeof val === "string") {
           // Check if this is a @css property value - if so, don't process through expandGroupedClass
           if (selector.includes(" @css ")) {
@@ -8258,19 +9284,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
@@ -8306,11 +9332,20 @@ var tailwindToStyle = (function (exports) {
     }
   };
+  exports.DYNAMIC_TEMPLATES = DYNAMIC_TEMPLATES;
+  exports.INLINE_ANIMATIONS = INLINE_ANIMATIONS;
   exports.LRUCache = LRUCache;
   exports.Logger = Logger;
   exports.TwsError = TwsError;
+  exports.animateElement = animateElement;
+  exports.applyDynamicAnimation = applyDynamicAnimation;
+  exports.applyInlineAnimation = applyInlineAnimation;
+  exports.applyWebAnimation = applyWebAnimation;
+  exports.chainAnimations = chainAnimations;
   exports.configure = configure;
+  exports.createDynamicAnimation = createDynamicAnimation;
   exports.createPlugin = createPlugin;
+  exports.createTemplateAnimation = createTemplateAnimation;
   exports.createUtilityPlugin = createUtilityPlugin;
   exports.createVariantPlugin = createVariantPlugin;
   exports.debouncedTws = debouncedTws;
@@ -8318,11 +9353,13 @@ var tailwindToStyle = (function (exports) {
   exports.getConfig = getConfig;
   exports.getTailwindCache = getTailwindCache;
   exports.handleError = handleError;
+  exports.initWebAnimations = initWebAnimations;
   exports.logger = logger;
   exports.onError = onError;
   exports.performanceUtils = performanceUtils;
   exports.resetConfig = resetConfig;
   exports.resetTailwindCache = resetTailwindCache;
+  exports.staggerAnimations = staggerAnimations;
   exports.tws = tws;
   exports.twsx = twsx;