Optimizing for production

Strata only emits the utilities you use, so a typical app ships under 9 kB of CSS after compression. A few settings shave off the rest.

Updated Aug 30, 2026 3 min readPerformance

What to expect

Project	Raw CSS	Brotli	Build time
Marketing site (24 pages)	31.4 kB	6.2 kB	0.41 s
SaaS dashboard (180 routes)	58.9 kB	8.7 kB	1.12 s
Design system docs	74.2 kB	10.4 kB	1.38 s

Production builds minify automatically when NODE_ENV=production. Enable mergeLayers to collapse duplicate selectors across chunks.

strata.config.ts

export default defineConfig({
  build: {
    mergeLayers: true,
    target: ["chrome111", "safari16.4", "firefox128"],
    sourcemap: false,
  },
});

Classes built from strings at runtime can't be detected. List them explicitly, or better, map props to complete class names.

Prefer

Avoid

const tone = { info: "bg-info", danger: "bg-danger" } as const;
<span className={tone[status]} />

Was this page helpful?

Last edited Aug 30, 2026 · docs/optimizing-for-production.mdx