Skip to content
Teasim
TeaCSS documentation
StyleSheet

TeaCSS

Build a shared styling language with TeaCSS utilities, theme tokens, structural shortcuts, and pure-CSS icons.

TeaCSS is the styling foundation behind StyleSheet. It scans your source, compiles the classes you use, and lets Astro, React, and other web surfaces share one token and utility language. The application owns the CSS entry and chooses its presets explicitly; TeaCSS itself renders no markup or interaction.

Start with the core

  1. Installation connects TeaCSS to Astro, Vite, or the standalone CLI and shows where the CSS entry belongs.
  2. Concepts teaches the token syntax, palette, source coverage, editor tooling, and runtime class composition.
  3. Standard documents the atomic preset, conditions, preflight, and every authored property/value group. Its 37 category pages link directly to the interactive Storybook examples.

The smallest Standard entry looks like this:

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

The class p:4 is a TeaCSS utility. The Standard preset determines what it means and the source scan decides whether its CSS is emitted. See Syntax before translating classes from another utility framework: TeaCSS uses a colon between property and value, and conditions follow the complete utility.

Add optional groups deliberately

  • Official is a separate preset of structural class names for controls, layouts, and component parts. It does not enable Standard or provide JavaScript behavior. Its Commons and Components are independent documentation groups.
  • Icons is a separate pure-CSS preset. Its Logo, Lucide, Carbon, Flagpack, and Crypto collection guides explain icon syntax and link to searchable Storybook catalogues. TeaCSS Icons are distinct from the @teasim/icons package.

For a component application, use @presets "standard,icons,official"; in one CSS entry and remove unused groups explicitly. Each preset has its own contract and examples, so the reference stays clear about which package owns a class. Official structural classes commonly compose with Standard utilities; enable both when using them together.

What this documentation covers

These pages track TeaCSS 0.7.1 and source revision fa3709a4. Use the live Storybook for interactive examples. The Standard reference covers 455 unique properties and 547 authored vocabulary rows in this release. The Official and Icons guides cover their own Storybook groups without mixing those shortcuts or icon tokens into Standard.

Accessible structure, labels, keyboard behavior, and application state remain the responsibility of the product or component that uses the CSS. For Astro elements and page sections, see Astra and Aster.