Strata CSS — CSS that works in layers with the cascade.
Strata CSS is a JIT CSS framework that combines component-driven design with utility-first flexibility — it scans your files and generates only the CSS you actually use, no purge step required.
What is Strata CSS?
Strata CSS is a modern JIT CSS framework that combines the best of component-driven development and utility-first flexibility. It gives you a powerful, atomic toolkit with the simplicity of writing CSS.
Companion Packages
Essential tools that work seamlessly with Strata.
All packages work standalone outside of Strata.
Chart
Three.js chart component. Works standalone or with Strata CSS.
npm i @strata-packages/chartWhat's New
The latest features shipped in Strata, in brief.
What's Next
A look at what we're building next.
Critical CSS extraction (critical config option)
First-paint performance on first visit. Design details (fold detection, layer integrity, CSP support) are still in the planning stage.
Lazy registry construction
Cold-build startup time.
Native browser popup primitives (<dialog>, Popover API)
Modal, popover, and offcanvas packages currently roll their own show/hide, backdrop, and focus handling via data-st-visible/data-st-backdrop and custom JS. Browsers now ship this natively (<dialog>/showModal(), ::backdrop, and the popover/popovertarget attributes) — adopting them means less JS to ship and better default accessibility, and covers the offcanvas slide-in-drawer case just as well as centered modals. Planned as a @strata-packages/modal, @strata-packages/offcanvas, and CSS update in the near future.
Editor extension (IntelliSense for Strata classes)
A free, local-only language server (à la PHP Intelephense) giving autocomplete, hover docs, and "this class doesn't exist" diagnostics for Strata class names in any editor via LSP — plus a compact machine-readable class manifest generated from the registry so AI assistants can look up real classes instead of guessing, hallucinating less and burning fewer tokens. Runs entirely on the user's machine; no hosted backend, no cost to ship or maintain beyond build time.
Built and monitored with
strata-css's real Socket score, checked on every build.
Live Stats
Versions Shipped
43
Continuously improved
Latest Version
v1.9.0
Released 36 days ago
Runtime Dependencies
3
Lean footprint
Frequently Asked Questions
Straight answers, pulled from the actual docs.
A JIT CSS framework that combines Bootstrap's component-first classes (btn-primary, card, navbar) with Tailwind's JIT scanning — it scans your source files for class names and generates only the CSS those classes actually need, nothing more.
No. Strata is JIT from the start — there's no separate purge/optimize pass. It scans your content globs at build time and only ever emits CSS for classes it actually finds (or ones you've explicitly safelisted).
Any file your content globs match — .html, .jsx, .tsx, .vue, .astro, .svelte, and beyond. Strata doesn't hardcode extensions; if a glob matches a file, it scans it, whatever the extension.
Yes — w-[320px], bg-[#f0f4f8], text-[1.125rem], shadow-[0_4px_20px_rgba(0,0,0,0.1)], and more. Anything not in the named registry can be expressed with square brackets.
Themes are set via a data-st-theme attribute (light, dark, or dim) on any ancestor element, usually <html>. Without it, Strata respects the visitor's prefers-color-scheme automatically.
No — interactive states (visible, collapsed, active, loading, disabled) are driven by data-st-* attributes directly in CSS. Component JavaScript (for things like modal/offcanvas open-close logic) ships as separate, optional @strata-packages/* packages you install only if you need them.
Yes — MIT licensed. The core strata-css package and every @strata-packages/* companion package are all published on npm under the same license.
Yes — utilities and components have breakpoint variants across sm, md, lg, xl, and xxl (e.g. px-md-4, d-lg-flex, text-md-center), and higher breakpoint layers always win over lower ones regardless of class order in your HTML.