tailwindcss_build 0.4.2

A comprehensive Flutter package that brings the power and convenience of Tailwind CSS utility classes to Flutter development.

[2025-09-29] - Version 0.4.2 - Perfect Static Analysis & Pub.dev Score

🏆 Pub.dev Score Optimization

• 🚀 Perfect Static Analysis: Achieved 0 static analysis issues (down from 145) for maximum pub.dev scoring
• 📦 Complete Platform Support: Added explicit support for all 6 platforms (Android, iOS, Web, Windows, macOS, Linux)
• ⚡ Performance Excellence: Optimized all constructor calls with const keywords for better runtime performance
• 🎯 Quality Score: Significantly improved pub.dev package scoring from previous release

🔧 Code Quality Enhancements

• ✅ Zero Linting Issues: Fixed all prefer_const_constructors warnings across the entire codebase
• 🧹 Example Code Polish: Enhanced all demo files to meet highest coding standards
• 📊 Deprecated API Cleanup: Replaced all deprecated method calls (asTextBuilder → asText)
• 🔨 Type Safety: Improved type consistency in Color and Offset constructors

📈 Development Quality

• 🤖 Systematic Fixes: Applied file-by-file improvements for better maintainability
• 📝 Documentation Standards: Ensured all example code follows best practices
• 🌐 Web Compatibility: Full web platform support for modern Flutter development

[2025-09-29] - Version 0.4.1 - Package Quality & Platform Support

🔧 Code Quality Enhancements

• 🚀 Massive Static Analysis Improvements: Fixed over 3500 static analysis issues to improve pub.dev scoring
• 📦 Web Platform Support: Added explicit web platform support in pubspec.yaml
• ⚡ Performance Optimizations: Added 2842+ const keywords to constructor invocations for better performance
• 🧹 Code Cleanup: Automated cleanup of unnecessary const keywords and other linting issues
• 📊 Pub.dev Score Improvement: Significantly improved package scoring from previous issues
• ✅ Zero Static Analysis Issues: Achieved perfect static analysis score with 0 issues (down from 145)
• 🔧 Example Code Quality: Fixed all const constructor issues in demo files for better pub.dev scoring

🌐 Platform Support

• ✅ Web Compatibility: Package now explicitly supports web platform alongside mobile and desktop
• 📱 Complete Platform Coverage: Support for Android, iOS, Web, Windows, macOS, Linux

🔨 Development Tools

• 🤖 Automated Fixes: Created and used automated scripts to batch-fix common code quality issues
• 📈 Quality Metrics: Reduced static analysis issues from 3000+ to under 2200

[2025-09-28] - Version 0.4.0 - Builder Pattern Architecture & Complete Color System

🏗️ Architecture Revolution

• 🚀 Builder Pattern Implementation: Complete rewrite to builder pattern architecture for improved performance and chainability
• 🎯 ContainerBuilder: New centralized container builder collecting all styling properties and building a single Container at the end
• 📝 TextBuilder: New text builder for chainable text styling with comprehensive TailwindCSS support
• 🔄 FlexBuilder: New flex layout builder separating layout concerns from visual styling
• ⚡ Performance Optimization: Eliminated multiple Container nesting, dramatically improving widget tree efficiency

🎨 Complete Color System Integration

• 🌈 TwColors Integration: All background and border colors now use the complete TailwindCSS color system from colors.dart
• 📊 All Color Palettes: Support for Gray, Slate, Zinc, Neutral, Stone, Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink, Rose color families
• 🎯 Complete Color Ranges: Each color family includes 50-950 variants (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950)
• 🔧 Consistent API: Background colors (bgBlue600()) and border colors (borderRed300()) using standardized TwColors

✨ New Builder Pattern API

// New Container Builder Pattern
Text('Hello World')
    .asText()
    .textWhite()
    .fontBold()
    .build()
    .asContainer()
    .px6()
    .py3()
    .bgBlue600()
    .r8()
    .shadow()
    .build()

// New Flex Builder Pattern
[
  Text('Item 1').build(),
  Text('Item 2').build(),
  Text('Item 3').build(),
].asFlex()
    .flexRow()
    .justifyCenter()
    .itemsCenter()
    .asContainer()
    .bgGray100()
    .p4()
    .r8()
    .build()

