Scoped long-form typographic defaults for semantic content. These classes belong to the opt-in Official preset. Add
@presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight
used alongside these structural shortcuts.
Classes
prose,prose-hans,prose-hant
Example
The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.
<article class="prose">
<h2>Getting started</h2>
<p>Write semantic HTML, then let the prose scope supply its rhythm.</p>
<pre><code>bun add -d teacss</code></pre>
<div data-teacss-article-exclude><button type="button">Try it</button></div>
</article>Variants and composition
prose supplies a centered 65ch measure and zero-specificity descendant
rules for headings, paragraphs, links, lists, code, tables, and media.
prose-hans and prose-hant are independent Simplified/Traditional Chinese
scopes with script-specific font, punctuation, spacing, ruby, and a 36em
measure; use a matching lang attribute. They do not translate text or
choose colors.
All scopes protect against long unbroken text with overflow-wrap:anywhere.
Utilities can override their rules, for example font-size:3x@_h1.
Conditions such as prose-hans@md and prose@dark work, but pseudo-element
scopes emit nothing. There are no size, color, or invert variants.
Behavior and accessibility
The scope styles semantic descendants while leaving colors to the consumer.
Mark embedded UI with data-teacss-article-exclude so prose descendant rules
do not alter it. Root font inheritance still applies, and a nested prose
class cannot reopen an excluded subtree. There is no not-prose alias.
For vertical Chinese, put writing-mode:vertical-rl within an accessible
horizontal scroll region. Code remains horizontal; choose
text-combine-upright:all for short upright digit sequences when appropriate.
Reference
See the interactive Storybook specimen. Continue to Radio or return to the Official preset overview.