Tailwind classes · Inkoxide

Classes are compiled by the real Tailwind v4 compiler: every class is turned into CSS by Tailwind and the CSS is mapped to the engine's style properties. A class works when every CSS property it produces has an engine equivalent. The table below lists the families that are supported and tested; each example is a unit test.

Lengths are points: 1rem = 12pt, 1px = 0.75pt. p-4 is 12pt, text-base 12pt. Use arbitrary values for exact sizes: text-[10.5pt], p-[5pt_7pt].
Arbitrary lengths read as in the style prop: any absolute unit, calc(), and em (the element's font size; in text-[…], the inherited one), vw and vh (1% of the page's width and height): w-[2em], h-[10vh].
Arbitrary values ([…]) work for every supported property.
In development an unsupported class throws, naming the class and the CSS property; in production it is logged once and ignored.
Text utilities on Page, View, Cell or Row are inherited by the text inside.

Layout

Utilities	Engine property	Example → result	Notes
`flex`, `grid`, `hidden`	`display`	`flex` → `{"display":"flex"}`	`View` is already `flex` + column. `block`, `inline` and `contents` are not supported.
`float-left`, `float-right`, `float-none`, `clear-left`, `clear-right`, `clear-both`, `clear-none`	`float`, `clear`	`float-left` → `{"float":"left"}`	In a column `View`, a `Page` or a table cell (not in a row or a grid, and not on a cell itself): text after a float wraps beside it, boxes after it are narrowed beside it or moved below it. `float-start`, `float-end`, `clear-start` and `clear-end` are not supported.
`overflow-hidden`, `overflow-visible`, `overflow-clip`	`overflow`	`overflow-hidden` → `{"overflow":"hidden"}`
`align-top`, `align-middle`, `align-bottom`	`verticalAlign` (on `Cell`)	`align-top` → `{"verticalAlign":"top"}`

Flexbox

Utilities	Engine property	Example → result
`flex-row`, `flex-col`, `flex-row-reverse`, `flex-col-reverse`	`flexDirection`	`flex-row` → `{"flexDirection":"row"}`
`flex-wrap`, `flex-nowrap`, `flex-wrap-reverse`	`flexWrap`	`flex-wrap` → `{"flexWrap":"wrap"}`
`flex-1`, `flex-auto`, `flex-initial`, `flex-none`	`flexGrow`, `flexShrink`, `flexBasis`	`flex-1` → `{"flexGrow":1,"flexShrink":1,"flexBasis":"0%"}`
`grow`, `grow-0`, `shrink`, `shrink-0`, `basis-*`	`flexGrow`, `flexShrink`, `flexBasis`	`grow` → `{"flexGrow":1}`
`justify-*`	`justifyContent`	`justify-start` → `{"justifyContent":"flex-start"}`
`items-*`	`alignItems`	`items-start` → `{"alignItems":"flex-start"}`
`self-*`	`alignSelf`	`self-auto` → `{"alignSelf":"auto"}`
`content-*`	`alignContent`	`content-start` → `{"alignContent":"flex-start"}`
`gap-`, `gap-x-`, `gap-y-*`	`rowGap`, `columnGap`	`gap-4` → `{"rowGap":12,"columnGap":12}`

Grid

Utilities	Engine property	Example → result	Notes
`grid-cols-N`, `grid-cols-[…]`, `grid-rows-N`, `grid-rows-[…]`	`gridTemplateColumns`, `gridTemplateRows`	`grid-cols-2` → `{"gridTemplateColumns":[{"repeat":2,"tracks":[{"min":0,"max":"1fr"}]}]}`	`grid-cols-3` is `repeat(3, minmax(0, 1fr))`, as in CSS.
`col-span-`, `col-start-`, `col-end-`, `row-span-`, `row-start-`, `row-end-`	`gridColumn`, `gridRow`	`col-span-2` → `{"gridColumn":{"span":2}}`	A start and an end line replace a span, as in CSS: `col-span-3 col-start-1 col-end-3` is 1 / 3.
`grid-flow-`, `auto-cols-`, `auto-rows-*`	`gridAutoFlow`, `gridAutoColumns`, `gridAutoRows`	`grid-flow-col` → `{"gridAutoFlow":"column"}`
`justify-items-`, `justify-self-`	`justifyItems`, `justifySelf`	`justify-items-center` → `{"justifyItems":"center"}`

