Skip to content

Per-app Tailwind compilation for optimized renderer bundles #369

@jlowin

Description

@jlowin

Context

With #362, the renderer now uses @tailwindcss/browser for runtime CSS generation — any Tailwind class works in css_class without a safelist. This is the right default for most users.

For advanced use cases (smaller bundles, offline support, faster first paint), a per-app compilation step could produce a renderer with only the CSS the app actually needs, without the ~60KB runtime compiler overhead.

Design

The idea: pass all possible views to a compiler that extracts the Tailwind classes used and runs Tailwind to generate exact CSS.

app = PrefabApp(
    view=my_view,
    extra_classes=collect_css_classes(dynamic_card_a, dynamic_card_b),
)
compiled_html = app.compile()  # runs Tailwind, produces optimized HTML

Key decisions:

  • Requires Node — Tailwind is the CSS engine, no reimplementation
  • Input: serialized view trees + extra_classes for dynamic content (slots, LLM-generated views)
  • Output: self-contained HTML with minimal CSS
  • collect_css_classes() utility extracts classes from components for the extra_classes param

Prior discussion

Designed in the #352 conversation. The "light" approach (runtime browser compiler) shipped in v0.15.0. This is the "heavy" approach for users who want optimized builds.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementImprovement to existing functionality or new capabilities.pythonRelated to the Python SDK: components, actions, serialization.rendererRelated to the TypeScript/React renderer.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions