Tailwind reference

Every element takes Tailwind CSS classes in its class prop (and conditional ones in classList). NSH resolves them in Rust against Tailwind 4’s default theme: JS passes only the string, each distinct string is parsed once and cached, and variants such as dark: or active: are re-evaluated natively when the appearance, window size or press state changes, without running any JS.

Each utility sets exactly what Tailwind CSS 4 generates for it, with the same meaning as in a browser. This page lists what is supported. For an introduction see Tailwind; for the style keys the utilities set, see the Style reference.

Rust components take no class strings: they style elements with the typed methods of Styled (nsh_core::prelude), named after these utilities and resolving to the same values, Tailwind’s default scales included (px-4 is .px_4(), rounded-2xl .rounded_2xl(), shadow-md .shadow_md(), bg-linear-to-br .bg_linear_to_br()). Colors are values: theme colors, or Tailwind’s palette as nsh_core::element::palette (ZINC.shade(800) is zinc-800). Variants are methods taking a closure of styles: .active(|s| …), .hover(…), .focus(…), .disabled_style(…), .dark(…), .group_active(…), and .style_when(condition, …) for the rest. The Style reference names the method of each style key.

use nsh_core::{element::palette::{RED, ZINC}, prelude::*};

view()
    .flex_row()
    .items_center()
    .gap_3()
    .rounded_2xl()
    .bg(white())
    .p_4()
    .shadow_md()
    .active(|s| s.scale(0.98))
    .transition()
    .dark(|s| s.bg(ZINC.shade(800)))
    .child(
        text("Inbox")
            .text_base()
            .font_weight(FontWeight::SEMIBOLD)
            .text_color(ZINC.shade(900))
            .dark(|s| s.text_color(white())),
    )
    .child(
        text(move || unread.get().to_string())
            .text_color(move || if unread.get() > 0 { RED.shade(500) } else { ZINC.shade(400) }),
    )

<View class="flex-row items-center gap-3 rounded-2xl bg-white p-4 shadow-md active:scale-[0.98] transition dark:bg-zinc-800">
  <Text class="text-base font-semibold text-zinc-900 dark:text-white">Inbox</Text>
  <Text classList={{ "text-red-500": unread() > 0, "text-zinc-400": unread() === 0 }}>{unread()}</Text>
</View>

#How classes combine

• Later wins. Among utilities of the same variant level, the one later in the string wins: "p-4 p-2" is p-2. A component can take a class prop and append it to its own classes without tailwind-merge.
• Variants apply after plain utilities, in Tailwind’s variant order: group-*: (by their state, then by group name), selection:, placeholder:, position (first: …), checked:, indeterminate:, selected:, focus-within:, hover:, focus:, focus-visible:, active:, enabled:, disabled:, aria-busy:, aria-checked:, aria-expanded:, aria-pressed:, aria-selected:, data-*: (by name), motion, max-*: breakpoints widest first, then breakpoints ascending, orientation, direction, dark:, then platform. A class’s highest variant decides, then its next highest, and one more variant comes later (dark:hover: after dark:), as Tailwind sorts them. So "active:bg-red-500 bg-blue-500" is red while pressed.
• style wins over classes. The inline style is applied on top of the resolved classes. A style key is the CSS property of its name, the one the utilities set, so it replaces that property and nothing else: style={{ paddingLeft: 8 }} beats pl-4 and keeps pr-4. An important utility (!p-4 or p-4!) wins over the inline style too.
• Text styles inherit. Text utilities on a view (text-white, font-bold, text-center, …) pass to the <Text> and <Input> elements inside it, as in CSS.
• Display is CSS’s. flex and inline-flex make a row unless a direction utility says otherwise, wherever it is in the string (flex-col flex is a column). A style’s display: "flex" is a row in the same way; views that set no display keep NSH’s column default.

#Units and the theme

Lengths are points (1 = one point on iOS, one dp on Android). Tailwind’s 1rem is 16 points, so the theme matches the web at the same density: one spacing step is 4 points (p-4 = 16 points), text-base is 16 points.

#Spacing values

Utilities that take a spacing value (padding, margin, gap, inset, width, height, basis, translate, leading) accept:

Margins, insets, translate, rotate, skew, scale, z, hue-rotate, tracking, underline-offset, outline-offset, grid lines and gradient angles take a leading - for negative values: -mt-2, -translate-x-1/2, -rotate-6. Tailwind has no negative form of the others (-p-4, -gap-2, -w-4), and neither has NSH.

#Colors

The full Tailwind 4 palette is built in: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone, mauve, olive, mist, taupe, each in shades 50, 100–900, 950; plus black, white and transparent. Your own colors come from nsh.json (see Theme customization).

Every color utility takes:

currentColor and inherit are not color values. As in a browser, a border, an outline or a ring without a color class is drawn in the element’s text color, its own or the one it inherits (<View class="text-white"><View class="border ring-2" /></View> draws both white), and so is a border whose width the style prop sets without a color.

#Arbitrary values