Spacing

Utilities	Engine property	Example → result	Notes
`p-`, `px-`, `py-`, `pt-`, `pr-`, `pb-`, `pl-`, `ps-`, `pe-*`	`padding`	`p-4` → `{"paddingTop":12,"paddingRight":12,"paddingBottom":12,"paddingLeft":12}`	Arbitrary values take one to four lengths: `p-[5pt_7pt]`.
`m-`, `mx-`, `my-`, `mt-`, `mr-`, `mb-`, `ml-`, `-m-`, `m-auto`	`margin`	`m-2` → `{"marginTop":6,"marginRight":6,"marginBottom":6,"marginLeft":6}`

Sizing

Utilities	Engine property	Example → result	Notes
`w-`, `h-`, `size-*`	`width`, `height`	`w-full` → `{"width":"100%"}`	Fractions become percentages. `w-fit`, `w-min` and `w-max` are not supported.
`min-w-`, `max-w-`, `min-h-`, `max-h-`	`minWidth`, `maxWidth`, `minHeight`, `maxHeight`	`min-w-0` → `{"minWidth":0}`
`w-screen`, `h-screen`, `min-w-screen`, `min-h-screen`, `max-w-screen`, `max-h-screen`	`width`, `height`, `minWidth`, `minHeight`, `maxWidth`, `maxHeight`	`w-screen` → `{"width":595.28}`	The page's width or height (`100vw`, `100vh`); the examples are on an A4 page. `dvh`, `svh`, `lvh` (`h-dvh`) and `dvw`, `svw`, `lvw` are not supported.
`aspect-*`	`aspectRatio`	`aspect-square` → `{"aspectRatio":1}`

Position

Utilities	Engine property	Example → result	Notes
`relative`, `absolute`	`position`	`relative` → `{"position":"relative"}`	`fixed` and `sticky` are not supported. To repeat an element on every page, use `Header`/`Footer`, or the `fixed` prop with `absolute`.
`inset-`, `inset-x-`, `inset-y-`, `top-`, `right-`, `bottom-`, `left-*`	`inset`	`inset-0` → `{"insetTop":0,"insetRight":0,"insetBottom":0,"insetLeft":0}`

Visual

Utilities	Engine property	Example → result	Notes
`bg-*` (colour, `/alpha`, arbitrary)	`backgroundColor` (page background on `Page`)	`bg-white` → `{"backgroundColor":[1,1,1,1]}`	Tailwind colours are oklch; they are converted to sRGB and clamped.
`opacity-*`	`opacity`	`opacity-50` → `{"opacity":0.5}`
`rotate-`, `-rotate-`	`rotate`	`rotate-45` → `{"rotate":45}`
`translate-`, `translate-x-`, `translate-y-`, `-translate-`	`transform` (`translate`)	`translate-x-2` → `{"translate":[6,0]}`	Percentages are of the element's own box, as in CSS.
`scale-`, `scale-x-`, `scale-y-*`	`transform` (`scale`)	`scale-110` → `{"scale":[1.1,1.1]}`
`skew-`, `skew-x-`, `skew-y-*`, `transform-[…]`, `transform-none`	`transform`	`skew-x-12` → `{"transform":[{"skew":[12,0]}]}`	Composed in CSS order: translate, rotate, scale, then `transform`. 3D functions (`rotate-x-`, `perspective-`) are not supported.
`origin-*`	`transformOrigin`	`origin-center` → `{"transformOrigin":["50%","50%"]}`
`z-`, `-z-`, `z-auto`	`zIndex`	`z-10` → `{"zIndex":10}`	Paint order among siblings; not on table cells.
`object-contain`, `object-cover`, `object-fill`, `object-none`	image `fit`	`object-contain` → `{"objectFit":"contain"}`	On `Image` and `ImageBackground` only. The `fit` prop wins over it.
`object-left`, `object-right`, `object-top`, `object-bottom`, `object-center`, `object-left-top` (and the other corners, either order), `object-[…]`	image `objectPosition`	`object-left-top` → `{"objectPosition":{"x":"left","y":"top"}}`	On `Image` and `ImageBackground` only: places a `contain`, `cover` or `none` image in its box. Arbitrary values take one or two keywords, lengths or percentages; edge offsets (`right_1rem_top`) are not supported.

