Twigwind Version History

Version 4.2.6 May 14 2026

🐛 Bug Fixes

  • Fixed twColor() regex failing to match color names containing underscores (e.g., yellow_green, deep_sky, spring_green, forest_green, blue_violet, deep_pink)
  • Fixed resolveColor() regex inside twLinearGradient() with the same underscore matching issue
  • Both regexes used [a-zA-Z]+ which excluded underscores — updated to [a-zA-Z][a-zA-Z_]*

✨ Improvements

  • Color names with underscores now work correctly in bg-*, color-*, and gradient: utilities
  • Expanded color palette is now fully supported: yellow_green, spring_green, forest_green, deep_sky, blue_violet, deep_pink

Underscore Color Names Example

<!-- Background colors with underscore names -->
<div class="bg-yellow_green-5 color-white">Yellow green background</div>
<div class="bg-deep_sky-3 color-deep_sky-8">Deep sky blue shades</div>
<div class="bg-forest_green-4">Forest green</div>

<!-- Gradients with underscore color names -->
<div class="gradient:linear|to-r|deep_sky-2|spring_green-7">Sky to spring gradient</div>
<div class="gradient:linear|to-b|blue_violet-3|deep_pink-6">Violet to pink gradient</div>

Version 4.2.5 May 13 2026

🐛 Bug Fixes

  • Fixed ReferenceError in twigwind.config.js caused by typo: varibles → variables in module.exports
  • This typo caused the build process (build.cjs) to crash silently via process.exit(1) when loading configuration

✨ Improvements

  • Build process now completes successfully with corrected config exports

Version 4.0.5 May 12 2026

🚀 New Features

  • Added grey color family with 10 variants (grey-0 to grey-9)
  • Updated README with comprehensive features table covering all 21 utility categories
  • Created feature roadmap for future development planning

✨ Improvements

  • Improved color system consistency across browser and Node.js environments
  • Enhanced documentation with utility examples and configuration references
  • Refined twigwind.config.js with the new grey color palette

🐛 Bug Fixes

  • Fixed color configuration sync between src/css.js and twigwind.config.js
  • Resolved minor formatting issues in inline browser configuration

Grey Color Example

<!-- Grey color variants -->
<div class="bg-grey-1 color-grey-9">Dark grey background, light text</div>
<div class="bg-grey-8 color-grey-0">Light grey background, dark text</div>
<div class="bg-grey-5">Medium grey (default)</div>

Version 4.0.4 May 11 2026

🚀 Improvements

  • Refactored utility matching to use rule tables instead of if/else/elif chains for better performance and maintainability
  • Fixed build.cjs to use process.cwd() as its root directory for proper global npm usage
  • Fix typography handling and config updates for font_sizes and display maps

🐛 Bug Fixes

  • Fixed ReferenceError: Cannot access '{x}' before initialization caused by rules array referencing functions before they were defined
  • Updated version tracking across package.json and version.txt

Version 4.0.3 February 26 2026

🚀 New Features

  • Added support for display utilities — block, inline, hidden, inline-block, inline-flex, inline-grid

🐛 Bug Fixes

  • Fixed all remaining Twigwind bugs from the 4.0 release
  • Updated README with installation instructions for CDN and npm

Display Utilities Example

<div class="block">Block element</div>
<span class="inline-block">Inline block</span>
<div class="hidden">Hidden element</div>
<div class="inline-flex">Inline flex container</div>

Version 4.0.2 February 25 2026

🚀 New Features

  • Added focus state support — use the focus: prefix for focus styles (e.g., focus:border-blue, focus:shadow-md)
  • Refactored extension.js and css.js to support extensibility through the extension system

✨ Improvements

  • Cleared default components in twigwind.config.js for clean user configuration
  • Removed unused src/css.css file — CSS is now fully generated at runtime

Focus State Example

<input class="border-2 focus:border-blue focus:shadow-md p-10" placeholder="Click me" />
<button class="bg-blue focus:bg-dodger p-10 color-white">Focus me</button>

Version 4.0.1 February 19 2026

🚀 New Features

  • Added basic support for the extension system via extension.js

✨ Improvements

  • Updated .gitignore to exclude test distribution files
  • Removed test-dist directory from version control
  • Cleaned up project structure for npm publishing

Version 4.0.0 January 16 2026

🚀 Major Features

  • Revised the core framework for improved performance and scalability
  • Introduced new configuration system for extending functionality
  • Enhanced build process with support for modern JavaScript features

✨ Improvements

  • Optimized CSS
  • Refined color system with additional variants
  • Reviewed fixed all bugs

🐛 Bug Fixes

  • Fixed `pushcss()` function bug
  • Fixed build process issues
  • Resolved CSS generation issues
  • Improved error handling and logging

Version 3.5.1 December 23 2025

🐛 Bug Fixes

  • Fixed animation keyframe generation issue
  • Resolved layout utility conflicts with existing classes
  • Improved responsive design handling for custom breakpoints

✨ Improvements

  • Enhanced animation performance with optimized keyframe handling
  • Improved layout utility documentation with additional examples
  • Refined responsive design features for better mobile compatibility

🚀 New Features

  • Added new animation presets for common effects (fade, slide, bounce)
  • Introduced layout utilities for CSS Grid areas and named lines
  • Implemented config files for better configuration management

Version 3.5.0 December 21 2025

🚀 New Features

  • Introduced advanced animation utilities with keyframe support
  • Added new layout utilities for CSS Grid and Flexbox enhancements
  • Implemented responsive design features with custom breakpoints
  • Error support for invalid twigwind values

Version 3.4.10 December 20 2025

