Welcome to Strata CSS

Why layers?

Utility classes are convenient but notoriously hard to override predictably — the last rule in source order usually wins, not the one you actually meant. Strata sidesteps that by generating everything into native CSS cascade layers: base tokens, then components, then utilities, each split further by breakpoint. A utility always beats a component at the same breakpoint, and a higher breakpoint always beats a lower one — regardless of the order classes appear in your HTML. You stop fighting specificity and start relying on it.

Combined with JIT scanning — Strata only emits CSS for classes it actually finds in your source, no purge step, no unused utility bloat — you get the ergonomics of a utility-first workflow with the predictability of a component library.

Quick start

Install it:

npm install strata-css

Then run the interactive installer — it detects your framework (Next.js, Astro, Nuxt, SvelteKit, Laravel, Vite) and writes the entry CSS file, config, and build scripts for you:

npx strata-css init

Or wire it up by hand — add the three directives to an entry CSS file yourself. Strata replaces these with generated CSS at build time:

@strata base;
@strata components;
@strata utilities;

Use classes directly in your markup, no build step required to see them in your editor:

<button class="btn-primary px-4 py-2 rounded-pill shadow-sm">
  Get Started
</button>

Then build — Strata scans your files and generates only the CSS those classes need:

npx strata-css --build

The full Installation guide covers what init does under the hood, broken down by framework.