feat: add mix_tailwinds Tailwind utility layer (POC)

.github/workflows/test.yml

@@ -28,9 +28,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - uses: kuhnroyal/flutter-fvm-config-action@v2
+        id: fvm-config-action
       - uses: subosito/flutter-action@v2
         with:
-          channel: 'stable'
+          flutter-version: ${{ steps.fvm-config-action.outputs.FLUTTER_VERSION }}
+          channel: ${{ steps.fvm-config-action.outputs.FLUTTER_CHANNEL }}
       - name: Check formatting
         run: dart format --set-exit-if-changed .
 

.github/workflows/widgetbook.yml

@@ -1,56 +1,11 @@
-# name: "Widgetbook"
+name: Widgetbook (disabled)
 
-# on: push
+on:
+  workflow_dispatch:
 
-# jobs:
-#   production:
-#     runs-on: ubuntu-latest
-#     steps:
-#       - name: Checkout
-#         uses: actions/checkout@v4
-
-#       - name: Install FVM
-#         shell: bash
-#         run: |
-#           curl -fsSL https://fvm.app/install.sh | bash
-#           fvm use ${{ inputs.flutter-version }} --force
-
-#       - uses: kuhnroyal/flutter-fvm-config-action@v2
-#         id: fvm-config-action
-
-#       - uses: subosito/flutter-action@v2
-#         with:
-#           flutter-version: ${{ steps.fvm-config-action.outputs.FLUTTER_VERSION }}
-#           channel: ${{ steps.fvm-config-action.outputs.FLUTTER_CHANNEL }}
-
-#       - name: Flutter version
-#         shell: bash
-#         run: flutter --version
-
-#       - name: Setup Melos
-#         uses: bluefireteam/melos-action@v3
-
-#       - name: Bootstrap App
-#         shell: bash
-#         run: |
-#           flutter pub get
-
-#       - name: Bootstrap Widgetbook
-#         working-directory: packages/remix/demo
-#         shell: bash
-#         run: |
-#           flutter pub get
-#           dart run build_runner build -d
-
-#       - name: Build Widgetbook
-#         working-directory: packages/remix/demo
-#         shell: bash
-#         run: |
-#           flutter build web
-
-#       - name: Install Widgetbook CLI
-#         run: dart pub global activate widgetbook_cli
-
-#       - name: Upload Widgetbook
-#         working-directory: packages/remix/demo
-#         run: widgetbook cloud build push --api-key ${{ secrets.WIDGETBOOK_API_KEY }}
+jobs:
+  disabled:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Notice
+        run: echo "Widgetbook workflow is intentionally disabled."

.gitignore

@@ -106,6 +106,8 @@ packages/mix/.cody/ignore
 
 .cursor
 .orbit
+CLAUDE.md
+!packages/mix_tailwinds/CLAUDE.md
 .augment/env/setup.sh
 
 # API compatibility reports

README.md

@@ -36,7 +36,7 @@ Mix addresses these challenges by creating a styling system that uses utility fu
 ### Prerequisites
 
 - **Dart SDK**: ≥ 3.10.0 (required for dot notation syntax)
-- **Flutter**: Latest stable version
+- **Flutter**: ≥ 3.38.1
 
 ### Add Mix to Your Project
 
@@ -62,85 +62,74 @@ flutter pub add mix:^2.0.0-rc.0
 
 ### **Powerful Styling API**:
 
-Styles are easily defined using Styler classes like `BoxStyler` and `TextStyler`, which provide a fluent, chainable API for defining style properties:
+Styles are easily defined using the `Style` class, which allows you to define a style's properties and values. Here's an example of defining a style:
 
 ```dart
-final cardStyle = BoxStyler()
-    .height(100)
-    .width(240)
-    .color(Colors.purple)
-    .borderRounded(12)
-    .paddingAll(16);
-
-// Apply the style to a Box widget
-Box(
-  style: cardStyle,
-  child: StyledText(
-    'Hello Mix',
-    style: TextStyler().color(Colors.white).fontSize(18),
-  ),
+// Traditional syntax with cascade notation (always supported)
+final style = Style(
+  $box.height(100)
+    ..width(100)
+    ..color.purple()
+    ..borderRadius(10),
 );
-```
-
-### Enabling Dot Notation Syntax (Recommended)
 
