Reference

Node Types

Every node is a container, text, or image. A node tree holds content and style only. Fonts, images, and output options are separate arguments to render, so a tree stays plain JSON and can come straight out of a structured-output schema.

All nodes accept these fields:

Prop

Type

Description

tagName?string

Element tag name used for HTML preset and selector matching

className?string

Element class name used for selector matching

id?string

Element id used for selector matching

attributes?NodeAttributes

Extra element attributes used for selector matching

preset?Style

Default HTML element styles (lowest priority); fromHtml and fromJsx fill it from tagName

tw?string

Tailwind classes (medium priority, overrides preset)

style?Style

Inline styling properties (highest priority)

lang?string

BCP-47 language tag; inherited by descendants, drives locale-aware shaping

dir?"ltr" | "rtl"

Text direction; inherited by descendants

Container

Groups other nodes and arranges them in a layout. Adds:

Prop

Type

Description

children?Node[]

Children nodes

Text

Displays text. Adds:

Prop

Type

Description

textstring

Text content to be displayed

Image

Displays a rasterized image or SVG. Adds:

Prop

Type

Description

srcstring | Uint8Array | ArrayBuffer

Source URL, persistent image key, or raw image bytes

width?number

Overwrite the intrinsic width of the image

height?number

Overwrite the intrinsic height of the image

Units

Font-relative units resolve the way they do in a browser. em and lh follow the element's own font size and line height, except on fontSize itself, where em follows the parent.

rem and rlh follow the root, and a node tree has no <html> element to be one. They resolve against the viewport's font size, which is 16px. In Rust, Viewport::with_font_size changes it; the JS render options do not expose it yet.

A fontSize on the outermost node does not rescale the rem and rlh lengths below it, so text-2xl on a root container leaves the Tailwind spacing scale where it is. Descendants still inherit that font size, and their em and lh lengths follow it.

The exception is a tree whose outermost node is an <html> element, which CSS does make the root. fromHtml keeps that element when the source is a full document, so <html style="font-size: 62.5%"> sets the rem basis for everything under it.

Style Properties

Properties use their camelCase names. Longhands are listed in parentheses. Supported means the property follows its CSS spec; a value cell instead lists the accepted keywords.

Declaration	Result
A name outside this list	Dropped without an error
A `--custom` property	Kept, and readable through `var()`
A listed name, unparsable value	Fails the whole style object

Layout & display

Property	Values
`display`	`none`, `flex`, `inline-flex`, `grid`, `inline-grid`, `block`, `inline-block`, `inline`, `flow-root`, `list-item`, `table`, `table-header-group`, `table-row-group`, `table-footer-group`, `table-row`, `table-cell`, `table-caption` ¹
`position`	`relative`, `absolute`, `static`, `fixed`
`direction`	Supported
`float`	Supported
`clear`	Supported
`zIndex`	Supported
`order`	Supported
`overflow` (`overflowX`, `overflowY`)	`visible`, `clip`, `hidden`
`objectFit`	Supported
`objectPosition`	Supported
`boxSizing`	Supported
`visibility`	`visible`, `hidden`
`contain`	`none`, `content` (= `layout style paint`), or a space-separated combination of `layout`, `style`, `paint` in any order, without duplicates ²
`content`	Supported
`listStyleType`	`none`, `disc`, `circle`, `square`, `decimal`, `decimal-leading-zero`, `lower-alpha`, `lower-latin`, `upper-alpha`, `upper-latin`, `lower-roman`, `upper-roman`, `<string>`
`listStyle` (`listStyleType`, `listStylePosition`, `listStyleImage`)	Supported
`captionSide`	`top`, `bottom` ¹
`borderCollapse`	`separate`, `collapse` ¹
`borderSpacing`	One or two `<length>` ¹
`tableLayout`	`auto`, `fixed` ¹

¹ Table layout uses a naive grid-based implementation, not the CSS table algorithm. See Tables for what carries over and where it drifts.

² size, inline-size, and strict cause a parse error because size containment is not implemented. style parses but has nothing to scope: Takumi has no author-facing counters, and list-item ordinals do not restart at the boundary.

Containment is a correctness feature here, not a performance hint. Takumi renders once, so there is no relayout to skip, and paint containment adds a stacking context and a clip layer per box. Applying it broadly makes a render slower, not faster.

Sizing

Property	Values
`width`, `height`	`<length-percentage>`, `auto`, `min-content`, `max-content`, `fit-content`, `fit-content(<length-percentage>)`, `stretch` ¹
`minWidth`, `minHeight`	`<length-percentage>`, `auto`
`maxWidth`, `maxHeight`	`<length-percentage>`, `none`, `auto` ²
`aspectRatio`	Supported

¹ A fit-content() limit that mixes lengths and percentages in calc() falls back to plain fit-content. This also applies to flexBasis.