Border

Utilities	Engine property	Example → result	Notes
`border`, `border-N`, `border-{t,r,b,l,x,y}`, `border-{t,r,b,l,x,y}-N`, `border-0`, `border-none`	`borderWidth`	`border` → `{"borderStyle":"solid","borderTopWidth":0.75,"borderRightWidth":0.75,"borderBottomWidth":0.75,"borderLeftWidth":0.75}`	Without a colour utility the border takes the text colour (CSS `currentColor`), as in the browser.
`border-{colour}`, `border-{t,r,b,l,x,y}-{colour}`	`borderColor`	`border-neutral-300` → `{"borderTopColor":[0.831444,0.831444,0.831444,1],"borderRightColor":[0.831444,0.831444,0.831444,1],"borderBottomColor":[0.831444,0.831444,0.831444,1],"borderLeftColor":[0.831444,0.831444,0.831444,1]}`
`border-solid`, `border-dashed`, `border-dotted`, `[border-top-style:…]`	`borderStyle`	`border-solid` → `{"borderStyle":"solid"}`	Tailwind has no per-side style utilities; use an arbitrary property (or the `style` prop) for one side.
`rounded`, `rounded-`, `rounded-{t,r,b,l,s,e}-`, `rounded-{tl,tr,br,bl,ss,se,es,ee}-*`	`borderRadius`	`rounded` → `{"borderRadius":3}`	Logical corners (`s`, `e`) assume left-to-right. Elliptical corners are not supported.
`border-collapse`, `border-separate`, `border-spacing-*`	`borderCollapse`, `borderSpacing` (on `Table`)	`border-collapse` → `{"borderCollapse":"collapse"}`

Text

Utilities	Engine property	Example → result	Notes
`align-super`, `align-sub`, `align-baseline`	run `verticalAlign` (on `Text`)	`align-super` → `{"verticalAlign":"super"}`	Raises or lowers the baseline by the font's superscript or subscript offset; the size stays: add a smaller `text-*`.
`align-text-top`, `align-text-bottom`, and `align-top`, `align-middle`, `align-bottom`	run `verticalAlign` (on an `Image` in a `Text`)	`align-text-top` → `{"verticalAlign":"textTop"}`	Places an image in its line: its top at the font's ascender, its bottom at the descender, its top or bottom at the line's, or its middle half an x-height above the baseline.
`text-{size}`, `text-[11pt]`, `text-{size}/{leading}`	run `size` (and `lineHeight` when the size utility sets one)	`text-xs` → `{"fontSize":9,"lineHeight":{"mult":1.333333}}`	`text-base` is 12pt. Named sizes also set Tailwind's line height; `leading-*` overrides it.
`font-sans`, `font-serif`, `font-mono`, `font-display`, `font-[…]`	run `font` (through the FontRegistry)	`font-sans` → `{"fontFamily":["Inter","Noto Sans"]}`	The first family of the stack that is registered wins. No serif face is bundled, so the default theme sets `font-serif` to Noto Sans: register a serif and set `--font-serif` in your theme.
`font-thin` … `font-black`, `font-[650]`	run `font` (weight)	`font-light` → `{"fontWeight":300}`	A missing weight falls back to the nearest registered one.
`italic`, `not-italic`	run `font` (style)	`italic` → `{"fontStyle":"italic"}`
`text-{colour}`, `text-[#…]`	run `color`	`text-black` → `{"color":[0,0,0,1]}`
`text-left`, `text-center`, `text-right`, `text-justify`, `text-start`, `text-end`	`textAlign`	`text-left` → `{"textAlign":"left"}`
`leading-*`	`lineHeight`	`leading-none` → `{"lineHeight":{"mult":1}}`	Unitless values are multipliers; lengths (`leading-6`) are divided by the text size. Without any `leading-*`, the engine uses the font's natural line height (no preflight 1.5).
`tracking-*`	run `letterSpacing`	`tracking-wide` → `{"letterSpacing":{"em":0.025}}`
`font-features-[…]`	run `fontFeatures`	`font-features-['tnum','ss01']` → `{"fontFeatureSettings":{"tnum":1,"ss01":1}}`	CSS `font-feature-settings`, with `_` for spaces: `font-features-['tnum','ss01']`.
`tabular-nums`, `proportional-nums`, `lining-nums`, `oldstyle-nums`, `slashed-zero`, `ordinal`, `diagonal-fractions`, `stacked-fractions`, `normal-nums`	run `fontFeatures`	`tabular-nums` → `{"fontVariantNumeric":{"tnum":1}}`	The OpenType features of CSS `font-variant-numeric` (`tnum`, `pnum`, `lnum`, `onum`, `zero`, `ordn`, `frac`, `afrc`): the font must have them. `font-features-[…]` wins over them.
`underline`, `line-through`, `no-underline`	run `decoration`	`underline` → `{"textDecoration":"underline"}`
`decoration-{colour}`, `decoration-N`, `decoration-{solid,double,dotted,dashed,wavy}`	run `decorationColor`, `decorationThickness`, `decorationStyle`	`decoration-red-500` → `{"decorationColor":[0.982661,0.171797,0.21307,1]}`	`overline` and `underline-offset-*` are not supported.
`indent-`, `-indent-`	`textIndent`	`indent-4` → `{"textIndent":12}`	A negative indent hangs the first line.
`[direction:rtl]`, `[orphans:N]`, `[widows:N]`	`direction`, `orphans`, `widows`	`[direction:rtl]` → `{"direction":"rtl"}`	Also the `dir`, `orphans` and `widows` props on `Text`.
`uppercase`, `lowercase`, `capitalize`, `normal-case`	run `text` (transformed by the tree builder with the document `lang`)	`uppercase` → `{"textTransform":"uppercase"}`
`truncate`, `line-clamp-N`, `line-clamp-none`	`maxLines` + `ellipsis`	`truncate` → `{"maxLines":1,"ellipsis":true}`
`whitespace-normal`, `whitespace-nowrap`, `whitespace-pre`, `whitespace-pre-wrap`, `whitespace-pre-line`	`whiteSpace`	`whitespace-normal` → `{"whiteSpace":"normal"}`
`text-wrap`, `text-pretty`, `text-nowrap`	`textWrap`, `whiteSpace`	`text-wrap` → `{"textWrap":"wrap"}`	`text-pretty` breaks lines over the whole paragraph for even lines (`textWrap: pretty`); `text-nowrap` is `whiteSpace: nowrap`.
`hyphens-auto`, `hyphens-manual`, `hyphens-none`	`hyphenate`	`hyphens-auto` → `{"hyphenate":true}`	The `hyphenate` prop on `Text` does the same. Soft hyphens (U+00AD) always work.

