Tailwind in your Rust code — Crux + gpui

# Tailwind in your Rust code

If you have ever touched a web project, you may have seen this:

```html
<div class="flex flex-col items-center gap-6">
  <div class="text-3xl">42</div>
  <button class="px-4 py-2 rounded-md bg-slate-700">+</button>
</div>
```

That is **Tailwind CSS**: utility classes that each set one CSS property.
`flex` → `display: flex`. `gap-6` → `gap: 1.5rem`. And so on.

---
## And here is the gpui version

```rust
div()
    .flex()
    .flex_col()
    .items_center()
    .gap_6()
    .child(div().text_3xl().child("42"))
    .child(
        div()
            .px_4()
            .py_2()
            .rounded_md()
            .bg(rgb(0x2b3340))
            .child("+"),
    )
```

Same words. Same idea. Just method calls on a builder instead of CSS classes.

---
## Why this matters for the workshop

- If you already know Tailwind, you can **read most gpui layout code on sight**.
- If you do not, the **Tailwind docs** double as a gpui cheat sheet:
  <https://tailwindcss.com/docs>
- When you search for "how do I center this in gpui?" — search Tailwind first,
  then translate the class name into a method.

---
## Quick translation table

| Tailwind class      | gpui method            |
|---------------------|------------------------|
| `flex`              | `.flex()`              |
| `flex-col`          | `.flex_col()`          |
| `items-center`      | `.items_center()`      |
| `justify-center`    | `.justify_center()`    |
| `gap-6`             | `.gap_6()`             |
| `px-4 py-2`         | `.px_4().py_2()`       |
| `rounded-md`        | `.rounded_md()`        |
| `text-3xl`          | `.text_3xl()`          |
| `bg-slate-700`      | `.bg(rgb(0x2b3340))`   |

---
## Not 1:1

gpui is **inspired** by Tailwind, not a port of it. Some methods exist only in
one world. But the mental model — "compose layout from tiny atoms" — is the same.