Overview

Every tailess helper at a glance — what each one does, which ones need the build plugin, and which are pure literal pass-throughs.

Every helper

Every helper is a plain function. There is no factory, no instance and no config object — you import the ones you need and call them.

Import

import { ss, cn, responsive, on, until, between, data, aria, match, withPrefix } from "tailess";

Every tailess helper, what it does, and whether it needs the build plugin.
Helper	What it does	Needs the plugin
`ss`	Groups, composition, nesting — the whole `className`	Yes
`cn`	Join and merge, nothing else	No
`responsive`	A base plus min-width overrides	Yes
`until` / `between`	Max-width ranges	Yes
`on`	One state variant, or a stack of them	Yes
`data` / `aria`	Attribute variants, for headless UI	Yes
`match`	Exhaustive lookup by a discriminant	No
`withPrefix`	Any variant tailess does not model as a key	Yes

Because ss is variadic and nests, cn, responsive, until, between and on are each one of its forms. They stay because each reads better on its own, and an unused one costs nothing.

data, aria and withPrefix are not forms of it: a variant that carries a value of its own — data-*, aria-*, supports-* — is deliberately absent from the key set, which is what those three exist to reach. match is not one either, because it selects by a discriminant rather than by a variant.

Which helpers need the plugin

A helper needs the plugin when it builds a variant prefix at runtime. The finished class never appears in your source, so Tailwind — which generates CSS by scanning for literal class strings — never sees it and emits no rule for it.

cn and match are the two exceptions. They only ever pass through classes you already wrote as literals, so Tailwind finds those by itself and there is nothing for a build step to bridge.

Note

The unprefixed base classes work without the plugin for the same reason. Anything carrying a variant prefix does not — Setup is the one line of config that registers the plugin, and How it works covers what it does to your build.

Also exported

Alongside the helpers, tailess exports the breakpoint table and the key lists it is typed against, so the same values are available outside a className.

Values

import { screens, screenKeys, maxScreenKeys, stateKeys } from "tailess"; window.matchMedia(`(min-width: ${screens.md})`).matches;  // "48rem"

See Keys for the full list behind screenKeys, maxScreenKeys and stateKeys.

Nine types are exported as well, for typing your own props and helpers:

Types

import type {  SsInput,  SsValue,  SsArg,  SsKey,  ScreenKey,  MaxScreenKey,  StateKey,  ResponsiveMap,  ClassValue,} from "tailess";

Those are type-only exports, so they cost nothing at runtime. Reach for them when you type a prop that forwards a class value onwards, or a helper of your own that builds a group before handing it to ss.