Standard

Standard is TeaCSS’s atomic CSS preset. It supplies utility rules, conditions, theme variables, and a low-specificity preflight. It does not register component shortcuts. Enable Official separately when you want its structural class names.

Enable the preset

Declare Standard in the application’s CSS entry. The entry is the TeaCSS configuration; there is no teacss.config.* file.

@presets "standard";
@source "./src/**/*.{astro,ts,tsx,html}";
@teacss;

Install a build adapter and import or inject the generated stylesheet as described in Installation. TeaCSS scans source text for complete class tokens and emits only the matching rules. A token that exists only in a runtime-built string cannot be discovered by the scan; make its possible values static or declare them with @safelist.

Read a utility

The ordinary shape is property:value, followed by optional importance and conditions:

(property:value | keyword)[!](@condition)*

For example, p:4 uses the base spacing unit, while p:4x selects the named 4x spacing token. bg-color:teal-800@hover changes colour on hover; p:4!@md makes a responsive declaration important. Put a negative sign on the value, as in m-t:-2. Bracket arbitrary CSS values and use underscores for spaces: w:[calc(100%_-_2rem)]. A $name value reads a CSS variable; $name|fallback supplies its fallback.

The accepted value forms are prefix-specific. A fixed value shown for p is not automatically accepted by p-x; neither the numeric unit nor arbitrary-value support transfers between unrelated properties. Each category reference lists the actual prefixes and the documented values from the TeaCSS source vocabulary. The linked Storybook property page shows its complete generated token-to-CSS reference.

Standard has no bare shortcuts

Every Standard utility has a declared value. Use divide-y-width:1 for a default one-unit divider and space-x-reverse:on to reverse child spacing. Mask composition uses mask-g-linear:on, mask-g-radial:on, or mask-g-conic:on. Bare forms such as divide-y no longer generate rules. See Dividers, Spacing, and Gradients for supported values.

<div class="space-x:4 space-x-reverse:on">
  <span>First</span><span>Second</span>
</div>
<div class="divide-y-width:1">
  <span>First</span><span>Second</span>
</div>

Named structural classes such as stack-row and text-3x belong to Official; they require that separate preset.

Conditions and appearance

Append conditions to the complete token: p:4@md, bg-color:primary-200@hover, or p:4@md@hover. They combine as ordered AND conditions. Bases covers their selectors, mobile-first viewport breakpoints, containers, and root language matching.

Standard’s theme values are CSS custom properties. Register supported values with @custom, then select data-css-appearance="light" or "dark" on <html>. These root values select the color table and drive @light or @dark; OS preference uses the independent @os-light and @os-dark conditions. The canonical appearance attribute takes precedence over any explicitly configured mode alias. No .dark class alias is implicit.

The seven color roles are primary, neutral, focused, success, warning, failure, and general. Register candidate physical palettes through CSS role lists such as @primary "gray,blue";, and select one on <html data-css-primary="blue">. Descendant markers do not create nested palette or appearance scopes. See Palette for defaults, registration, and contrast checks.

Preflight and composition

Standard preflight supplies a low-specificity reset and theme-variable defaults. It normalizes headings, lists, links, media, code, tables, and form typography while retaining native control behavior and focus outlines. Because lists lose their visible markers, give a semantic marker-free list role="list" when needed for Safari/VoiceOver. Use utilities or Official’s prose family to give these elements an intentional visual presentation.

The default preflight: "on-demand" keeps the reset while limiting variables to referenced keys. Use preflight: true when CSS or inline styles read theme variables outside utility classes. preflight: false removes both the reset and default theme variables; account for that before using named tokens. The Installation and Classes guides cover application setup and class composition.

Standard owns no shortcuts. A reusable project fragment belongs in an application @shortcut; a component variant API belongs in a recipe. The Classes concept explains conflict merging. A cn merge checks token shape but does not prove that every value is valid, so the final emitted CSS remains the source of truth.

Property reference

These 37 populated categories cover 455 unique properties and 547 authored vocabulary rows in TeaCSS 0.7.1. Each property has a stable heading, exact prefix/value lists, a representative emitted declaration, and its interactive Storybook story. The empty upstream themes category is covered as root appearance and palette selection in Bases.

The reference is generated from the pinned authored vocabulary at source revision fa3709a4, then checked against the installed package version and the Storybook index ↗. Browser support notes appear where the upstream vocabulary marks a feature as advanced or experimental; verify those features in your target browsers.