// Chainable Interactions
Text('Button')
    .asText()
    .textWhite()
    .fontMedium()
    .build()
    .asContainer()
    .px6()
    .py3()
    .bgBlue600()
    .r8()
    .shadow()
    .onTap(() => print('Clicked!'))

🔧 Breaking Changes & Migration

• ⚠️ API Changes: Old asContainer() method deprecated, use new builder pattern
• 🔄 Method Renaming: asTextBuilder() → asText(), asContainerBuilder() → asContainer()
• 📦 Import Changes: Some conflicting extensions disabled to prioritize builder pattern
• 🆕 Height/Width: h() and w() methods now integrated directly into ContainerBuilder

📱 Enhanced Demo Application

• 🎯 Simplified Demos: Clean, focused demos for Text, Container, Flex, and Button builders
• 🖥️ BottomNavigationBar: New tabbed interface for better demo navigation
• 📚 Documentation: Each demo showcases best practices and builder pattern usage
• 🎨 Real Examples: Practical examples showing builder combinations and interactions

🎯 Border System Enhancement

• 📐 Default Border: border() method now accepts optional color parameter with gray-200 default
• 🎨 TailwindCSS Alignment: Border behavior now matches official TailwindCSS specifications
• 🔧 Simplified API: Consistent border methods across all color families

⚠️ Pre-1.0.0 Notice

This is a pre-1.0.0 release focusing on architectural improvements and builder pattern implementation. As we work toward the optimal solution, some APIs may be deprecated or changed in breaking ways. The current builder implementations (ContainerBuilder, TextBuilder, FlexBuilder) are production-ready and represent the future direction of this library.

---

[2025-09-26] - Version 0.3.2 - Animation System Fixes & Documentation Enhancement

🔧 Bug Fixes

• 🎬 Fixed AnimatedContainer constructor syntax errors in transition_animation.dart
• 🛠️ Corrected _withDuration method name and implementation
• 📝 Resolved method naming conflicts in animation utilities
• 🚀 Eliminated remaining constructor syntax issues

📚 Documentation Improvements

• 🌍 Added Japanese README (README_JP.md) for better international support
• 🔗 Enhanced language navigation between English, Chinese, and Japanese docs
• 📖 Improved documentation accessibility and user experience

⚡ Performance Improvements

• 🎯 Optimized animation helper methods for better performance
• 💾 Cleaned up transition duration handling
• 🔧 Enhanced animation method consistency

---

[2025-09-26] - Version 0.3.1 - Static Analysis & Code Quality Improvements

🔧 Code Quality Enhancements

• 🚀 Resolved 472 static analysis issues to improve pub.dev scoring
• 🔄 Replaced deprecated withOpacity calls with withValues for better precision
• 📱 Updated deprecated textScaleFactor to use textScaler for modern text scaling
• ⚡ Added const keywords to constructor invocations for better performance
• 🧹 Fixed unnecessary this. qualifiers and other linting issues
• 📦 Enhanced package compliance with pub.dev standards

🎯 Performance Optimizations

• 💾 Improved memory usage with const constructors
• 🏃 Better rendering performance with optimized text scaling
• 🎨 Enhanced color precision with new withValues API
• 🔧 Reduced unnecessary rebuilds through code optimization

---

[2025-09-23] - Complete Chat Application Example

✨ New Features

• 📱 Complete chat application example showcasing TailwindCSS Build in real-world projects
• 🏠 Implemented five core pages: homepage, chat list, chat details, moments feed, and profile center
• 🎨 Support for dark/light theme mode switching, providing better user experience
• 🌍 Complete internationalization support (Chinese/English), demonstrating multilingual app development
• 📊 State management using MobX, following best practice patterns
• 💬 Chat functionality: message sending, receiving, time display, user status, etc.
• 📸 Moments feature: post publishing, likes, comments, image display, etc.
• ⚙️ Personal settings page: theme switching, language selection, user info editing, etc.
• 🔍 Chat search functionality and unread message counter
• 🎯 Built entirely with TailwindCSS Build syntax, showcasing the power of method chaining

🚀 Technical Highlights

• 📈 Significantly enhanced project practicality and demonstration effects
• 🏗️ Showcased TailwindCSS Build architectural patterns in complex applications
• 📱 Validated the toolkit's mobile adaptation capabilities
• 🎨 Demonstrated best practices for deep method chaining and component composition
• 🔧 Implemented responsive state management using MobX
• 🌐 Complete internationalization solution

