responsive · until · between

import { responsive, until, between } from "tailess";

responsive — mobile-first

responsive takes a base class value plus a map of min-width overrides. The base applies at every width; each breakpoint key applies from that width up.

responsive("text-sm", { md: "text-lg", xl: "text-2xl" });// → "text-sm md:text-lg xl:text-2xl"

A breakpoint you leave out emits nothing, so a component that only changes once stays a one-key call. The five keys are Tailwind's own — sm, md, lg, xl and 2xl.

until and between — max-width ranges

responsive only goes upward. untilis the complement: it prefixes classes with Tailwind's max-* variant, so they apply only below a breakpoint.

between stacks the two — a min-width variant and a max-* one — for a band that includes the lower breakpoint and excludes the upper.

until("md", "hidden");          // → "max-md:hidden"      (below md)between("sm", "lg", "block");   // → "sm:max-lg:block"    (sm up to, not incl., lg)

The ranges use the same five names, spelled max-sm through max-2xl. Keys lists every key ss accepts, breakpoints and ranges included.

Each one is a shape of ss

Now that ss is variadic and nests, every helper here is one of its forms. They are staying — each reads better on its own, and an unused one costs nothing — but if you would rather write everything one way, here is the translation.

Reach for a helper when a component varies along one axis, and for ss when base classes, breakpoints and states all belong in the same call.