Layout

A single-child .tw chain can't express multi-child layout — flex direction, gap, positioning, z-order. Those live in dedicated widgets. Each is directional by default (RTL-free) and is still chainable with .tw for box styling (FwRow(...).tw.p(4).bg(c)).

Flex — FwRow / FwColumn

Like a Flutter Row/Column, but with a typed gap (Tailwind's gap-*) and directional alignment:

final t = context.fw;
FwRow(
  gap: 2, // 2 units = 8 px between children
  children: [
    const Text('Cancel').tw.px(3).py(2).rounded(t.radii.md).bg(t.colors.secondary),
    const Text('Save').tw.px(3).py(2).rounded(t.radii.md).bg(t.colors.primary).text(t.colors.primaryForeground),
  ],
);

FwWrap is the wrapping variant (Tailwind flex-wrap).

Dividers between children — divide

FwRow / FwColumn can draw a directional border between adjacent children (Tailwind divide-x-* / divide-y-*) — a separator on the trailing edge of every child but the last, RTL-aware and composed with gap:

FwRow(
  gap: 3,
  divideWidth: 1,                 // Tailwind divide-x
  divideColor: t.colors.border,   // required when divideWidth > 0
  children: const [
    Text('Home').tw.px(3),
    Text('Docs').tw.px(3),
    Text('About').tw.px(3),
  ],
);

Scrolling & overflow — FwScroll

overflow-hidden is just .tw.clip(), but scrolling needs a real scroll widget. FwScroll is the Material-free mapping of Tailwind overflow-auto / overflow-scroll — a SingleChildScrollView under a RawScrollbar (never Material's Scrollbar):

FwScroll(
  axis: Axis.vertical,            // overflow-y; Axis.horizontal = overflow-x
  thumbColor: t.colors.border,    // themed scrollbar
  child: FwColumn(gap: 2, children: const [/* … */]),
);

• showScrollbar (default true) and alwaysShowScrollbar (overflow-scroll vs overflow-auto).
• thumbColor and trackColor theme the scrollbar (Tailwind scrollbar-color); a trackColor shows the track and keeps the thumb visible.
• padding, reverse, and an external controller are all supported.

Scroll-snap

Pass snapExtent (the item size in logical px) to settle on item boundaries — the carousel pattern (Tailwind scroll-snap). snapAlign chooses start / center / end:

FwScroll(
  axis: Axis.horizontal,
  snapExtent: 280,                 // settles on multiples of 280px
  snapAlign: FwSnapAlign.center,   // snap-center
  child: FwRow(gap: 4, children: const [/* uniform 280px cards */]),
);

Stacking — FwStack / FwPositioned

FwStack overlays children; FwPositioned places one with directional insets (start/end/ top/bottom, RTL-aware) and a z order:

FwStack(
  children: [
    const SizedBox().tw.size(20).bg(t.colors.muted).rounded(t.radii.lg),
    FwPositioned(
      top: 1,
      end: 1,
      child: const Text('3').tw.px(2).bg(t.colors.primary).text(t.colors.primaryForeground).roundedFull,
    ),
  ],
);

Real CSS Grid — FwGrid

FwGrid is a true CSS Grid (a custom render object, not a flex stand-in): fr / px / auto / minmax tracks, row tracks, cell/row spanning and placement, auto-placement, and alignment.

FwGrid(
  columnGap: 2,
  rowGap: 2,
  columns: const <FwGridTrack>[FwPx(60), FwFr(), FwFr(2), FwAuto()], // 60px · 1fr · 2fr · auto
  children: const [/* cells */],
);

// repeat(3, 1fr) — three equal columns
FwGrid(columns: FwTrack.repeat(3, const FwFr()), children: const [/* … */]);

Place and span cells with FwGridItem (columnSpan / rowSpan / 1-based columnStart / rowStart).

Next steps