📂 Project Structure

lib/chat/
├── models/          # Data models
├── stores/          # MobX state management
├── pages/           # Page components
├── l10n/            # Internationalization
└── utils/           # Utility classes

📱 Page Features

• HomePage: Bottom navigation bar + page routing
• ChatListPage: Chat list + search + unread counter
• ChatDetailPage: Message bubbles + input box + real-time sending
• MomentsPage: Dynamic list + likes/comments + image display
• ProfilePage: Personal info + settings page + theme/language switching

---

0.3.0 - 2025-09-23

📚 Package Enhancement & Documentation Overhaul

✨ Package Improvements

• Version Update: Upgraded to v0.3.0 with complete package metadata
• MIT License: Updated to MIT License with 2024 copyright
• Package Info: Added comprehensive package description, repository links, and documentation URLs
• Pub.dev Ready: Fully prepared for pub.dev publication with all required metadata

📖 Documentation Complete Rewrite

• English README: Comprehensive English documentation with complete feature overview
• Chinese README: Full simplified Chinese documentation (README_CN.md)
• Language Navigation: Added language switching links between English and Chinese versions
• Feature Coverage: Detailed documentation of all 80+ utility modules including:
  • Layout & Positioning (Flexbox, Grid, Spacing, Sizing)
  • Typography (Font Family, Size, Weight, Color, Alignment)
  • Colors & Backgrounds (Complete Tailwind color palette)
  • Borders & Effects (Width, Color, Style, Radius, Shadow)
  • Filters & Transforms (Blur, Brightness, Rotate, Scale)
  • Advanced Features (Widget Extensions, Accessibility, SVG)

🔧 Technical Enhancements

• Installation Guide: Clear installation instructions with version 0.3.0
• Usage Examples: Comprehensive code examples for all major features
• Best Practices: Guidelines for responsive design and accessibility
• Advanced Configuration: Custom themes and color blind support examples

🌈 Complete Feature Documentation

• 80+ Utility Modules: Full documentation of all available utilities
• Widget Extensions: asRow(), asColumn(), asStack(), asWrap() conversion methods
• Accessibility: WCAG compliance, color blind support, high contrast themes
• SVG Support: Complete SVG styling and manipulation capabilities
• Responsive Design: Mobile and desktop adaptive utilities

This version represents a major milestone with production-ready documentation and package configuration, making it fully ready for public distribution and community adoption.

---

0.2.8 - 2025-09-23

🎨 SVG & Accessibility Final Enhancement

✨ New Feature Modules

• svg-utilities: Complete SVG support system including fill, stroke, stroke-width and other SVG style controls
• accessibility-utilities: Complete accessibility system including forced-color-adjust and advanced accessibility features

🔧 SVG Feature Highlights

• Fill Colors: Basic controls like fill-none, fill-inherit, fill-current, fill-transparent
• Complete Color System: Support for all Tailwind color systems, from slate to rose with all color scales
• Stroke Colors: Stroke color controls like stroke-none, stroke-inherit, stroke-current
• Stroke Width: Stroke width controls like stroke-0, stroke-1, stroke-2
• SVG Components: svgIcon(), svgNetwork() for SVG image loading and color control
• Builder Pattern: SvgBuilder class for quickly building complex SVG components

♿ Accessibility Feature Highlights

• Forced Colors: forced-color-adjust-auto, forced-color-adjust-none for forced color adjustment
• High Contrast: highContrast() high contrast mode support
• Dark Mode Adaptation: darkModeAdaptive() automatic dark mode adaptation
• Animation Control: reduceMotion() to reduce animations (respecting system settings)
• Screen Reader: screenReaderFriendly() screen reader friendly
• Enhanced Focus: enhancedFocus() enhanced focus visibility
• Color Blind Friendly: colorBlindFriendly() color blind user friendly design
• Adaptive Font Size: adaptiveFontSize() adaptive font sizing
• Touch Target: minTouchTarget() ensuring minimum touch target size
• Keyboard Navigation: keyboardNavigable() keyboard navigation support
• Dynamic Font: dynamicFont() dynamic font support
• System Theme: systemThemeAdaptive() system theme adaptation