🐛 Bug Fixes

  • Fixed gradient color variant parsing issue
  • Fixed filter issues
  • Fixed various bugs in <twigwind> tags
  • Resolved CSS variable scoping bug in <twigwind> tags

Version 3.4.9 December 5 2025

🐛 Bug Fixes

  • Fixed gradient color variant parsing issue
  • Fixed filter issues
  • Fixed various bugs in <twigwind> tags

Version 3.4.8 December 4 2025

🐛 Bug Fixes

  • Fixed gradient color variant parsing issue
  • Resolved CSS variable scoping bug in <twigwind> tags

🚀 New Features

  • Added support for custom color variants in gradients (e.g., gradient-to-r-red-3-blue-6)
  • Now supports filters for shadows, backdrop and regular

✨ Improvements

  • Improved documentation with additional examples for the RGB array color system

Filters

<!-- Basic filter syntax -->
<div class="filter:blur-5px">Blurred element</div>
<div class="filter:brightness-150">Bright element</div>
<div class="filter:grayscale-100">Grayscale element</div>

<!-- Background filters -->
<div class="bg-filter:blur-10px">Background blur</div>
<div class="backdrop-filter:blur-20px">Backdrop blur</div>

Version 3.4.7 December 2 2025

🚀 Major Features

  • RGB Array Color System - Revolutionary new color system with 10 variants per color family (red-0 to red-9)
  • Advanced Gradient System - Enhanced gradients supporting numbered color variants (gradient-to-r-red-2-blue-7)
  • CSS Variables Support - Full CSS variables integration with @varname syntax in <twigwind> tags
  • Predefined CSS Integration - Seamless integration with predefined CSS utilities from src/css.css
  • Enhanced Build System - Improved build system with better path resolution and global npm support

🎨 Color System Overhaul

  • 11 Color Families - red, orange, yellow, lime, green, spring, cyan, blue, indigo, violet, grey
  • 10 Variants Each - Each color family provides variants 0-9 from darkest to lightest
  • Smart Defaults - Using just color name (e.g., 'red') defaults to variant 5 (middle value)
  • Precise Control - Use specific variants like red-3 for dark red or red-8 for light red
  • Gradient Integration - Mix different variants in gradients for smooth color transitions

✨ Framework Improvements

  • Enhanced Documentation - Complete rewrite of color documentation with live examples
  • Better Error Handling - Improved debugging with comprehensive console logging
  • Performance Optimization - Faster CSS generation and reduced memory usage
  • Dark Theme Integration - Seamless dark/sleek styling with predefined utilities

🔧 Technical Changes

  • Refactored twColor() function to support RGB array system
  • Enhanced twLinearGradient() function for numbered color variants
  • Fixed CSS variables parsing in TagHandler() function
  • Improved formatColor() function for RGB array conversion
  • Updated build system with proper CommonJS compatibility

New Color System Example

<!-- Basic color usage -->
<div class="bg-red color-white">Default red (red-5)</div>
<div class="bg-red-2 color-red-8">Dark red with light text</div>

<!-- Advanced gradients -->
<div class="gradient-to-r-blue-1-cyan-7">Blue to cyan gradient</div>

<!-- CSS Variables -->
<twigwind>
  @primary: { #3b82f6 }
  @secondary: { #10b981 }
</twigwind>

Version 3.3.7 November 16 2025

🚀 New Features

  • Improved CLI error handling
  • Better documentation for new features
  • Better twigwind CLI integration
  • Improved performance for large projects
  • Twigwind's object model feature added

Version 3.3.6 November 14 2025

🚀 New Features

  • Added CSS compression utilities
  • Improved CLI error handling
  • Better documentation for new features
  • Better twigwind CLI integration

Version 3.3.5 November 10 2025

🐛 Bug Fixes

  • Fixed the CLI Errors
  • Improved error messages for missing files
  • Resolved build process issues on MacOS
  • Fixed CSS generation for the twigwind tag manager
  • supports CSS compression utilities

Version 3.3.4 November 9 2025

🚀 New Features

  • CSS Shortcuts System - Revolutionary new way to define reusable components using CSS-like syntax in <twigwind> tags
  • Enhanced Dark Mode - Complete dark mode implementation with dark: prefixes for all utilities
  • Advanced Position Utilities - Added fixed, absolute, relative, sticky, and z-index utilities
  • Animation Framework - Built-in animations with animate- prefix and custom keyframes
  • Typography System - Enhanced text utilities with text-center, font-weight, and size controls

✨ Improvements

  • Performance Optimization - Faster CSS generation and reduced bundle size
  • Better Error Handling - Improved error messages and debugging capabilities
  • Enhanced Documentation - Complete rewrite of documentation with interactive examples
  • Responsive Design - Better mobile support and responsive utilities

🔧 Technical Changes

  • Refactored TagHandler() function for better CSS shortcuts parsing
  • Added applyUtilityClass() function for centralized utility processing
  • Improved parsePrefix() function to handle complex selectors
  • Enhanced pushCSS() function with better selector generation

📚 Documentation Updates

  • Added comprehensive CSS Shortcuts guide
  • Updated Dark Mode documentation with examples
  • Created Typography documentation page
  • Enhanced Build System documentation
  • Added Runtime Management guide

🐛 Bug Fixes

  • Fixed CSS shortcuts parsing for complex selectors
  • Resolved dark mode toggle functionality
  • Fixed utility class generation edge cases
  • Corrected responsive breakpoint handling

CSS Shortcuts Example

<twigwind>
  card: {
    bg-white; dark:bg-gray;
    shadow-lg; border-radius-12;
    p-24; hover:transform-scale-102;
    transition-all-300ms;
  }
</twigwind>

<div class="card">Beautiful component!</div>