-Mix 2.0 is optimized for Dart's experimental dot notation syntax, which provides an even cleaner API. To enable it, add this to your `analysis_options.yaml`:
-
-```yaml
-analyzer:
-  enable-experiment:
-    - dot-shorthands
+// NEW: Dot notation syntax (requires Dart SDK ≥ 3.10.0)
+final style = Style.box(
+  .height(100)
+  .width(100)
+  .color(Colors.purple)
+  .borderRadius(.circular(10))
+);
 ```
 
-With dot notation enabled, you can write:
+### Dot Notation Syntax (Recommended)
 
-```dart
-final cardStyle = BoxStyler()
-    .height(100)
-    .width(240)
-    .color(Colors.purple)
-    .borderRounded(12);
-```
+Mix 2.0 is optimized for Dart's dot notation syntax, which provides a cleaner and more intuitive API. On Dart SDK `>=3.10.0`, no `analysis_options.yaml` experiment flag is required.
 
-**Note**: This feature requires Dart SDK ≥ 3.10.0.
+The traditional cascade syntax is still fully supported.
 
 Learn more about [styling](https://fluttermix.com/docs/guides/styling)
 
 ### **First-Class Variant Support**:
 
 First-class support for variants, allowing you to define styling variations that can be applied conditionally or responsively.
 
-```dart
-// Define styles with widget state variants
-final buttonStyle = BoxStyler()
-    .borderRounded(10)
-    .color(Colors.blue)
-    .paddingAll(16)
-    // Variants are applied automatically based on widget state
-    .onHovered(BoxStyler().color(Colors.blue.shade700))
-    .onPressed(BoxStyler().color(Colors.blue.shade900));
-
-// Use with a Pressable widget - states are tracked automatically
-Pressable(
-  onPress: () => print('Pressed!'),
-  child: Box(style: buttonStyle, child: Text('Click me')),
+```dart {1, 8-12, 15}
+const onOutlined = NamedVariant('outlined');
+
+final baseStyle = Style(
+  $box.borderRadius(10),
+  $box.color.black(),
+  $text.style.color.white(),
+
+  onOutlined(
+    $box.color.transparent(),
+    $box.border.color.black(),
+    $text.style.color.black(),
+  ),
 );
+
+final outlinedStyle = baseStyle.applyVariant(onOutlined);
 ```
 
-Learn more about [dynamic styling](https://fluttermix.com/docs/guides/dynamic-styling)
+Learn more about [variants](https://fluttermix.com/docs/guides/variants)
 
 ### **BuildContext Responsive Styling**:
 
-Mix allows you to define styles that are context-aware, applying styles conditionally based on the BuildContext.
+Mix allows you to define styles that are context-aware, allowing you to apply styles conditionally based on the BuildContext.
 
-```dart
-final style = BoxStyler()
-    .color(Colors.black)
-    .onDark(BoxStyler().color(Colors.white))
-    .onLight(BoxStyler().color(Colors.black));
+```dart {4-7}
+final style = Style(
+  $box.color.black(),
+  $text.style.color.white(),
+  $on.dark(
+    $box.color.white(),
+    $text.style.color.black(),
+  ),
+);
 ```
 
-Learn more about [dynamic styling](https://fluttermix.com/docs/guides/dynamic-styling)
+Learn more about [context variants](https://fluttermix.com/docs/guides/variants#context-variants)
 
 ### **Design Tokens and Theming**:
 
@@ -151,12 +140,11 @@ Mix goes beyond the Material `Theme` definitions by allowing the definition of d
 A complete set of utility primitives allows you to define styling properties and values in a more intuitive and composable way.
 
 ```dart
-BoxStyler()
-    .paddingAll(20)           // Padding 20 on all sides
-    .paddingX(16)             // Padding 16 on left and right
-    .paddingY(8)              // Padding 8 on top and bottom
-    .paddingTop(20)           // Padding 20 on top
-    .paddingLeft(20);         // Padding 20 on left
+$box.padding(20); /// Padding 20 on all sides
+$box.padding(20, 10); /// Padding 20 on top and bottom, 10 on left and right
+
+$box.padding.top(20); /// Padding 20 on top
+$box.padding.horizontal(20); /// Padding 20 on left and right
 ```
 
 Learn more about [utilities](https://fluttermix.com/docs/overview/utility-first)