ns-line-height

Installation
SKILL.md

line-height: additive, not the web's line box

line-height in NativeScript does not mean what it means on the web, and the difference only shows on text that wraps — which is why the bug ships: single-line labels look perfect, then a long title wraps and sprouts a giant gap.

The semantics

Platform What line-height: N does
Web Sets the total height of each line box; 1.5 on 16px text = 24px lines — normal typography.
NativeScript iOS paragraphStyle.lineSpacing = N — N points of extra space added between lines.
NativeScript Android setLineSpacing(N * density, 1) — same: N dp of extra spacing.

So a web-normal line-height: 24 on 16dp text renders ~16dp lines plus 24dp of air between them — more gap than text. And a unitless web value like 1.25 becomes a meaningless 1.25dp of extra spacing (visually a no-op).

Default rule: don't set line-height at all. Native text rendering already uses the platform's per-font line spacing — the "correct" look. Reach for line-height only to add deliberate breathing room, and think in dp of extra space (line-height: 4), never in web ratios or rem-derived values.

The Tailwind trap (how this bug enters a codebase)

Tailwind's default fontSize scale ships tuples: text-base = [1rem, { lineHeight: 1.5rem }]. Through @nativescript/tailwind that becomes font-size: 16; line-height: 24 — silently injecting 24dp of extra spacing into every text-base label that wraps. Every text-* utility does this.

Installs
19
GitHub Stars
1
First Seen
Aug 28, 2026
ns-line-height — nativescript/skills