🎨 Accessibility Helper Tools

• Contrast Check: AccessibilityChecker.calculateContrastRatio() for color contrast calculation
• WCAG Standards: meetsWCAGAA(), meetsWCAGAAA() WCAG accessibility standard checks
• Color Blind Filters: Support for protanopia(red), deuteranopia(green), tritanopia(blue), monochromacy(complete) color blindness filters
• Accessibility Themes: AccessibilityTheme.highContrastTheme(), largeTextTheme() preset accessibility themes

📚 API Examples

// SVG Style Control
Widget().fillRed500()           // Red fill
Widget().fillTransparent()      // Transparent fill  
Widget().strokeBlue500()        // Blue stroke
Widget().stroke2()              // 2px stroke width
Widget().customFill(Colors.purple)
Widget().customStrokeWidth(3.0)

// SVG Components
Widget().svgIcon(
  assetPath: 'assets/icon.svg',
  width: 24,
  height: 24,
  color: Colors.blue,
)

// SVG Builder
SvgBuilder()
  .asset('assets/icon.svg')
  .size(32, 32)
  .color(Colors.red)
  .fit(BoxFit.contain)
  .build()

// Accessibility Features
Widget().highContrast(
  enabled: true,
  foregroundColor: Colors.black,
  backgroundColor: Colors.white,
)

Widget().colorBlindFriendly(
  type: ColorBlindType.protanopia,
)

Widget().enhancedFocus(
  focusColor: Colors.blue,
  focusWidth: 2.0,
)

Widget().minTouchTarget(
  minWidth: 44.0,
  minHeight: 44.0,
)

// Accessibility Checks
final ratio = AccessibilityChecker.calculateContrastRatio(
  Colors.black, 
  Colors.white,
);
final isAccessible = AccessibilityChecker.meetsWCAGAA(
  Colors.black, 
  Colors.white,
);

// Accessibility Themes
MaterialApp(
  theme: AccessibilityTheme.highContrastTheme(),
  // or
  theme: AccessibilityTheme.largeTextTheme(scaleFactor: 1.5),
)

🎉 Important Milestone: This version completes the full implementation of Tailwind CSS in Flutter, including all major feature modules:

• ✅ Layout (Flexbox, Grid, Spacing, Sizing)
• ✅ Typography (Font, Text, Colors)
• ✅ Backgrounds (Colors, Images, Gradients)
• ✅ Borders & Outline (Width, Color, Style, Radius)
• ✅ Effects (Shadows, Opacity, Blend Modes)
• ✅ Filters (Blur, Brightness, Contrast, Color)
• ✅ Tables (Border, Spacing, Layout)
• ✅ Transitions & Animation (Duration, Easing, Keyframes)
• ✅ Transforms (Rotate, Scale, Translate, Skew)
• ✅ Interactivity (Cursor, Touch, Scroll, Drag)
• ✅ SVG (Fill, Stroke, Width)
• ✅ Accessibility (Color Adjust, High Contrast, WCAG)

0.2.7 - 2025-09-23

🎯 Interactivity System Enhancement

✨ New Feature Modules

• interactivity: Complete CSS interaction system including cursor, pointer-events, user-select, scroll-behavior and other interactive features

🔧 Interactivity Feature Highlights

• Accent Color: accent-color support for auto, inherit, current, transparent and other color controls
• Appearance: appearance-none, appearance-auto for native style control
• Caret Color: Complete caret-color control
• Color Scheme: color-scheme support for normal, light, dark, light-dark modes
• Cursor Styles: Complete cursor support including pointer, text, move, help, resize and 30+ cursor types
• Field Sizing: field-sizing-content, field-sizing-fixed for field size control
• Pointer Events: pointer-events-none, pointer-events-auto for pointer event control
• Resize: resize-none, resize, resize-x, resize-y for resize control
• Scroll Behavior: scroll-auto, scroll-smooth for scroll behavior control
• Scroll Margin: scroll-margin 0-64 complete margin control with directional support
• Scroll Padding: scroll-padding 0-64 complete padding control with directional support
• Scroll Snap: snap-start, snap-end, snap-center, snap-align-none for scroll alignment
• Snap Stop: snap-normal, snap-always for scroll stop control
• Snap Type: snap-x, snap-y, snap-both, snap-mandatory, snap-proximity for scroll types
• Touch Action: touch-auto to touch-manipulation for complete touch action control
• User Select: select-none, select-text, select-all, select-auto for text selection control
• Performance: will-change-auto to will-change-transform for performance optimization hints

