tailwindcss_build 0.4.6

tailwindcss_build: ^0.4.6 copied to clipboard

📚 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.flutter-io.cn 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.

🎨 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)

🎯 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

🔄 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))

📊 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,
  ),
);

🎨 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

🎨 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

🎨 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

🎉 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

• Added select widget functionality

• Added single corner rounded border radius support

• Fixed border property error

• Fixed image flex1 bug

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

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

• Fixed grid auto-height and gap spacing

• Added overflow-x and overflow-y controls

• General bug fixes

• Fixed Input widget bugs and added placeholder support

• General bug fixes and added tabs functionality

• Fixed flex layout center alignment bug

• Added image support

• Added relative positioning

• Added input widget examples

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

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

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

• Added font size examples
• Added flex layout functionality

• Initial release