Responsive design

Every utility accepts a breakpoint or container prefix. Strata is mobile-first: unprefixed classes apply everywhere, prefixed ones from that width up.

Updated Aug 21, 2026 4 min read

Default breakpoints

Prefix	Min width	CSS
sm:	40rem (640px)	@media (width >= 40rem)
md:	48rem (768px)	@media (width >= 48rem)
lg:	64rem (1024px)	@media (width >= 64rem)
xl:	80rem (1280px)	@media (width >= 80rem)
2xl:	96rem (1536px)	@media (width >= 96rem)

Container queries

Mark a parent with container and size children by its width with @sm:, @md: and friends. Ideal for cards that appear in both sidebars and full-width grids.

HTML

<article class="container">
  <div class="stack @md:row gap-4">
    <img class="@md:w-40 radius-md" src="/cover.jpg" alt="" />
    <p class="text-sm @md:text-base">…</p>
  </div>
</article>

Custom breakpoints

strata.config.ts

export default defineConfig({
  theme: {
    breakpoints: { xs: "30rem", "3xl": "120rem" },
  },
});

Was this page helpful?

Last edited Aug 21, 2026 · docs/responsive-design.mdx