🎨 Advanced Interactive Features

• Drag System: draggable(), dragTarget() for complete drag support
• Gesture Detection: longPressDetector(), doubleTapDetector() for gesture recognition
• Hover Effects: hoverEffect(), clickable() for interactive feedback
• Focus Management: focusDetector(), keyboardListener() for focus and keyboard handling
• Semantic Support: semantics(), excludeSemantics(), mergeSemantics() for accessibility
• State Control: disabled(), loading() for component state management

📚 API Examples

// Cursor Control
Widget().cursorPointer()      // Pointer cursor
Widget().cursorText()         // Text cursor
Widget().cursorMove()         // Move cursor
Widget().cursorNotAllowed()   // Not allowed cursor
Widget().customCursor(SystemMouseCursors.grab)

// Pointer Events
Widget().pointerEventsNone()  // Disable pointer events
Widget().pointerEventsAuto()  // Enable pointer events

// User Selection
Widget().selectNone()         // Disable selection
Widget().selectText()         // Allow text selection
Widget().selectAll()          // Allow select all

// Scroll Control
Widget().scrollSmooth()       // Smooth scrolling
Widget().scrollM4()           // Scroll margin 4
Widget().scrollP8()           // Scroll padding 8
Widget().snapCenter()         // Scroll snap center

// Touch Control
Widget().touchPanX()          // X-axis pan
Widget().touchPanY()          // Y-axis pan
Widget().touchPinchZoom()     // Pinch zoom gesture

// Advanced Interactions
Widget().draggable(
  data: 'item',
  onDragStarted: () => print('Drag started'),
);

Widget().dragTarget<String>(
  onAccept: (data) => print('Received: $data'),
);

Widget().clickable(
  onTap: () => print('Clicked'),
  cursor: SystemMouseCursors.click,
);

Widget().longPressDetector(
  onLongPress: () => print('Long pressed'),
);

Widget().hoverEffect(
  duration: Duration(milliseconds: 200),
);

// Semantic Support
Widget().semantics(
  label: 'Button',
  hint: 'Tap to execute action',
  button: true,
  onTap: () => print('Semantic tap'),
);

// State Control
Widget().disabled()           // Disabled state
Widget().loading(isLoading: true)  // Loading state

0.2.6 - 2025-09-23

🔄 Transforms System Enhancement

✨ New Feature Modules

• transforms: Complete CSS transform system including rotate, scale, translate, skew, perspective and all transform functions

🔧 Transforms Feature Highlights

• Backface Visibility: backface-visible, backface-hidden for controlling backface display in 3D transforms
• Perspective Effects: perspective-250 to perspective-1000 for complete perspective depth control
• Perspective Origin: perspective-origin-center, perspective-origin-top and 9 directional controls
• Rotation Transform: rotate-0 to rotate-180 bidirectional rotation with 1° to 180° precise control
• Scale Transform: scale-0 to scale-150 complete scaling range with overall, X-axis, Y-axis independent scaling
• Skew Transform: skew-x/skew-y supporting 1° to 12° X/Y axis skew transforms
• Translate Transform: translate-x/translate-y supporting pixel, rem, percentage value complete control
• Transform Origin: origin-center to origin-top-left and 9 origin positions
• Transform Style: transform-flat, transform-preserve-3d for 3D transform style control
• Custom Transforms: Support for custom Matrix4, 3D transform combinations, flip effects

📚 API Examples

// Rotation Transform
Widget().rotate45()           // 45 degree rotation
Widget().rotateNeg90()        // -90 degree rotation
Widget().customRotate(30)     // Custom 30 degree rotation

// Scale Transform
Widget().scale150()           // 150% scaling
Widget().scaleX75()           // X-axis 75% scaling
Widget().scaleY125()          // Y-axis 125% scaling
Widget().customScale(scaleX: 1.2, scaleY: 0.8)

// Translate Transform
Widget().translateX16()       // X-axis 16px translation
Widget().translateYNeg24()    // Y-axis -24px translation
Widget().translateXHalf()     // X-axis 50% translation
Widget().customTranslate(20, -10)

