Bases

This is the Standard reference for bases. The vocabulary comes from the teacss-ts Storybook at revision 9de266d for package version 0.10.11. 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;.