Skip to content
Inkoxide

Search covers every page and heading of the docs. Use ↑ ↓ and ↵.

Styling

Edit this page

Style objects

<View style={{ padding: 12, borderBottomWidth: 0.5, borderBottomColor: '#ddd' }} />
<View style={[styles.row, index % 2 === 1 && styles.zebra]} />
<Text style={{ fontSize: '9pt', marginTop: '2mm' }} />
  • Units. Numbers are points (1/72 inch). Strings may use pt, mm, cm, in, px (0.75pt), pc (12pt), rem (12pt, as in Tailwind), em (the element's font size; in fontSize, the inherited one; in lineHeight and letterSpacing, the size of the text they apply to, so they scale with each run), vw and vh (1% of the page's width and height), or a percentage. lineHeight is a multiplier of the text size (1.4, '140%', '1.4em') or a length ('14pt'). calc() adds lengths ('calc(10mm + 1em)') or percentages, but not one to the other. A class's arbitrary value (w-[…]) takes the same syntax and reads the same. A page's size takes the units that do not depend on the font or the page. Percentages follow CSS: widths, padding and margins are of the parent's width, and gaps of the element's own size. A percentage height needs a parent with a set height; a child of the Page takes it of the page.
  • Arrays. Falsy entries are skipped and later entries win, over className too, as a later CSS rule does: a later borderRadius: 8 replaces an earlier corner's radius.
  • Shorthands. padding, margin, paddingHorizontal/paddingVertical, per-side keys and flex: 1 (meaning 1 1 0%) all work. border and borderTop, borderRight, borderBottom, borderLeft take CSS strings ('1px solid #e5e7eb', '2pt dashed red', 'none'); a missing style is solid and a missing colour is the text colour. A side wins over border, and borderWidth, borderColor, borderStyle and the per-side keys win over both.
  • CSS names. textDecoration takes 'underline', 'line-through' or both; a run has one line, so 'underline line-through' draws the line-through. textDecorationColor, textDecorationStyle and textDecorationThickness are the same as decorationColor, decorationStyle and decorationThickness. textOverflow: 'ellipsis' is ellipsis: true (with maxLines). objectFit on an Image or ImageBackground is its fit prop, which wins when both are set. objectPosition on them places the image in its box (see Images). Both throw on other elements.
  • Floats. float: 'left' or 'right' (float-left, float-right) on a child of a column View, a Page or a Cell puts it at that side, as narrow as its content unless it has a width, at or below where it comes in the flow. Text after it wraps beside it line by line, in its own box: a Text with a width, an alignSelf or auto side margins keeps the box it would have without the float, and its lines take the room the float leaves in it. A box after it is narrowed to the room beside the floats over its whole height, or moves below them when its content does not fit there. clear: 'left', 'right' or 'both' moves an element below the floats before it, and a parent is as tall as its floats. A float moves to the next page with the lines beside it. Floats are rectangles (shapeOutside is not supported), do not float inside rows or grids, and a box with floats lays its children out top to bottom: flexGrow, flexBasis, justifyContent and alignContent are errors there.
  • Opacity. opacity applies to each element, not to an element and its children as one group, as CSS does: where children overlap, each shows through the others. opacity: 0 draws nothing, and leaves out the links, form fields and notes of everything inside the element.
  • Inheritance. Text properties (font, size, weight, colour, line height, alignment) pass down from Page and View to the text inside. Box properties apply only to the element that has them.

Tailwind

Write the classes you would write on the web. They are resolved by the Tailwind v4 compiler, in @inkoxide/tailwind, which you install next to @inkoxide/render when you use className:

npm install @inkoxide/tailwind

Without it, style works the same, and a className fails with an error that says to install it.

  • Units are tuned for print: 1rem = 12pt and 1px = 0.75pt. So p-4 is 12pt, text-sm is 10.5pt and text-xs is 9pt. Use arbitrary values for exact sizes: text-[9.5pt], mt-[14pt], w-[60mm].
  • Supported: flexbox, grid, sizing, spacing, the full colour palette with opacity (bg-black/5), borders, per-corner radii, typography, absolute positioning with z-*, and 2D transforms.
  • Not supported: variants (md:, hover:), shadows, gradients and space-*/divide-* (use gap-* and borders). Using one throws and names the class; in production (NODE_ENV=production) it is logged once and ignored.

Synced from packages/render/GUIDE.md in the inkoxide repository.