² maxWidth and maxHeight accept auto as an alias for none for compatibility. The min/max properties reject intrinsic sizing keywords, fit-content(), and stretch.

Spacing

Property	Values
`padding` (`paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `paddingInline`, `paddingInlineStart`, `paddingInlineEnd`, `paddingBlock`)	Supported
`margin` (`marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginInline`, `marginInlineStart`, `marginInlineEnd`, `marginBlock`)	Supported
`inset` (`top`, `right`, `bottom`, `left`, `insetInline`, `insetBlock`)	Supported
`gap` (`columnGap`, `rowGap`)	Supported

Border & outline

Property	Values
`border` (`borderTop`, `borderRight`, `borderBottom`, `borderLeft`)	Supported
`borderWidth` (`borderTopWidth`, `borderRightWidth`, `borderBottomWidth`, `borderLeftWidth`, `borderInlineWidth`, `borderBlockWidth`)	`thin`, `medium`, `thick`, `<length>` ¹
`borderStyle` (`borderTopStyle`, `borderRightStyle`, `borderBottomStyle`, `borderLeftStyle`)	`none`, `hidden`, `solid`, `dashed`, `dotted`, `double`, `groove`, `ridge`, `inset`, `outset`
`borderColor` (`borderTopColor`, `borderRightColor`, `borderBottomColor`, `borderLeftColor`)	Supported
`borderRadius` (`borderTopLeftRadius`, `borderTopRightRadius`, `borderBottomRightRadius`, `borderBottomLeftRadius`)	Supported
`cornerShape` (`cornerTopLeftShape`, `cornerTopRightShape`, `cornerBottomRightShape`, `cornerBottomLeftShape`)	`round`, `squircle`, `bevel`, `scoop`, `notch`, `square`, `superellipse(<number>)`
`outline` (`outlineWidth`, `outlineStyle`, `outlineColor`)	Supported
`outlineWidth`	`thin`, `medium`, `thick`, `<length>` ¹
`outlineStyle`	`none`, `hidden`, `solid`, `dashed`, `dotted`, `double`, `groove`, `ridge`, `inset`, `outset`
`outlineColor`	Supported
`outlineOffset`	Supported ¹

¹ These snap to whole device pixels, like browsers do. Anything thinner than one device pixel draws as one. The rest rounds toward zero, so 1.5px draws as 1px.

Flexbox

Property	Values
`flex` (`flexBasis`, `flexGrow`, `flexShrink`)	Supported
`flexBasis`	`content`, plus every `width` value
`flexDirection`	Supported
`flexFlow`	Supported
`flexWrap`	`nowrap`, `wrap`, `wrap-reverse`, `balance`, `wrap balance`, `wrap-reverse balance`; pairs also accept the reverse order
`flexLineCount`	`<integer>` of 1 or more (minimum line count); values above 65535 are clamped to 65535
`justifyContent`, `alignContent`	`normal`, `stretch`, `space-between`, `space-around`, `space-evenly`; `start`, `end`, `flex-start`, `flex-end`, `center` optionally prefixed with `safe` or `unsafe` ¹
`justifyItems`, `justifySelf`, `alignItems`, `alignSelf`	`normal`, `baseline`, `stretch`; `start`, `end`, `flex-start`, `flex-end`, `self-start`, `self-end`, `center` optionally prefixed with `safe` or `unsafe` ¹
`placeContent`, `placeItems`, `placeSelf`	Supported
`WebkitBoxOrient`, `WebkitBoxPack`, `WebkitBoxAlign`	Legacy aliases for `flexDirection`, `justifyContent`, `alignItems`

¹ unsafe also parses before the other listed alignment values, such as normal. safe only works with the positional values listed after the semicolon. alignSelf and justifySelf reject auto. justifyContent and alignContent reject self-start and self-end.

Grid

Property	Values
`gridTemplateColumns`, `gridTemplateRows`, `gridTemplateAreas`	Supported
`gridAutoColumns`, `gridAutoRows`, `gridAutoFlow`	Supported
`gridColumn` (`gridColumnStart`, `gridColumnEnd`)	Supported
`gridRow` (`gridRowStart`, `gridRowEnd`)	Supported
`gridArea` (`gridRowStart`, `gridColumnStart`, `gridRowEnd`, `gridColumnEnd`)	Supported

Background & mask

Property	Values
`background` (`backgroundImage`, `backgroundColor`, `backgroundPosition`, `backgroundSize`, `backgroundRepeat`, `backgroundClip`, `backgroundOrigin`)	Supported
`backgroundImage`	`linear-gradient()`, `radial-gradient()`, `conic-gradient()`, `repeating-linear-gradient()`, `repeating-radial-gradient()`, `repeating-conic-gradient()`, `url()`
`backgroundColor`	Supported
`backgroundPosition`, `backgroundSize`, `backgroundRepeat`	Supported
`backgroundClip`, `backgroundBlendMode`	Supported
`backgroundOrigin`	`border-box`, `padding-box`, `content-box`
`mask` (`maskImage`, `maskSize`, `maskPosition`, `maskRepeat`)	Supported

Effects & transform

Property	Values
`boxShadow`	Supported
`opacity`	Supported
`filter`, `backdropFilter`	`<filter-function>`, `url()`
`mixBlendMode`	Supported
`isolation`	Supported
`transform`, `rotate`, `scale`, `translate`	2D only; `transform` accepts functions like `translateX()`, `scaleX()`
`transformOrigin`	Supported
`clipPath`	`<basic-shape>`
`clipRule`	Supported
`offsetPath`	`ray()`, `<basic-shape>` (`path()`, `circle()`, `ellipse()`, `polygon()`, `inset()`), `<coord-box>`; `url()` is not supported
`offsetDistance`	`<length-percentage>` (percentage of the path length)
`offsetRotate`	`auto`, `reverse`, `<angle>`, `auto <angle>`
`offsetAnchor`	`auto` (transform-origin) or `<position>`
`offsetPosition`	`normal`, `auto`, `<position>`
`offset`	Shorthand for the five `offset-*` longhands
`imageRendering`	`auto`, `smooth`, `pixelated`
`strokeLinejoin`	`miter`, `round`, `bevel`

Animation

Property	Values
`animation` (`animationName`, `animationDuration`, `animationDelay`, `animationTimingFunction`, `animationIterationCount`, `animationDirection`, `animationFillMode`, `animationPlayState`)	Supported
`animationTimingFunction`	`linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, `step-start`, `step-end`, `steps()`, `cubic-bezier()`

Fragmentation

Consumed by paged PDF output. Other backends ignore them.

Property	Values
`breakBefore`, `breakAfter`	`auto`, `page`
`breakInside`	`auto`, `avoid`
`boxDecorationBreak`	`slice`, `clone`
`widows`, `orphans`	`<integer>`

Typography

Property	Values
`color`	Supported
`fontFamily`	Font fallback supported
`fontSize`	Supported
`fontWeight`	Supported
`fontStyle`	Supported
`fontStretch`	Supported
`fontVariationSettings`	Supported
`fontFeatureSettings`	Supported
`fontVariant` (`fontVariantLigatures`, `fontVariantNumeric`, `fontVariantEastAsian`, `fontVariantCaps`, `fontVariantPosition`)	Supported ¹
`fontKerning`	`auto`, `normal`, `none` ¹
`fontSynthesis`	`none`, `weight`, `style`
`fontSynthesisWeight`	`auto`, `none`
`fontSynthesisStyle`	`auto`, `none`
`lineHeight`	Supported
`letterSpacing`	Supported
`wordSpacing`	Supported
`textIndent`	Supported
`textAlign`	Supported
`verticalAlign`	Supported
`textTransform`	`none`, `uppercase`, `lowercase`, `capitalize`
`textShadow`	Supported
`textOverflow`	`ellipsis`, `clip`, custom character
`lineClamp`	`none`, `<integer>`, `<integer> <block-ellipsis>`
`maxLines`	`none`, `<integer>`
`blockEllipsis`	`none`, `auto`, `<string>`
`continue`	`normal`, `collapse`
`overflowWrap`	Supported
`wordBreak`	`normal`, `break-all`, `keep-all`, `break-word`
`whiteSpace`	`normal`, `nowrap`, `pre`, `pre-wrap`, `pre-line`, `<text-wrap-mode> <white-space-collapse>`
`whiteSpaceCollapse`	`preserve`, `collapse`, `preserve-spaces`, `preserve-breaks`
`tabSize`	`<number>` (preserved tabs expand to that many spaces; no `<length>`, no tab stops)
`textWrap` (`textWrapMode`, `textWrapStyle`)	`wrap`, `nowrap`; `auto`, `balance`, `pretty`
`textFit`	Supported
`textDecoration` (`textDecorationLine`, `textDecorationStyle`, `textDecorationColor`, `textDecorationThickness`)	`underline`, `line-through`, `overline`; `solid`
`textDecorationSkipInk`	`auto`, `none`
`textUnderlineOffset`	`auto`, `<length-percentage>`
`textUnderlinePosition`	`auto`, `from-font`, `under`
`WebkitTextStroke` (`WebkitTextStrokeWidth`, `WebkitTextStrokeColor`, `WebkitTextFillColor`)	Supported

¹ fontVariant* and fontKerning map to OpenType features applied before fontFeatureSettings, so an explicit setting wins on a tag conflict. alternates and emoji are not supported. Features apply only when the font ships them; unlike browsers, missing ones are not synthesized (for example, small capitals from scaled capitals).

Reference

On this page