Utility-first fundamentals

Compose interfaces from small, single-purpose classes. Strata groups them into predictable layers so utilities always win over component styles — no specificity battles.

Updated Sep 10, 2026 5 min readConcepts

Quick reference: overflow

Class	Properties
overflow-auto	overflow: auto;
overflow-hidden	overflow: hidden;
overflow-clip	overflow: clip;
overflow-scroll	overflow: scroll;
overflow-x-auto	overflow-x: auto;
overflow-y-auto	overflow-y: auto;
scroll-fade-y	mask-image: linear-gradient(transparent, #000 1rem, …);

Basic usage

Showing content that overflows

Use overflow-visible to let content spill out of its box. It's the default, so you mostly need it to undo overflow-hidden at a breakpoint.

HTML

React

<div class="overflow-visible radius-lg surface-raised p-4">
  <img class="-mt-10 size-20 radius-full" src="/avatar.png" alt="" />
</div>

Scrolling if needed

overflow-auto adds scrollbars only when content is larger than the box. Pair it with scroll-fade-y for a soft edge that hints at more content.

HTML

<ul class="stack gap-2 max-h-64 overflow-y-auto scroll-fade-y">
  <li class="row gap-3">…</li>
</ul>

How layers work

Every class lives in one of three cascade layers. Later layers always win, regardless of selector specificity or source order.

Layer	Contains	Example
strata.base	Resets, element defaults	h1, a, :focus-visible
strata.components	Recipes and primitives	.btn, .card, .stack
strata.utilities	Single-purpose classes	.p-4, .text-muted

Hover, focus and other states

Prefix any utility with a state variant: hover:, focus-visible:, aria-pressed:, data-open: or group-hover:. Variants stack left to right — md:hover:bg-brand.

Responsive designBreakpoints and container queries Dark modeColour schemes without duplicate classes

Was this page helpful?

Last edited Sep 10, 2026 · docs/utility-first.mdx