diff --git a/crates/gpui/playground/Cargo.toml b/crates/gpui/playground/Cargo.toml
index ed994e08d0..bdf131d089 100644
--- a/crates/gpui/playground/Cargo.toml
+++ b/crates/gpui/playground/Cargo.toml
@@ -17,7 +17,7 @@ playground_macros = { path = "../playground_macros" }
 serde.workspace = true
 simplelog = "0.9"
 smallvec.workspace = true
-taffy = { git = "https://github.com/DioxusLabs/taffy", rev = "dab541d6104d58e2e10ce90c4a1dad0b703160cd" }
+taffy = { git = "https://github.com/DioxusLabs/taffy", rev = "dab541d6104d58e2e10ce90c4a1dad0b703160cd", features = ["flexbox"] }
 util = { path = "../../util" }
 
 [dev-dependencies]
diff --git a/crates/gpui/playground/src/editor_layout_demo.rs b/crates/gpui/playground/src/editor_layout_demo.rs
index c51ca0ba92..d7c5f01c74 100644
--- a/crates/gpui/playground/src/editor_layout_demo.rs
+++ b/crates/gpui/playground/src/editor_layout_demo.rs
@@ -149,17 +149,3 @@ impl<V> Playground<V> {
             ])
     }
 }
-
-// row(
-//     padding(),
-//     width(),
-//     fill(),
-// )
-
-// .width(flex(1.))
-// .height(flex(1.))
-// .justify(end())
-// .align(start()) // default
-// .fill(green)
-// .child(other_tab_bar())
-// .child(profile_menu())
diff --git a/crates/gpui/playground/src/frame.rs b/crates/gpui/playground/src/frame.rs
index 023cac0bdf..8b13789179 100644
--- a/crates/gpui/playground/src/frame.rs
+++ b/crates/gpui/playground/src/frame.rs
@@ -1,165 +1 @@
-use playground_macros::tailwind_lengths;
-use taffy::style::{Position, *};
 
-#[derive(Clone, Debug, Default)]
-struct Style {
-    display: Display,
-    position: Position,
-    overflow: Point<Overflow>,
-    inset: Edges<Length>,
-    size: Size<Length>,
-    max_size: Size<Length>,
-    min_size: Size<Length>,
-}
-
-impl Style {
-    pub fn new() -> Self {
-        Self::default()
-    }
-
-    // Display ////////////////////
-
-    fn block(mut self) -> Self {
-        self.display = Display::Block;
-        self
-    }
-
-    fn flex(mut self) -> Self {
-        self.display = Display::Flex;
-        self
-    }
-
-    fn grid(mut self) -> Self {
-        self.display = Display::Grid;
-        self
-    }
-
-    // Overflow ///////////////////
-
-    pub fn overflow_visible(mut self) -> Self {
-        self.overflow.x = Overflow::Visible;
-        self.overflow.y = Overflow::Visible;
-        self
-    }
-
-    pub fn overflow_hidden(mut self) -> Self {
-        self.overflow.x = Overflow::Hidden;
-        self.overflow.y = Overflow::Hidden;
-        self
-    }
-
-    pub fn overflow_scroll(mut self) -> Self {
-        self.overflow.x = Overflow::Scroll;
-        self.overflow.y = Overflow::Scroll;
-        self
-    }
-
-    pub fn overflow_x_visible(mut self) -> Self {
-        self.overflow.x = Overflow::Visible;
-        self
-    }
-
-    pub fn overflow_x_hidden(mut self) -> Self {
-        self.overflow.x = Overflow::Hidden;
-        self
-    }
-
-    pub fn overflow_x_scroll(mut self) -> Self {
-        self.overflow.x = Overflow::Scroll;
-        self
-    }
-
-    pub fn overflow_y_visible(mut self) -> Self {
-        self.overflow.y = Overflow::Visible;
-        self
-    }
-
-    pub fn overflow_y_hidden(mut self) -> Self {
-        self.overflow.y = Overflow::Hidden;
-        self
-    }
-
-    pub fn overflow_y_scroll(mut self) -> Self {
-        self.overflow.y = Overflow::Scroll;
-        self
-    }
-
-    // Position ///////////////////
-
-    pub fn relative(mut self) -> Self {
-        self.position = Position::Relative;
-        self
-    }
-
-    pub fn absolute(mut self) -> Self {
-        self.position = Position::Absolute;
-
-        self
-    }
-
-    #[tailwind_lengths]
-    pub fn inset(mut self, length: Length) -> Self {
-        self.inset.top = length;
-        self.inset.right = length;
-        self.inset.bottom = length;
-        self.inset.left = length;
-        self
-    }
-
-    #[tailwind_lengths]
-    pub fn w(mut self, length: Length) -> Self {
-        self.size.width = length;
-        self
-    }
-
-    #[tailwind_lengths]
-    pub fn min_w(mut self, length: Length) -> Self {
-        self.size.width = length;
-        self
-    }
-
-    #[tailwind_lengths]
-    pub fn h(mut self, length: Length) -> Self {
-        self.size.height = length;
-        self
-    }
-}
-
-#[derive(Clone, Copy, Debug)]
-pub enum Length {
-    Rems(f32),
-    Pixels(f32),
-    Percent(f32),
-    Auto,
-}
-
-impl Default for Length {
-    fn default() -> Self {
-        Self::Rems(0.)
-    }
-}
-
-#[derive(Clone, Default, Debug)]
-pub struct Edges<T> {
-    top: T,
-    bottom: T,
-    left: T,
-    right: T,
-}
-
-#[derive(Clone, Copy, Debug, Default)]
-pub struct Size<T> {
-    width: T,
-    height: T,
-}
-
-#[derive(Clone, Copy, Debug, Default)]
-pub struct Point<T> {
-    x: T,
-    y: T,
-}
-
-#[test]
-fn test_style() {
-    Style::new().inset_1_5();
-}
diff --git a/crates/gpui/playground/src/playground.rs b/crates/gpui/playground/src/playground.rs
index 28f12d19be..91969a6ae0 100644
--- a/crates/gpui/playground/src/playground.rs
+++ b/crates/gpui/playground/src/playground.rs
@@ -27,6 +27,7 @@ use themes::ThemeColors;
 
 mod color;
 mod frame;
