TeaCSS is an atomic CSS toolkit designed for predictable output. Most tokens
read like CSS declarations: property:value. Add ! when a declaration
must be important, and append @ conditions for state, media, relations, or
selectors. A reviewer can infer what the build emits without memorizing a
large set of unrelated abbreviations.
<button class="p:4 bg-color:primary-200 text-color:primary-950 bg-color:primary-300@hover">
Save
</button>TeaCSS reads tokens from source and generates CSS at build time. It does not
render markup or add a component runtime. Install teacss and its adapter as
development dependencies; the separate @teacss/classes application dependency
provides cn and recipe to compose class strings at runtime.
One language, separate vocabularies
The core engine provides scanning, CSS directives, and token parsing. Each CSS entry then enables the presets it needs:
| Group | What it adds | Opt-in directive |
|---|---|---|
| Standard | Atomic property rules, theme, conditions, preflight | @presets "standard"; |
| Official | Named structural shortcuts and component patterns | @presets "official"; |
| Icons | Pure-CSS icon utilities | @presets "icons"; |
Official does not turn on Standard. Icons is likewise independent. Enable both when a snippet uses both vocabularies.
Learn in order
- Installation makes the CSS entry, scan, and build adapter explicit.
- Syntax explains declarations, values,
importance, and the shared
@condition axis. - Palette explains the seven semantic roles, physical palettes, and root appearance selection.
- Coverage separates W3C property coverage from what an individual project actually emits.
- Editors connects the language tooling to the same entry as the build.
- Classes covers the runtime
cnandrecipehelpers and their limits.
The Introduce Storybook story demonstrates the same mental model. Continue with Installation for the package setup.