# `PhiaUiDesign.Canvas.Layout`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phiaui_design/canvas/layout.ex#L1)

Converts node layout properties to Tailwind CSS v4 classes.

Layout properties on frame nodes (`:layout`, `:gap`, `:padding`, etc.)
are translated to their Tailwind equivalents. Non-standard values use
arbitrary value syntax (e.g., `gap-[13px]`).

# `has_layout?`

```elixir
@spec has_layout?(map()) :: boolean()
```

Check if a node has any layout properties set.

# `layout_fields`

```elixir
@spec layout_fields() :: [atom()]
```

List of layout field names

# `to_classes`

```elixir
@spec to_classes(map()) :: String.t()
```

Convert a node's layout properties to a Tailwind class string.

Accepts a `Node` struct or a map with layout keys.
Returns an empty string if no layout properties are set.

## Examples

    iex> Layout.to_classes(%{layout: :vertical, gap: 16})
    "flex flex-col gap-4"

    iex> Layout.to_classes(%{layout: :horizontal, padding: [8, 16, 8, 16]})
    "flex flex-row pt-2 pr-4 pb-2 pl-4"

    iex> Layout.to_classes(%{width: :fill, height: :hug})
    "w-full h-fit"

---

*Consult [api-reference.md](api-reference.md) for complete listing*