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`
`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`
`content`	Supported

Sizing

Property	Values
`width`, `height`	Supported
`minWidth`, `maxWidth`	Supported
`minHeight`, `maxHeight`	Supported
`aspectRatio`	Supported

Spacing

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

Border & outline

Property	Values
`borderWidth` (`borderTopWidth`, `borderRightWidth`, `borderBottomWidth`, `borderLeftWidth`, `borderInlineWidth`, `borderBlockWidth`)	`thin`, `medium`, `thick`, `<length>`
`borderStyle`	`none`, `hidden`, `solid`, `dashed`, `dotted`, `double`, `groove`, `ridge`, `inset`, `outset`
`borderColor`	Supported
`borderRadius` (`borderTopLeftRadius`, `borderTopRightRadius`, `borderBottomRightRadius`, `borderBottomLeftRadius`)	Supported
`cornerShape` (`cornerTopLeftShape`, `cornerTopRightShape`, `cornerBottomRightShape`, `cornerBottomLeftShape`)	`round`, `squircle`, `bevel`, `scoop`, `notch`, `square`, `superellipse(<number>)`
`outlineWidth`	`thin`, `medium`, `thick`, `<length>`
`outlineStyle`	`none`, `hidden`, `solid`, `dashed`, `dotted`, `double`, `groove`, `ridge`, `inset`, `outset`
`outlineColor`	Supported
`outlineOffset`	Supported

Flexbox

Property	Values
`flex` (`flexBasis`, `flexGrow`, `flexShrink`)	Supported
`flexDirection`	Supported
`flexFlow`	Supported
`flexWrap`	`nowrap`, `wrap`, `wrap-reverse`
`justifyContent`, `justifyItems`, `justifySelf`	Supported
`alignContent`, `alignItems`, `alignSelf`	Supported
`placeContent`, `placeItems`, `placeSelf`	Supported

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
`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`
`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
`animationName`	Supported
`animationDuration`	Supported
`animationDelay`	Supported
`animationTimingFunction`	`linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, `step-start`, `step-end`, `steps()`, `cubic-bezier()`
`animationIterationCount`	Supported
`animationDirection`	Supported
`animationFillMode`	Supported
`animationPlayState`	Supported

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