Square brackets pass a value the theme does not have: w-[37px], grid-cols-[200px_1fr], bg-[linear-gradient(45deg,red,blue)].

• _ stands for a space (grid-cols-[1fr_2fr]); write \_ for a literal underscore.
• Lengths: a bare number or px (points), pt (4/3 of a point, as in CSS), rem (16 points), and % where percentages make sense.
• Angles (rotate-[...], hue-rotate-[...], bg-linear-[...]): deg, rad, grad, turn.
• Times (duration-[...], delay-[...]): ms or s; a bare number is milliseconds.
• Type hints settle ambiguous values: text-[length:22px] is a size, text-[color:#333] a color; border-[length:3px] likewise.

Arbitrary CSS properties ([mask-type:luminance]) are not supported.

#Layout

Scrolling is an element, not a class: overflow-auto and overflow-scroll are not supported; use scroll.

#Flexbox and grid

#Spacing

#Sizing

Container widths (points): 3xs 256, 2xs 288, xs 320, sm 384, md 448, lg 512, xl 576, 2xl 672, 3xl 768, 4xl 896, 5xl 1024, 6xl 1152, 7xl 1280; prose is 65 times the width of the element’s font’s 0 (CSS’s 65ch), as in Tailwind CSS.

#Typography

#Font

#Size, color and line height

text-<size> sets the font size and Tailwind’s matching line height, which a leading-* class replaces wherever it is in the string and whatever its variant (leading-tight md:text-lg keeps the tight leading):

#Alignment, case and wrapping

#Decoration and shadow

Tailwind’s text shadows have several layers; natively one shadow is drawn, the widest layer.

#Inputs

#Backgrounds

Gradient utilities mix their colors in Oklab, as Tailwind CSS writes them (in oklab); at an arbitrary position (bg-linear-[25deg], bg-conic-[0.25turn]) they follow CSS’s default, Oklab with the palette’s colors and sRGB when every stop is a hex, rgb(), hsl() or named color.

view()
    .h_32()
    .rounded_2xl()
    .bg_linear_to_br()
    .gradient_from(INDIGO.shade(500))
    .gradient_via(PURPLE.shade(500))
    .gradient_via_position(percentage(0.4))
    .gradient_to(PINK.shade(500))

<View class="h-32 rounded-2xl bg-linear-to-br from-indigo-500 via-purple-500 via-40% to-pink-500" />

#Borders

Radius sizes (points): xs 2, sm 4, md 6, lg 8, xl 12, 2xl 16, 3xl 24, 4xl 32, full 9999.

#Rings

Rings are box shadows with a spread, drawn outside the border without taking space.

#Effects

Shadows, rings and inset shadows combine into one boxShadow list, as in CSS. A shadow color replaces each layer’s color, alpha too, as Tailwind’s --tw-shadow-color: shadow-md shadow-red-500 is an opaque red shadow, shadow-md/20 shadow-red-500 one at 20%.

#Filters

#Transforms

Transform utilities compose like CSS: translate-*, rotate-* and scale-* set the translate, rotate and scale properties and combine regardless of order, then transform applies (rotate-x-*, skew-*). The style prop’s keys of the same names replace only their own property: style={{ scale: 1.1 }} replaces scale-95 and keeps rotate-3. transform, transform-gpu, transform-cpu and transform-flat are accepted and do nothing: NSH composes every transform alike, flat. Translations by a fraction of the size are resolved against the element’s frame and follow it when it resizes.

#Transitions and animation

Transitions run on the UI thread when a value changes, including when a variant starts or stops matching, so transition active:scale-95 animates the press without JS. Wrap animations in motion-safe: to respect the reduce-motion setting.

#Interactivity

#SVG

#Images

#Accepted without effect

These utilities are rendering hints, or what every native view already is; they parse without a warning and change nothing: antialiased, subpixel-antialiased, isolation-auto, box-border, appearance-none, appearance-auto, will-change-auto, will-change-scroll, will-change-contents, will-change-transform, will-change-[<value>], transform, transform-gpu, transform-cpu, transform-flat. Scrolling, snapping and overscroll are props of scroll.

#Not supported

peer-* variants, pseudo-elements (before:, after:), arbitrary properties ([prop:value]), overflow-auto / overflow-scroll, divide-*, columns-*, float-*, container, container queries, order-*, transform-3d, select-all, border-double / outline-double, intrinsic min/max constraints (such as max-w-max), snap-*, scroll-*, overscroll-*, touch-* and isolate are unknown classes. nsh build and nsh dev warn about unknown classes they find in your source (file:line:col: unknown class '...'), and the runtime logs each unknown class once.

#Variants

Variants make a utility conditional: dark:bg-zinc-900, md:flex-row, active:opacity-70. They stack (dark:active:bg-zinc-700) and are evaluated natively whenever what they depend on changes.

#Appearance and environment

#Breakpoints

Breakpoints compare the window width in points.

A phone in portrait (390 points wide) matches none of the default breakpoints; a tablet or a phone in landscape matches several. In Rust, a breakpoint is a condition on the window: .style_when(move || window().width >= px(768.0), |s| s.p_8()) is md:p-8.

#Interaction states

States are tracked by the platform only for elements whose classes use them, and changes apply natively, with no JS round trip.

The same states as style objects are the activeStyle, hoverStyle, focusStyle, disabledStyle, checkedStyle, indeterminateStyle, expandedStyle and pressedStyle props of every element (and a Button’s selectedStyle); they go over the element’s style and classes.

disabled works on any element: it applies disabled: and removes the element’s press handlers, so it shows no press feedback either.

view()
    .on_press(save)
    .disabled(saving)
    .rounded_lg()
    .bg(BLUE.shade(600))
    .px_4()
    .py_2()
    .transition()
    .active(|s| s.scale(0.95).bg(BLUE.shade(700)))
    .disabled_style(|s| s.opacity(0.4))
    .child(text("Save").font_weight(FontWeight::MEDIUM).text_color(white()))

<View
  onPress={save}
  disabled={saving()}
  class="rounded-lg bg-blue-600 px-4 py-2 transition active:scale-95 active:bg-blue-700 disabled:opacity-40"
>
  <Text class="font-medium text-white">Save</Text>
</View>

#Groups

Mark an ancestor with group and style descendants by its state with group-<state>:. Name groups to nest them: group/card and group-hover/card:.

view()
    .on_press(open)
    .group_named("row")
    .flex_row()
    .items_center()
    .gap_3()
    .p_3()
    .active(|s| s.bg(ZINC.shade(100)))
    .child(
        text("Settings")
            .flex_1()
            .text_color(ZINC.shade(900))
            .group_active_named("row", |s| s.text_color(BLUE.shade(600))),
    )
    .child(
        text("›")
            .text_color(ZINC.shade(400))
            .group_active_named("row", |s| s.translate_x(px(4.0)))
            .transition_transform(),
    )

<View onPress={open} class="group/row flex-row items-center gap-3 p-3 active:bg-zinc-100">
  <Text class="flex-1 text-zinc-900 group-active/row:text-blue-600">Settings</Text>
  <Text class="text-zinc-400 group-active/row:translate-x-1 transition-transform">›</Text>
</View>

#Position among siblings

each(items, |item: &Item| item.id, move |item, index| {
    text(move || item.with(|i| i.name.clone()))
        .border_b(px(1.0))
        .border_color(ZINC.shade(200))
        .py_3()
        .style_when(move || index.get() + 1 == items.with(Vec::len), |s| s.border_b(px(0.0)))
})

<Each of={items()}>{(item) => <Text class="border-b border-zinc-200 py-3 last:border-b-0">{item().name}</Text>}</Each>

#Placeholder and selection

placeholder: applies to an <Input>’s placeholder and only takes a text color: placeholder:text-zinc-400 (the style key placeholderColor). selection: applies to the selection of an <Input> or a selectable <Text>, and on any element to those inside it (Tailwind’s & *::selection; the nearest element’s wins), and takes its background, the highlight: selection:bg-violet-200 (the style key selectionColor, which also tints an input’s caret where the platform draws them in one color).

#Important

! before or after a utility (!p-4, p-4!) makes it win over every other class and over the inline style.

#Theme customization

Extend the theme in the "tailwind" object of your app’s nsh.json. Entries with a new name are added; entries with an existing name replace the default. Lengths are points. The theme is checked when the app is bundled: an unknown key or an invalid value is a build error.

{
  "name": "My App",
  "id": "com.example.myapp",
  "tailwind": {
    "colors": {
      "brand": { "50": "#f5f3ff", "500": "#7c3aed", "600": "#6d28d9", "DEFAULT": "#7c3aed" },
      "accent": "#f59e0b"
    },
    "spacing": 4,
    "breakpoints": { "tablet": 600 },
    "fontFamily": { "display": "Inter" },
    "fontSize": { "huge": [48, 1.1] },
    "fontWeight": { "heavy": 850 },
    "radius": { "card": 14 },
    "shadow": { "card": "0 2px 8px rgb(0 0 0 / 0.12)" },
    "insetShadow": { "well": "inset 0 2px 6px rgb(0 0 0 / 0.1)" },
    "dropShadow": { "icon": "0 2px 4px rgb(0 0 0 / 0.2)" },
    "tracking": { "label": 0.08 },
    "leading": { "dense": 1.15 },
    "blur": { "glass": 20 },
    "perspective": { "card": 700 },
    "aspect": { "photo": 1.5 },
    "ease": { "snappy": [0.2, 0, 0, 1] },
    "container": { "content": 680 }
  }
}

With this theme, bg-brand-500, bg-brand (the DEFAULT shade), text-accent, tablet:flex-row, font-display, text-huge, font-heavy, rounded-card, shadow-card, inset-shadow-well, drop-shadow-icon, tracking-label, leading-dense, blur-glass, perspective-card, aspect-photo, ease-snappy and max-w-content all work.

#Related

• Tailwind: the guide.
• Styling: class, classList, style and how they combine.
• Style reference: the style keys utilities set.