Bases

This is the Standard reference for bases. It follows the authored TeaCSS vocabulary at source revision fa3709a for package version 0.7.1. Each value list gives finite examples and named values for its prefixes. A bracket or variable example demonstrates that open form for the same prefix; the listed arbitrary literals are samples, not every accepted literal. Check the Storybook token reference ↗ for more examples, and do not infer support from a different prefix.

Conditions, responsive rules, and themes

Conditions follow the complete utility: bg-color:teal-800@hover, p:4@md, or p:4@md@hover. Multiple suffixes combine as ordered AND conditions. Put importance before them: p:4!@hover. Conditions can describe states, pseudo-elements, media queries, viewport breakpoints, containers, and selectors; the condition gallery ↗ shows the emitted selector or at-rule for each family.

Responsive conditions are mobile-first. A bare utility applies at every width; @md overrides from the md min-width upward. The default viewport breakpoints are xs 520px, sm 768px, md 1024px, lg 1280px, and xl 1440px. Use @max-md for a maximum-width condition and @container-sm for a container query. See the responsive gallery ↗.

Appearance and role palettes are selected globally on html. Register the physical palettes in the CSS entry, then select from those choices:

@presets "standard";
@primary "gray,blue";
@neutral "sage,slate";
@custom dark { --color-blue-500: #3b82f6; }

Set data-css-appearance="dark", data-css-primary="blue", and data-css-neutral="slate" on html; descendants inherit. The same attributes on a descendant do not select a local theme. Use text-color:primary-950 or bg-color:neutral-100 for role-based styling. Standard owns no bare shortcuts, and whole-theme @custom theme blocks are unsupported. The theme gallery ↗ explains appearance, palettes, and inheritance.

variable

Interactive example ↗. Prefixes: Complete tokens. Example: $gap:1rem. It emits --gap:1rem;.