Cookbook — Tailwind CSS · cb-tailwind

Owner directive (2026-07-10), canonical. "generate with the Holonprint Loop with gaussian splatting, lenis, tailwind, react, next … maybe now convertions from PADs PODs with more PADs over and even efficient PODs, such as html5 or whatever is lighter." [src: wiki/development/prompts-archive/by-topic/knowledge-management-and-concept-modeling.md:459]

Official docs

Our proven patterns

1. CSS custom properties as the engine↔DOM bridge. The splat engine writes --bg, --ink, --ink-body, --hairline per frame (write-on-change only); Tailwind utilities consume them (bg-[var(--bg)], arbitrary values) so DOM and canvas share one atmosphere. [src: HOS-Instance/packages/engine/src/engine/theme.ts:53]
2. Genome palette → theme tokens. A venture's theme.palette (e.g. Royal Orbit gold-royal: bg #080600, primary #d4af37, border rgba(212,175,55,0.2)) is the single source for Tailwind theme variables — never hardcode brand hexes in components. [src: wiki/organizations/instances/royalorbit/genome.json:352]
3. Data-attribute section states. Sections switch ink via [data-ink]-style attributes rather than per-element class churn — one attribute flip restyles a whole chapter section. [src: HOS-Instance/packages/engine/src/engine/contracts.ts:75]
4. Layout tokens from the genome. container_max_width, 12-col grid, spacing scale [4…96] and radius scale come from theme.layout — the generated venture surfaces stay regenerable. [src: wiki/organizations/instances/royalorbit/genome.json:379]
5. shadcn-tailwind-motion stack for WebApp properties — the genome's declared stack for districts surfaces; keep operational UI motion "reduced to functional transitions". [src: wiki/organizations/instances/royalorbit/genome.json:313]

Gotchas

• Per-frame styling must go through custom properties, never through class swaps — class churn forces style recalc on the whole tree (the RUN-015 perf fix removed a per-frame reflow [src: runs/RUN-015-autoloop.json:88]).
• Tailwind 4 is CSS-first configuration; keep the token layer in CSS @theme so the engine can write the same variables at runtime.

Budgets

Style-recalc and CLS budgets: bm-001-web-perf.

Composition

• uses: genome palette/layout tokens (schema-genome-spatial-strand)
• used-by: pb-001-spatial-site-loop (step 10) · bp-001-spatial-site · cb-react · cb-nextjs

See also

• biome — the theme background the tokens express