// Skew Transform
Widget().skewX12()            // X-axis 12 degree skew
Widget().skewYNeg6()          // Y-axis -6 degree skew
Widget().customSkew(skewX: 15, skewY: -5)

// Perspective Effect
Widget().perspective500()     // 500px perspective
Widget().perspectiveOriginTop()

// Transform Origin
Widget().originCenter()       // Center origin
Widget().originTopLeft()      // Top-left origin

// 3D Transform Combination
Widget().transform3D(
  rotateX: 45,
  rotateY: 30,
  translateZ: 10,
  scaleX: 1.2,
);

// Flip Effects
Widget().flipHorizontal()     // Horizontal flip
Widget().flipVertical()       // Vertical flip
Widget().flipDiagonal()       // Diagonal flip

// Custom Matrix Transform
Widget().customTransform(Matrix4.identity()..rotateZ(0.5))

0.2.5 - 2025-09-23

📊 Tables & 🎬 Transitions & Animation System Enhancement

✨ New Feature Modules

• table-utilities: Complete CSS table system including border-collapse, border-spacing, table-layout, caption-side
• transition-animation: Complete transition animation system including transition-property, transition-duration, animation, etc.

🔧 Tables Feature Highlights

• Border Control: border-collapse, border-separate for table border merging control
• Border Spacing: border-spacing-0 to border-spacing-24 for complete spacing control
• Table Layout: table-auto, table-fixed for table layout modes
• Caption Position: caption-top, caption-bottom for table caption position control
• Table Builder: TableBuilder class for quickly building complex tables
• Cell Styles: tableHeaderCell, tableDataCell for specialized cell styles
• Border Styles: tableWithFullBorder, tableWithOuterBorder and other quick border settings

🎬 Transitions & Animation Feature Highlights

• Transition Properties: transition-all, transition-colors, transition-opacity, transition-shadow, transition-transform
• Transition Behavior: transition-behavior-normal, transition-behavior-allow-discrete
• Transition Duration: duration-75 to duration-1000 for complete time control
• Easing Functions: ease-linear, ease-in, ease-out, ease-in-out timing functions
• Transition Delay: delay-75 to delay-1000 for delay control
• Preset Animations: animate-spin, animate-ping, animate-pulse, animate-bounce
• Custom Animations: fadeIn, fadeOut, slideIn, scaleIn, rotateIn and other extended animations
• Hover Effects: hoverScale, hoverOpacity for interactive animations
• Animation Management: AnimationManager animation controller management class
• Animation Sequence: AnimationSequence for building complex animation sequences

📚 API Examples

// Tables
TableBuilder()
  .addHeaderRow(['Name', 'Age', 'City'])
  .addDataRow([Text('John'), Text('25'), Text('NYC')])
  .withBorder(TableBorder.all())
  .build()
  .borderCollapse()
  .borderSpacing4()
  .tableFixed();

// Cell Styles
Text('Header').tableHeaderCell(backgroundColor: Colors.grey[200])
Text('Data').tableDataCell(padding: EdgeInsets.all(12))

// Transitions
Widget()
  .transitionAll(duration: Duration(milliseconds: 300))
  .duration500()
  .easeInOut()
  .delay100();

// Animations
Widget().animateSpin()         // Spin animation
Widget().animatePulse()        // Pulse animation
Widget().animateBounce()       // Bounce animation
Widget().fadeIn()              // Fade in animation
Widget().slideIn()             // Slide in animation
Widget().scaleIn()             // Scale in animation

// Custom Animation
Widget().customAnimation(
  animation: controller,
  builder: (context, child, value) => Transform.scale(
    scale: value,
    child: child,
  ),
);

0.2.4 - 2025-09-23

🎨 Filters System Enhancement

✨ New Feature Modules

• filter: Complete CSS filter system including blur, brightness, contrast, drop-shadow and all filter effects
• backdrop-filter: Backdrop filter system supporting backdrop-blur, backdrop-brightness and other backdrop filter effects

🔧 Feature Highlights

