Skip to content
TeaCSS documentation

Coverage

Understand TeaCSS Standard property coverage and diagnose classes that emit no CSS.

Coverage has two different questions: does Standard offer a writing form for this CSS property? and did this project’s build discover and emit that form? Treat them separately. The W3C coverage matrix is the maintained property-by-property index for the first question. It links each indexed property to its specification and shows TeaCSS’s primary syntax.

Matrix status Meaning
Provided A direct rule, alias, composite utility, or compatibility output exists. Read the relation and syntax notes.
Planned Approved in the matrix but not implemented in this package snapshot.
Not provided Intentionally absent, often a shorthand, legacy property, or low-evidence draft entry.
Pending The coverage decision has not been finalized.

“Provided” does not always mean the TeaCSS token exactly matches a W3C property name. A composite utility may emit several declarations; an alias may expose the same effect under a different prefix. The Standard reference gives the actual forms to write. The Storybook matrix snapshot is dated 2026-07-15; use its live version for newer coverage decisions.

Why a class can have no style

TeaCSS generates rules only for tokens found in scanned files and understood by an enabled preset. For example, with only @presets "standard";, an icon token has no rule. A misspelled value can also look like a TeaCSS token but fail to generate:

text
p:4                  Standard rule, when scanned and Standard is enabled
icon:lucide-sun      Icons rule, only when Icons is enabled
p:does-not-exist     No Standard rule for this value

If a class survives in HTML but has no effect, check in this order:

  1. Does the CSS entry load, and does its @source include the file containing the complete, literal token?
  2. Is the owning preset enabled (standard, official, or icons)?
  3. Does the prefix and value appear in that preset’s reference or Storybook?
  4. Did the build emit a CSS rule, and is another CSS rule overriding it?

cn() and recipe() compose class strings; they do not validate values or force the compiler to emit CSS. For example, cn("p:4", "p:invalid") can return "p:invalid" while the invalid token still generates no rule. See Classes for that boundary and Installation for the scan and entry setup.