Not supported

Example	Why
`md:p-4`	Variants and breakpoints (`md:`, `hover:`, `print:`) have no meaning in a PDF.
`shadow-md`	Shadows (`shadow-`, `ring-`) are not drawn by the engine.
`ring-2`	Shadows (`shadow-`, `ring-`) are not drawn by the engine.
`space-x-2`	`space-x/y` and `divide-` style child elements; use `gap-` and borders.
`divide-y`	`space-x/y` and `divide-` style child elements; use `gap-` and borders.
`bg-linear-to-r`	Gradients and background images.
`rotate-x-12`	3D transforms and `perspective-*`.
`block`	`display` other than `flex`, `grid` and `none`.
`fixed`	`fixed` and `sticky` positioning; the `fixed` prop with `absolute` repeats an element on every page.
`w-fit`	Intrinsic sizes (`fit`, `min`, `max`).
`h-dvh`	Dynamic, small and large viewport units (`dvh`, `svh`, `lvh`); `h-screen` is the page height.
`rounded-[4pt/8pt]`	Elliptical corners.
`overline`	`overline` and `underline-offset-*`.
`whitespace-break-spaces`	`break-spaces`.
`text-ellipsis`	`text-overflow` alone; use `truncate` or `line-clamp-N`.
`float-start`	`float-start` and `float-end`: boxes have no direction; use `float-left` or `float-right`.
`clear-end`	`clear-start` and `clear-end`; use `clear-left`, `clear-right` or `clear-both`.
`text-balance`	`text-wrap: balance`; `text-pretty` evens lines.
`object-scale-down`	`object-fit: scale-down`.
`object-[right_1rem_top]`	`object-position` with edge offsets.
`not-a-class`	Classes Tailwind does not know.

Missing something? Open an issue with the class and the output you expect.