-
Notifications
You must be signed in to change notification settings - Fork 4
Per-app Tailwind compilation for optimized renderer bundles #369
Copy link
Copy link
Open
Labels
enhancementImprovement to existing functionality or new capabilities.Improvement to existing functionality or new capabilities.pythonRelated to the Python SDK: components, actions, serialization.Related to the Python SDK: components, actions, serialization.rendererRelated to the TypeScript/React renderer.Related to the TypeScript/React renderer.
Description
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 HTMLKey decisions:
- Requires Node — Tailwind is the CSS engine, no reimplementation
- Input: serialized view trees +
extra_classesfor dynamic content (slots, LLM-generated views) - Output: self-contained HTML with minimal CSS
collect_css_classes()utility extracts classes from components for theextra_classesparam
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.
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
enhancementImprovement to existing functionality or new capabilities.Improvement to existing functionality or new capabilities.pythonRelated to the Python SDK: components, actions, serialization.Related to the Python SDK: components, actions, serialization.rendererRelated to the TypeScript/React renderer.Related to the TypeScript/React renderer.