• Blur Filters: blur-sm, blur, blur-md, blur-lg, blur-xl, blur-2xl, blur-3xl for complete blur effects
• Brightness Filters: brightness-0 to brightness-200 for complete brightness control range
• Contrast Filters: contrast-0 to contrast-200 for complete contrast control
• Drop Shadow Filters: drop-shadow-sm to drop-shadow-2xl for multi-level drop shadow effects
• Color Filters: grayscale, hue-rotate, invert, saturate, sepia for complete color filtering
• Backdrop Filters: Complete backdrop-filter support for frosted glass effects and background blur
• Hue Rotation: hue-rotate-15, hue-rotate-30, hue-rotate-60, hue-rotate-90, hue-rotate-180
• Saturation Control: saturate-0, saturate-50, saturate-100, saturate-150, saturate-200
• Custom Filters: Support for custom ImageFilter and ColorFilter matrices

📚 API Examples

// Blur Effects
Widget().blur()           // 8px blur
Widget().blurLg()         // 16px blur
Widget().backdropBlur()   // Backdrop blur

// Brightness/Contrast
Widget().brightness150()  // 150% brightness
Widget().contrast125()    // 125% contrast

// Color Filters  
Widget().grayscale()      // Grayscale effect
Widget().sepia()          // Sepia effect
Widget().hueRotate90()    // 90 degree hue rotation
Widget().saturate150()    // 150% saturation

// Drop Shadow Effects
Widget().dropShadow()     // Standard drop shadow
Widget().dropShadowLg()   // Large drop shadow

// Invert Effects
Widget().invert()         // Invert filter

// Custom Filters
Widget().customBlur(12, 12)        // Custom blur
Widget().customBrightness(1.2)     // Custom brightness
Widget().f(ImageFilter.blur(...))  // Custom filter

0.2.3 - 2025-09-23

🎨 Effects System Enhancement

✨ New Feature Modules

• box-shadow: Box shadow control utilities including shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl presets
• text-shadow: Text shadow control utilities supporting various shadow effects and color systems
• opacity: Opacity control utilities supporting complete 0-100 opacity range and animation effects
• mix-blend-mode: Blend mode control utilities supporting multiply, screen, overlay, darken, lighten and all CSS blend modes
• background-blend-mode: Background blend mode control utilities for blending background images with background colors
• mask-utilities: Mask feature collection including mask-clip, mask-composite, mask-image and complete masking system

🔧 Feature Highlights

• Complete Shadow System: From subtle shadow-sm to strong shadow-2xl, supporting colored shadows and custom shadows
• Text Effects: Text shadows, glow, outline, emboss, engrave and various text effects
• Opacity Control: Support for 0-100% opacity including animated opacity and conditional opacity
• Blend Modes: Complete CSS blend mode support including color matrices and filter effects
• Masking System: Gradient masks, shape masks, text masks and advanced visual effects
• Material Design: Built-in Material Design style elevation shadow system
• Flutter Optimized: Optimized for Flutter features using native components like ShaderMask, ColorFiltered

📚 API Examples

// Shadow Effects
Widget().shadow()           // Standard shadow
Widget().shadowLg()         // Large shadow  
Widget().shadowBlue500()    // Blue shadow
Widget().elevation4()       // Material Design shadow

// Text Shadow
Text("Hello").textShadow()     // Text shadow
Text("Glow").textGlow()        // Text glow
Text("Outline").textOutline()  // Text outline

// Opacity
Widget().opacity50()        // 50% opacity
Widget().fadeIn()          // Fade in animation
Widget().hideIf(condition) // Conditional hide

// Blend Modes
Widget().mixBlendMultiply()  // Multiply blend
Widget().sepia()            // Sepia effect
Widget().duotoneBlue()      // Blue duotone

// Mask Effects
Widget().fadeEdgeMask()     // Edge fade mask
Widget().circularMask()     // Circular mask
Widget().maskImageLinear()  // Linear gradient mask

0.2.2 - 2025-09-22

🎨 Border & Outline System Enhancement

✨ New Feature Modules

• border-width: Border width control utilities supporting border-0, border-2, border-4, border-8 and other preset values
• border-color: Border color control utilities including complete Tailwind CSS color system support
• border-style: Border style control utilities supporting solid, dashed, dotted, double and other styles
• outline-width: Outline width control utilities using BoxShadow to simulate outline effects
• outline-color: Outline color control utilities including complete color system and opacity support
• outline-style: Outline style control utilities supporting various outline styles and animation effects
• outline-offset: Outline offset control utilities supporting precise offset control

