Syntax

TeaCSS starts with a declaration-shaped token: property:value. The property is a TeaCSS rule prefix, not necessarily the literal CSS property name; for example, p:4 selects the Standard padding scale and d:flex emits display: flex. Consult the Standard property reference for supported prefixes and values.

p:4                 property + scale value
bg-color:red-500    color property + palette value
bg-color:red-600@hover
p:4!                important declaration

The Syntax Storybook reference ↗ colors each token segment using the language-service tokenizer.

Values

Standard properties accept their documented keywords, theme values, and arbitrary values. Square brackets preserve an explicit CSS value; underscores stand in for spaces where a class token cannot contain literal spaces.

m:-2                     negative spacing value
w:1.5                    fractional value
m:[10px]                 arbitrary length
grid-columns:[1fr_2fr]  arbitrary two-track value
font-size:[var(--size)]  CSS variable in an arbitrary value
text-color:#fff          direct color value
bg-color:red-500/50      color with alpha

Variables can also be named in the CSS entry and referenced with $:

$gap:2.5rem
m:$gap
m:$gap|1rem

|1rem is a fallback for the variable reference, not another class. Whether a value is valid still depends on the selected property rule. An arbitrary value is passed through to CSS; TeaCSS does not promise that every browser supports it.

Conditions and importance

The condition suffix begins with @. Multiple suffixes form an AND chain:

bg-color:red-500@hover
p:4@md
bg-color:red-500@dark@hover@lg
p:4@md@hover@::before
bg-color:red-500@!disabled

This single axis covers pseudo-classes (@hover, @focus-visible), pseudo-elements (@::before), responsive breakpoints (@md, @max-md), media conditions (@dark, @print), container queries (@container-sm), and relations (@group-hover, @peer-checked). It also supports selector pieces such as @>li and attribute forms such as @aria-[expanded=true]. Put ! after the value and before conditions: text-color:blue-600!@active.

Conditions are part of the generated selector or at-rule. They do not add client-side event listeners. @dark and @light read the resolved data-css-appearance on <html>; @os-dark and @os-light read the operating system instead. Set data-css-group or data-css-peer on the related element when using group or peer conditions. Use the Standard condition reference for exact forms.

Root-language conditions such as @lang-zh-CN match the complete <html lang> tag, ignoring ASCII case. zh, zh-CN, and zh-Hans remain different tags; local descendant lang attributes describe text, but do not switch these rules. For conditional translations, d:none!@!lang-zh hides content outside the matching root language.

Share a condition across utilities

A variant group keeps several declarations under the same condition:

{p:4;text-color:white;bg-color:red-500}@hover
{gap:2;d:flex}@container-sm

The semicolons separate complete utilities inside braces. Use a group when it clarifies a repeated condition; individual tokens are often easier to scan for a small component.

Next, browse the Palette or look up the exact property in Standard.