on

Apply one state variant, or a whole stack of them, to a set of Tailwind classes — hover, dark, focus-visible and every other state key.

Import

import { on } from "tailess";

One state, or a stack

on takes a state key and a class value, and prefixes every class in that value — not the string as a whole.

on("hover", "bg-blue-600 text-white");  // → "hover:bg-blue-600 hover:text-white"on(["dark", "hover"], "bg-black");      // → "dark:hover:bg-black"

Pass an array of keys instead of a single one and the prefixes stack in the order you wrote them, which is how a compound variant such as dark:hover: is spelled.

Needs the build plugin

on builds its prefix at runtime, so hover:bg-blue-600 is never a literal string in your source for Tailwind to find. One line of config in Setup is what makes the CSS exist.

Which keys it takes

The keys are Tailwind's own state variants: 34 pseudo-classes, 10 pseudo-elements, 17 media and feature queries, 3 direction and transition variants, 2 descendant variants, and 36 group-* plus 36 peer-* parent and sibling states. The set is typed, so autocomplete is exhaustive and a typo cannot compile.

Breakpoints and max-* ranges are not state keys — those belong to responsive, until and between. The Keys page lists all 149 keys, states and breakpoints together.

Anything with a value of its own — data-*, aria-*, supports-*, has-*, not-*, an arbitrary min-[…] — is deliberately absent. Use data and aria for attribute variants, or withPrefix for anything else Tailwind accepts.

Each one is a shape of ss

Now that ss is variadic and nests, on is one of its forms too: a single key is one bucket, and a stack is a nested group. It is staying — it reads better where there is nothing but a state to express — but the translation is exact.

How a single-state and a stacked on call translate into the equivalent ss call
Helper	The ss form
on("hover", x)	ss({ hover: x })
on(["dark", "hover"], x)	ss({ dark: { hover: x } })

Groups, composition and nesting are covered in full on the ss page.