+mod style;
 mod themes;
 mod tokens;
 
diff --git a/crates/gpui/playground/src/style.rs b/crates/gpui/playground/src/style.rs
new file mode 100644
index 0000000000..bab49d10ac
--- /dev/null
+++ b/crates/gpui/playground/src/style.rs
@@ -0,0 +1,296 @@
+use playground_macros::tailwind_lengths;
+use taffy::style::{
+    AlignContent, AlignItems, AlignSelf, Display, FlexDirection, FlexWrap, JustifyContent,
+    Overflow, Position,
+};
+
+#[derive(Clone)]
+pub struct Style {
+    /// What layout strategy should be used?
+    pub display: Display,
+
+    // Overflow properties
+    /// How children overflowing their container should affect layout
+    pub overflow: Point<Overflow>,
+    /// How much space (in points) should be reserved for the scrollbars of `Overflow::Scroll` and `Overflow::Auto` nodes.
+    pub scrollbar_width: f32,
+
+    // Position properties
+    /// What should the `position` value of this struct use as a base offset?
+    pub position: Position,
+    /// How should the position of this element be tweaked relative to the layout defined?
+    pub inset: Edges<LengthOrAuto>,
+
+    // Size properies
+    /// Sets the initial size of the item
+    pub size: Size<LengthOrAuto>,
+    /// Controls the minimum size of the item
+    pub min_size: Size<LengthOrAuto>,
+    /// Controls the maximum size of the item
+    pub max_size: Size<LengthOrAuto>,
+    /// Sets the preferred aspect ratio for the item. The ratio is calculated as width divided by height.
+    pub aspect_ratio: Option<f32>,
+
+    // Spacing Properties
+    /// How large should the margin be on each side?
+    pub margin: Edges<LengthOrAuto>,
+    /// How large should the padding be on each side?
+    pub padding: Edges<Length>,
+    /// How large should the border be on each side?
+    pub border: Edges<Length>,
+
+    // Alignment properties
+    /// How this node's children aligned in the cross/block axis?
+    pub align_items: Option<AlignItems>,
+    /// How this node should be aligned in the cross/block axis. Falls back to the parents [`AlignItems`] if not set
+    pub align_self: Option<AlignSelf>,
+    /// How should content contained within this item be aligned in the cross/block axis
+    pub align_content: Option<AlignContent>,
+    /// How should contained within this item be aligned in the main/inline axis
+    pub justify_content: Option<JustifyContent>,
+    /// How large should the gaps between items in a flex container be?
+    pub gap: Size<Length>,
+
+    // Flexbox properies
+    /// Which direction does the main axis flow in?
+    pub flex_direction: FlexDirection,
+    /// Should elements wrap, or stay in a single line?
+    pub flex_wrap: FlexWrap,
+    /// Sets the initial main axis size of the item
+    pub flex_basis: LengthOrAuto,
+    /// The relative rate at which this item grows when it is expanding to fill space, 0.0 is the default value, and this value must be positive.
+    pub flex_grow: f32,
+    /// The relative rate at which this item shrinks when it is contracting to fit into space, 1.0 is the default value, and this value must be positive.
+    pub flex_shrink: f32,
+}
+
+impl Style {
+    pub const DEFAULT: Style = Style {
+        display: Display::DEFAULT,
+        overflow: Point {
+            x: Overflow::Visible,
+            y: Overflow::Visible,
+        },
+        scrollbar_width: 0.0,
+        position: Position::Relative,
+        inset: Edges::auto(),
+        margin: Edges::<LengthOrAuto>::zero(),
+        padding: Edges::<Length>::zero(),
+        border: Edges::<Length>::zero(),
+        size: Size::auto(),
+        min_size: Size::auto(),
+        max_size: Size::auto(),
+        aspect_ratio: None,
+        gap: Size::zero(),
+        // Aligment
+        align_items: None,
+        align_self: None,
+        align_content: None,
+        justify_content: None,
+        // Flexbox
+        flex_direction: FlexDirection::Row,
+        flex_wrap: FlexWrap::NoWrap,
+        flex_grow: 0.0,
+        flex_shrink: 1.0,
+        flex_basis: LengthOrAuto::Auto,
+    };
+
+    pub fn new() -> Self {
+        Self::DEFAULT.clone()
+    }
+
+    // Display ////////////////////
+
+    fn block(mut self) -> Self {
+        self.display = Display::Block;
+        self
+    }
+
+    fn flex(mut self) -> Self {
+        self.display = Display::Flex;
+        self
+    }
+
+    fn grid(mut self) -> Self {
+        self.display = Display::Grid;
+        self
+    }
+
+    // Overflow ///////////////////
+
+    pub fn overflow_visible(mut self) -> Self {
+        self.overflow.x = Overflow::Visible;
+        self.overflow.y = Overflow::Visible;
+        self
+    }
+
+    pub fn overflow_hidden(mut self) -> Self {
+        self.overflow.x = Overflow::Hidden;
+        self.overflow.y = Overflow::Hidden;
+        self
+    }
+
+    pub fn overflow_scroll(mut self) -> Self {
+        self.overflow.x = Overflow::Scroll;
+        self.overflow.y = Overflow::Scroll;
+        self
+    }
+
+    pub fn overflow_x_visible(mut self) -> Self {
+        self.overflow.x = Overflow::Visible;
+        self
+    }
+
+    pub fn overflow_x_hidden(mut self) -> Self {
+        self.overflow.x = Overflow::Hidden;
+        self
+    }
+
+    pub fn overflow_x_scroll(mut self) -> Self {
+        self.overflow.x = Overflow::Scroll;
+        self
+    }
+
+    pub fn overflow_y_visible(mut self) -> Self {
+        self.overflow.y = Overflow::Visible;
+        self
+    }
+
+    pub fn overflow_y_hidden(mut self) -> Self {
+        self.overflow.y = Overflow::Hidden;
+        self
+    }
+
+    pub fn overflow_y_scroll(mut self) -> Self {
+        self.overflow.y = Overflow::Scroll;
+        self
+    }
+
+    // Position ///////////////////
+
+    pub fn relative(mut self) -> Self {
+        self.position = Position::Relative;
+        self
+    }
+
+    pub fn absolute(mut self) -> Self {
+        self.position = Position::Absolute;
+
+        self
+    }
+
+    #[tailwind_lengths]
+    pub fn inset(mut self, length: Length) -> Self {
+        self.inset.top = length;
+        self.inset.right = length;
+        self.inset.bottom = length;
+        self.inset.left = length;
+        self
+    }
+
+    #[tailwind_lengths]
+    pub fn w(mut self, length: Length) -> Self {
+        self.size.width = length;
+        self
+    }
+
+    #[tailwind_lengths]
+    pub fn min_w(mut self, length: Length) -> Self {
+        self.size.width = length;
+        self
+    }
+
+    #[tailwind_lengths]
+    pub fn h(mut self, length: Length) -> Self {
+        self.size.height = length;
+        self
+    }
+}
+
+#[derive(Clone)]
+pub struct Point<T> {
+    pub x: T,
+    pub y: T,
+}
+
+#[derive(Clone)]
+pub struct Size<T> {
+    pub width: T,
+    pub height: T,
+}
+
+impl Size<Length> {
+    pub const fn zero() -> Self {
+        Self {
+            width: Length::Pixels(0.),
+            height: Length::Pixels(0.),
+        }
+    }
+}
+
+impl Size<LengthOrAuto> {
+    pub const fn auto() -> Self {
+        Self {
+            width: LengthOrAuto::Auto,
+            height: LengthOrAuto::Auto,
+        }
+    }
+}
+
+#[derive(Clone)]
+pub struct Edges<T> {
+    pub top: T,
+    pub right: T,
+    pub bottom: T,
+    pub left: T,
+}
+
+impl Edges<Length> {
+    pub const fn zero() -> Self {
+        Self {
+            top: Length::Pixels(0.0),
+            right: Length::Pixels(0.0),
+            bottom: Length::Pixels(0.0),
+            left: Length::Pixels(0.0),
+        }
+    }
+}
+
+impl Edges<LengthOrAuto> {
+    pub const fn auto() -> Self {
+        Self {
+            top: LengthOrAuto::Auto,
+            right: LengthOrAuto::Auto,
+            bottom: LengthOrAuto::Auto,
+            left: LengthOrAuto::Auto,
+        }
+    }
+
+    pub const fn zero() -> Self {
+        Self {
+            top: LengthOrAuto::Length(Length::Pixels(0.0)),
+            right: LengthOrAuto::Length(Length::Pixels(0.0)),
+            bottom: LengthOrAuto::Length(Length::Pixels(0.0)),
+            left: LengthOrAuto::Length(Length::Pixels(0.0)),
+        }
+    }
+}
+
+#[derive(Clone, Copy)]
+pub enum Length {
+    Pixels(f32),
+    Rems(f32),
+    Percent(f32), // 0. - 100.
+}
+
+#[derive(Clone, Copy)]
+pub enum LengthOrAuto {
+    Length(Length),
+    Auto,
+}
+
+impl From<Length> for LengthOrAuto {
+    fn from(value: Length) -> Self {
+        LengthOrAuto::Length(value)
+    }
+}
diff --git a/crates/gpui/playground_macros/src/playground_macros.rs b/crates/gpui/playground_macros/src/playground_macros.rs
index 214bb7a3c0..ab56a2c8dc 100644
--- a/crates/gpui/playground_macros/src/playground_macros.rs
+++ b/crates/gpui/playground_macros/src/playground_macros.rs
@@ -20,7 +20,7 @@ pub fn tailwind_lengths(_attr: TokenStream, item: TokenStream) -> TokenStream {
         let function_name = format_ident!("{}_{}", function_signature.ident, length);
         output_functions.extend(quote! {
             pub fn #function_name(mut self) -> Self {
-                let #argument_name = #value;
+                let #argument_name = #value.into();
                 #function_body
             }
         });
@@ -66,7 +66,6 @@ fn fixed_lengths() -> Vec<(&'static str, TokenStream2)> {
         ("72", quote! { Length::Rems(18.) }),
         ("80", quote! { Length::Rems(20.) }),
         ("96", quote! { Length::Rems(24.) }),
-        ("auto", quote! { Length::Auto }),
         ("half", quote! { Length::Percent(50.) }),
         ("1_3rd", quote! { Length::Percent(33.333333) }),
         ("2_3rd", quote! { Length::Percent(66.666667) }),