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

package/dist/index.esm.js

@@ -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
@@ -1591,9 +1591,9 @@ const configOptions = {
   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() {
@@ -1602,44 +1602,44 @@ class TailwindCache {
     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;
@@ -1651,9 +1651,9 @@ class TailwindCache {
 // 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) {
@@ -1662,8 +1662,8 @@ function getTailwindCache() {
   return instance;
 }
 
-/**
- * Reset the TailwindCache singleton (for testing)
+/**
+ * Reset the TailwindCache singleton (for testing)
  */
 function resetTailwindCache() {
   if (instance) {
@@ -1673,13 +1673,13 @@ function resetTailwindCache() {
 }
 
 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,
@@ -1690,9 +1690,9 @@ class Logger {
     };
   }
 
-  /**
-   * 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) {
@@ -1700,25 +1700,25 @@ class Logger {
     }
   }
 
-  /**
-   * 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];
       }
@@ -1726,11 +1726,11 @@ class Logger {
     }
   }
 
-  /**
-   * 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];
       }
@@ -1738,11 +1738,11 @@ class Logger {
     }
   }
 
-  /**
-   * 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];
       }
@@ -1750,11 +1750,11 @@ class Logger {
     }
   }
 
-  /**
-   * 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];
       }
@@ -1764,16 +1764,16 @@ class Logger {
 }
 
 // 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: {
@@ -1784,11 +1784,11 @@ let userConfig = {
   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 = {
@@ -1804,31 +1804,31 @@ function deepMerge(target, source) {
   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] : {};
@@ -1882,9 +1882,9 @@ function configure() {
   }
 }
 
-/**
- * Get current user configuration
- * @returns {Object} Current configuration
+/**
+ * Get current user configuration
+ * @returns {Object} Current configuration
  */
 function getConfig() {
   return {
@@ -1892,8 +1892,8 @@ function getConfig() {
   };
 }
 
-/**
- * Reset configuration to defaults
+/**
+ * Reset configuration to defaults
  */
 function resetConfig() {
   userConfig = {
@@ -1908,26 +1908,26 @@ function resetConfig() {
   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;
@@ -1975,6 +1975,19 @@ function getConfigOptions() {
     }
   });
 
+  // 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 || "";
@@ -2045,7 +2058,7 @@ function generateCssString$1() {
   return cssString;
 }
 
-function generator$2w() {
+function generator$2M() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2084,7 +2097,7 @@ function generator$2w() {
   return responsiveCssString;
 }
 
-function generator$2v() {
+function generator$2L() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix
@@ -2123,7 +2136,7 @@ function generator$2v() {
   return responsiveCssString;
 }
 
-function generator$2u() {
+function generator$2K() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -2151,7 +2164,7 @@ function generator$2u() {
   return responsiveCssString;
 }
 
-function generator$2t() {
+function generator$2J() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -2178,7 +2191,7 @@ function generator$2t() {
   return responsiveCssString;
 }
 
-function generator$2s() {
+function generator$2I() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -2205,14 +2218,224 @@ function generator$2s() {
   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,
@@ -2226,7 +2449,51 @@ function generator$2r() {
     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};
@@ -2238,7 +2505,7 @@ function generator$2r() {
   return responsiveCssString;
 }
 
-function generator$2q() {
+function generator$2G() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix
@@ -2258,7 +2525,7 @@ function generator$2q() {
   return responsiveCssString;
 }
 
-function generator$2p() {
+function generator$2F() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2287,7 +2554,7 @@ function generator$2p() {
   return responsiveCssString;
 }
 
-function generator$2o() {
+function generator$2E() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -2308,7 +2575,7 @@ function generator$2o() {
   return responsiveCssString;
 }
 
-function generator$2n() {
+function generator$2D() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -2335,7 +2602,7 @@ function generator$2n() {
   return responsiveCssString;
 }
 
-function generator$2m() {
+function generator$2C() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2375,7 +2642,7 @@ function generator$2m() {
   return responsiveCssString;
 }
 
-function generator$2l() {
+function generator$2B() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2409,7 +2676,7 @@ function generator$2l() {
   return responsiveCssString;
 }
 
-function generator$2k() {
+function generator$2A() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2433,7 +2700,7 @@ function generator$2k() {
   return responsiveCssString;
 }
 
-function generator$2j() {
+function generator$2z() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -2459,7 +2726,7 @@ function generator$2j() {
   return responsiveCssString;
 }
 
-function generator$2i() {
+function generator$2y() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2493,7 +2760,7 @@ function generator$2i() {
   return responsiveCssString;
 }
 
-function generator$2h() {
+function generator$2x() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -2521,7 +2788,7 @@ function generator$2h() {
   return responsiveCssString;
 }
 
-function generator$2g() {
+function generator$2w() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2555,7 +2822,288 @@ function generator$2g() {
   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,
@@ -2589,7 +3137,7 @@ function generator$2f() {
   return responsiveCssString;
 }
 
-function generator$2e() {
+function generator$2k() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -2610,7 +3158,7 @@ function generator$2e() {
   return responsiveCssString;
 }
 
-function generator$2d() {
+function generator$2j() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2698,7 +3246,7 @@ function generator$2d() {
   return responsiveCssString;
 }
 
-function generator$2c() {
+function generator$2i() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2722,7 +3270,7 @@ function generator$2c() {
   return responsiveCssString;
 }
 
-function generator$2b() {
+function generator$2h() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2797,7 +3345,7 @@ function generator$2b() {
   return responsiveCssString;
 }
 
-function generator$2a() {
+function generator$2g() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2832,7 +3380,7 @@ function generator$2a() {
   return responsiveCssString;
 }
 
-function generator$29() {
+function generator$2f() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -2853,7 +3401,7 @@ function generator$29() {
   return responsiveCssString;
 }
 
-function generator$28() {
+function generator$2e() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2918,7 +3466,7 @@ function generator$28() {
   return responsiveCssString;
 }
 
-function generator$27() {
+function generator$2d() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -2940,7 +3488,7 @@ function generator$27() {
   return responsiveCssString;
 }
 
-function generator$26() {
+function generator$2c() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -2994,7 +3542,7 @@ function generator$26() {
   return responsiveCssString;
 }
 
-function generator$25() {
+function generator$2b() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -3018,7 +3566,67 @@ function generator$25() {
   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,
@@ -3052,7 +3660,7 @@ function generator$24() {
   return responsiveCssString;
 }
 
-function generator$23() {
+function generator$26() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -3073,7 +3681,7 @@ function generator$23() {
   return responsiveCssString;
 }
 
-function generator$22() {
+function generator$25() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3112,7 +3720,7 @@ function generator$22() {
   return responsiveCssString;
 }
 
-function generator$21() {
+function generator$24() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -3133,7 +3741,46 @@ function generator$21() {
   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,
@@ -3157,7 +3804,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,
@@ -3191,7 +3838,7 @@ function generator$1$() {
   return responsiveCssString;
 }
 
-function generator$1_() {
+function generator$1$() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -3212,7 +3859,7 @@ function generator$1_() {
   return responsiveCssString;
 }
 
-function generator$1Z() {
+function generator$1_() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix
@@ -3232,7 +3879,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,
@@ -3263,7 +3910,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,
@@ -3287,7 +3934,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
@@ -3308,7 +3955,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,
@@ -3356,7 +4003,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,
@@ -3384,7 +4031,7 @@ function generator$1U() {
   return responsiveCssString;
 }
 
-function generator$1T() {
+function generator$1U() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3410,7 +4057,7 @@ function generator$1T() {
   return responsiveCssString;
 }
 
-function generator$1S(_ref) {
+function generator$1T(_ref) {
   let {
     prefix
   } = _ref;
@@ -3423,7 +4070,7 @@ function generator$1S(_ref) {
 `;
 }
 
-function generator$1R() {
+function generator$1S() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3447,7 +4094,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,
@@ -3471,7 +4118,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
@@ -3497,7 +4144,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,
@@ -3521,7 +4168,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,
@@ -3545,7 +4192,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
@@ -3571,7 +4218,7 @@ function generator$1M() {
   return responsiveCssString;
 }
 
-function generator$1L() {
+function generator$1M() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -3592,7 +4239,7 @@ function generator$1L() {
   return responsiveCssString;
 }
 
-function generator$1K() {
+function generator$1L() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3626,7 +4273,7 @@ function generator$1K() {
   return responsiveCssString;
 }
 
-function generator$1J() {
+function generator$1K() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix
@@ -3646,7 +4293,7 @@ function generator$1J() {
   return responsiveCssString;
 }
 
-function generator$1I() {
+function generator$1J() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix
@@ -3669,7 +4316,7 @@ function generator$1I() {
   return responsiveCssString;
 }
 
-function generator$1H() {
+function generator$1I() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix
@@ -3699,7 +4346,7 @@ function generator$1H() {
   return responsiveCssString;
 }
 
-function generator$1G() {
+function generator$1H() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3733,7 +4380,7 @@ function generator$1G() {
   return responsiveCssString;
 }
 
-function generator$1F() {
+function generator$1G() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3763,7 +4410,7 @@ function generator$1F() {
   return responsiveCssString;
 }
 
-function generator$1E() {
+function generator$1F() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix,
@@ -3802,7 +4449,7 @@ function generator$1E() {
   return responsiveCssString;
 }
 
-function generator$1D() {
+function generator$1E() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3836,7 +4483,7 @@ function generator$1D() {
   return responsiveCssString;
 }
 
-function generator$1C() {
+function generator$1D() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3860,7 +4507,7 @@ function generator$1C() {
   return responsiveCssString;
 }
 
-function generator$1B() {
+function generator$1C() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -3886,7 +4533,7 @@ function generator$1B() {
   return responsiveCssString;
 }
 
-function generator$1A() {
+function generator$1B() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3910,7 +4557,7 @@ function generator$1A() {
   return responsiveCssString;
 }
 
-function generator$1z() {
+function generator$1A() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -3934,7 +4581,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,
@@ -3958,7 +4605,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,
@@ -3982,7 +4629,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,
@@ -4006,7 +4653,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,
@@ -4030,7 +4677,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,
@@ -4054,7 +4701,7 @@ function generator$1u() {
   return responsiveCssString;
 }
 
-function generator$1t() {
+function generator$1u() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -4078,7 +4725,7 @@ function generator$1t() {
   return responsiveCssString;
 }
 
-function generator$1s() {
+function generator$1t() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -4102,7 +4749,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,
@@ -4126,7 +4773,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,
@@ -4164,7 +4811,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
@@ -4186,7 +4833,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,
@@ -4244,7 +4891,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,
@@ -4278,7 +4925,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
@@ -4302,7 +4949,7 @@ function generator$1m() {
   return responsiveCssString;
 }
 
-function generator$1l() {
+function generator$1m() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -4330,7 +4977,7 @@ function generator$1l() {
   return responsiveCssString;
 }
 
-function generator$1k() {
+function generator$1l() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -4351,7 +4998,7 @@ function generator$1k() {
   return responsiveCssString;
 }
 
-function generator$1j() {
+function generator$1k() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix
@@ -4372,7 +5019,7 @@ function generator$1j() {
   return responsiveCssString;
 }
 
-function generator$1i() {
+function generator$1j() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -4396,7 +5043,7 @@ function generator$1i() {
   return responsiveCssString;
 }
 
-function generator$1h() {
+function generator$1i() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -4423,7 +5070,7 @@ function generator$1h() {
   return responsiveCssString;
 }
 
-function generator$1g() {
+function generator$1h() {
   let configOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix: globalPrefix,
@@ -4447,6 +5094,22 @@ function generator$1g() {
   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 {
@@ -6403,9 +7066,9 @@ function generator$d() {
   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] : {};
@@ -6433,9 +7096,9 @@ function generator$c() {
   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] : {};
@@ -6463,9 +7126,9 @@ function generator$b() {
   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] : {};
@@ -6504,9 +7167,9 @@ function generator$a() {
   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] : {};
@@ -6775,9 +7438,9 @@ function generator() {
   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() {
@@ -6786,9 +7449,9 @@ class LRUCache {
     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)) {
@@ -6801,9 +7464,9 @@ class LRUCache {
     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
@@ -6817,61 +7480,61 @@ class LRUCache {
     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);
 
@@ -6879,10 +7542,10 @@ function onError(handler) {
   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] : {};
@@ -6896,41 +7559,41 @@ function handleError(error) {
     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") {
@@ -6950,28 +7613,28 @@ function createPlugin(name, definition) {
   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 {
@@ -6993,17 +7656,17 @@ function createUtilityPlugin(name, config) {
   });
 }
 
-/**
- * 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") {
@@ -7017,11 +7680,11 @@ function createVariantPlugin(name, handler) {
   });
 }
 
-/**
- * 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] : "";
@@ -7140,88 +7803,427 @@ const patterns = {
   ...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,
@@ -7319,10 +8321,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 = {};
@@ -7352,19 +8354,40 @@ function resolveCssToClearCss(cssString) {
 // 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 += "";
@@ -7413,10 +8436,10 @@ const specialVariants = {
   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})`
 };
@@ -7503,7 +8526,10 @@ function debounce(func) {
     }
     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 {
@@ -7592,11 +8618,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+)$/);
@@ -7657,11 +8683,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");
@@ -8100,17 +9126,17 @@ function generateCssString(styles) {
     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] : {};
@@ -8164,9 +9190,9 @@ function twsx(obj) {
     // 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 ")) {
@@ -8255,19 +9281,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
 
@@ -8303,4 +9329,4 @@ const performanceUtils = {
   }
 };
 
-export { LRUCache, Logger, TwsError, configure, createPlugin, createUtilityPlugin, createVariantPlugin, debouncedTws, debouncedTwsx, getConfig, getTailwindCache, handleError, logger, onError, performanceUtils, resetConfig, resetTailwindCache, tws, twsx };
+export { DYNAMIC_TEMPLATES, INLINE_ANIMATIONS, LRUCache, Logger, TwsError, animateElement, applyDynamicAnimation, applyInlineAnimation, applyWebAnimation, chainAnimations, configure, createDynamicAnimation, createPlugin, createTemplateAnimation, createUtilityPlugin, createVariantPlugin, debouncedTws, debouncedTwsx, getConfig, getTailwindCache, handleError, initWebAnimations, logger, onError, performanceUtils, resetConfig, resetTailwindCache, staggerAnimations, tws, twsx };