🔧 Feature Highlights

• Complete Directional Support: All border functions support independent control of top/right/bottom/left directions
• Logical Property Support: Provides start/end logical properties that automatically adapt to LTR/RTL text direction
• Complete Color System: Supports 50-900 color scales for gray/red/blue/green and other color families
• Simplified API Design: Provides simplified methods like bw(), bc(), bs(), ow(), oc()
• Flutter Optimized: Optimized for Flutter platform features using Container and BoxShadow implementation
• Focus Style Support: Dedicated focus state outline styles for enhanced user experience
• Ring Effects: Simulates Tailwind CSS ring effects supporting modern outline design

📚 API Examples

// Border Width
Widget().border2()  // 2px border
Widget().borderT4() // Top 4px border
Widget().bw(3)      // Custom 3px border

// Border Color  
Widget().borderRed500()    // Red border
Widget().borderTBlue500()  // Top blue border
Widget().bc(Colors.purple) // Custom purple border

// Outline Effects
Widget().outline2()           // 2px outline
Widget().outlineRed500()      // Red outline  
Widget().outlineOffset4()     // 4px offset outline
Widget().ringBlue500()        // Blue ring effect

0.2.1 - 2025-09-21

🎉 Major Update: Complete Example Project Refactoring

📱 New Tabbed Example Application

• Refactored example project into complete TabBar application with 6 functional tabs
• Created beautiful homepage showcasing all feature overviews and quick start guide
• Each feature module has dedicated demo page with detailed explanations

🎨 Border Radius System Enhancement

• Enhanced border_radius.dart utility class with complete Tailwind CSS border-radius functionality
• Added basic border radius utilities: roundedXs(), roundedSm(), roundedMd(), roundedLg(), roundedXl(), rounded2xl(), rounded3xl(), rounded4xl()
• Added special border radius utilities: roundedNone(), roundedFull()
• Added directional border radius utilities: roundedT(), roundedR(), roundedB(), roundedL() series
• Added individual corner border radius utilities: roundedTl(), roundedTr(), roundedBl(), roundedBr() series
• Added logical property border radius utilities: roundedS(), roundedE(), roundedSs(), roundedSe(), roundedEs(), roundedEe() series (RTL support)
• Added custom border radius utilities: r(), rTop(), rBottom(), rLeft(), rRight(), rOnly() and other simplified APIs
• Added common border radius value shortcuts: r2(), r4(), r6(), r8(), r12(), r16(), r20(), r24(), r32()

📐 Complete Demo Pages

• AspectRatioDemo: Complete aspect ratio functionality demonstration including real-world application scenarios
• BorderRadiusDemo: Comprehensive border radius showcase including RTL support and combined usage
• WidthDemo: Width control demonstration including responsive layout and form design
• HeightDemo: Height control demonstration including interface layout and data visualization
• ColorsDemo: Color system demonstration including color scheme guides and best practices

🛠 Technical Improvements

• Exported all utility class extensions in main file
• Each demo incorporates other utility classes to showcase combined effects
• Added detailed usage instructions and best practice recommendations
• Optimized code structure and documentation comments

0.2.0

• Added select widget functionality

0.1.9

• Added single corner rounded border radius support

0.1.8

• Fixed border property error

0.1.7

• Fixed image flex1 bug

0.1.6

• Added comprehensive examples
• Added input focus event handling
• Fixed grid and flex layout bugs

0.1.5

• Fixed text overflow and wrap issues
• Enhanced image auto-sizing functionality

0.1.4

• Fixed grid auto-height and gap spacing

0.1.3

• Added overflow-x and overflow-y controls

0.1.2

• General bug fixes

0.1.1

• Fixed Input widget bugs and added placeholder support

0.1.0

• General bug fixes and added tabs functionality

0.0.9

• Fixed flex layout center alignment bug

0.0.8

• Added image support

0.0.7

• Added relative positioning

0.0.6

• Added input widget examples

0.0.5

• Added border, border-radius, background gradient, and box-shadow utilities

0.0.4

• Added text alignment, grid, grid-cols, and aspect ratio utilities

0.0.3

• Added line height, max lines, and font style utilities

0.0.2

• Added font size examples
• Added flex layout functionality

0.0.1

• Initial release