Breakpoints

They are named after the width they hold, in pixels, so the variant tells you where it fires without a table to translate it. The steps widen as the screens do — the difference between a phone and a small tablet matters more than the difference between two large desktops.

Changing them, and adding your own

Declare a @theme block after the kit. Naming an existing breakpoint moves it; naming a new one adds a variant that behaves like the built-in ones everywhere, including on the grid utilities.

/* your own theme file, imported after the kit */
@theme {
  --breakpoint-1600: 1600px;
}

To start from nothing instead, clear the set with initial and declare only what you want. This drops Tailwind's defaults as well, so anything left in your markup that named one stops generating.

@theme {
  --breakpoint-*: initial;
  --breakpoint-sm: 40rem;
  --breakpoint-lg: 64rem;
}

Usage

The breakpoints are declared in the same @theme block as the colours and the type scale, which is what makes them variants on every utility — the kit's own margo-col classes included. A responsive layout is the columns an element spans at each width, written where the element is placed.

<Card className="margo-col-span-12 768:margo-col-span-6 1080:margo-col-span-4">…</Card>

The components declare none of their own

Nothing in the kit carries a media query. No component changes its layout at a width it chose for you, no padding halves itself on a phone, and there is no hidden point where a Button decides to become something else. The single exception is prefers-reduced-motion, which shortens the layer timings — an accessibility setting rather than a size.

That is deliberate, and it follows from the same rule as everything else here: the component owns the surface, the call site owns the layout. A card that collapsed to one column on its own would be right in the screen it was designed against and wrong in the next one, and you would be overriding a media query with another media query instead of writing the one you meant.

Moving a step is wider than it looks

The variant keeps its name while the width underneath it changes, so 900: firing at 960px is a step every existing call site takes without saying so. Adding is the safer half of this.

Tailwind's own steps still work

The kit adds its breakpoints rather than replacing the default ones, so md: and lg: keep working and some of the numbers coincide with them exactly. Pick one vocabulary and stay with it: mixing 768: and md: in the same codebase gives you two names for one width and no way to grep for either.

Where the layout actually happens

The grid is fluid between the steps and capped at its maximum width, so the breakpoints handle the changes of shape rather than the changes of size.