Twigwind Version History

Version 3.4.7 December 2 2024

🚀 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 2024

🚀 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 2024

🚀 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 2024

🐛 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 2024

🚀 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>