Tailwind-Referenz

Jedes Element nimmt Tailwind-CSS-Klassen in seiner class-Prop entgegen (und bedingte in classList). NSH löst sie in Rust gegen das Standard-Theme von Tailwind 4 auf: JS übergibt nur den String, jeder eindeutige String wird einmal geparst und gecacht, und Varianten wie dark: oder active: werden nativ neu ausgewertet, wenn sich Darstellung, Fenstergröße oder Press-Zustand ändern, ohne dass JS ausgeführt wird.

Jedes Utility setzt genau das, was Tailwind CSS 4 dafür erzeugt, mit derselben Bedeutung wie im Browser. Diese Seite listet auf, was unterstützt wird. Eine Einführung findest du unter Tailwind; die Style-Keys, die die Utilities setzen, stehen in der Style-Referenz.

Rust-Komponenten nehmen keine Klassen-Strings entgegen: Sie stylen Elemente mit den typisierten Methoden von Styled (nsh_core::prelude), die nach diesen Utilities benannt sind und zu denselben Werten aufgelöst werden, einschließlich der Standard-Skalen von Tailwind (px-4 ist .px_4(), rounded-2xl .rounded_2xl(), shadow-md .shadow_md(), bg-linear-to-br .bg_linear_to_br()). Farben sind Werte: Theme-Farben oder Tailwinds Palette als nsh_core::element::palette (ZINC.shade(800) ist zinc-800). Varianten sind Methoden, die eine Closure mit Styles entgegennehmen: .active(|s| …), .hover(…), .focus(…), .disabled_style(…), .dark(…), .group_active(…) und .style_when(condition, …) für alle übrigen. Die Style-Referenz nennt die Methode jedes Style-Keys.

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>

#Wie Klassen kombiniert werden

• Das Spätere gewinnt. Unter Utilities derselben Variantenebene gewinnt das weiter hinten im String: "p-4 p-2" ist p-2. Eine Komponente kann eine class-Prop entgegennehmen und an ihre eigenen Klassen anhängen, ohne tailwind-merge.
• Varianten gelten nach einfachen Utilities, in der Variantenreihenfolge von Tailwind: group-*: (nach ihrem Zustand, dann nach Gruppenname), 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-*: (nach Name), Bewegung, max-*:-Breakpoints, breiteste zuerst, dann Breakpoints aufsteigend, Ausrichtung, Richtung, dark:, dann Plattform. Die höchste Variante einer Klasse entscheidet, dann die nächsthöhere, und eine zusätzliche Variante kommt später (dark:hover: nach dark:), so wie Tailwind sie sortiert. So ist "active:bg-red-500 bg-blue-500" rot, solange gedrückt wird.
• style gewinnt gegen Klassen. Das Inline-style wird auf die aufgelösten Klassen angewendet. Ein Style-Key ist die CSS-Eigenschaft seines Namens, also dieselbe, die die Utilities setzen, daher ersetzt er genau diese Eigenschaft und nichts sonst: style={{ paddingLeft: 8 }} schlägt pl-4 und behält pr-4. Ein Important-Utility (!p-4 oder p-4!) gewinnt auch gegen den Inline-Style.
• Text-Styles werden vererbt. Text-Utilities auf einer View (text-white, font-bold, text-center, …) werden wie in CSS an die <Text>- und <Input>-Elemente darin weitergegeben.
• Display folgt CSS. flex und inline-flex ergeben eine Zeile, sofern kein Richtungs-Utility etwas anderes vorgibt, egal wo es im String steht (flex-col flex ist eine Spalte). Das display: "flex" eines Styles ist auf dieselbe Weise eine Zeile; Views ohne Display behalten NSHs Spalten-Standard.

#Einheiten und das Theme

Längen sind Punkte (1 = ein Punkt unter iOS, ein dp unter Android). Tailwinds 1rem entspricht 16 Punkten, sodass das Theme bei gleicher Dichte dem Web entspricht: Ein Abstandsschritt sind 4 Punkte (p-4 = 16 Punkte), text-base sind 16 Punkte.

#Abstandswerte

Utilities, die einen Abstandswert nehmen (Padding, Margin, Gap, Inset, Breite, Höhe, basis, translate, leading), akzeptieren:

Margins, Insets, translate, rotate, skew, scale, z, hue-rotate, tracking, underline-offset, outline-offset, Grid-Linien und Verlaufswinkel nehmen für negative Werte ein vorangestelltes -: -mt-2, -translate-x-1/2, -rotate-6. Tailwind kennt für die übrigen keine negative Form (-p-4, -gap-2, -w-4), und NSH ebenso wenig.

#Farben

Die vollständige Tailwind-4-Palette ist eingebaut: 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, jeweils in den Abstufungen 50, 100–900, 950; dazu black, white und transparent. Eigene Farben kommen aus nsh.json (siehe Theme-Anpassung).

Jedes Farb-Utility akzeptiert:

currentColor und inherit sind keine Farbwerte. Wie im Browser wird ein Rahmen, eine Outline oder ein Ring ohne Farbklasse in der Textfarbe des Elements gezeichnet, in seiner eigenen oder der geerbten (<View class="text-white"><View class="border ring-2" /></View> zeichnet beides weiß), und ebenso ein Rahmen, dessen Breite die style-Prop ohne Farbe setzt.

#Beliebige Werte

Eckige Klammern übergeben einen Wert, den das Theme nicht hat: w-[37px], grid-cols-[200px_1fr], bg-[linear-gradient(45deg,red,blue)].

• _ steht für ein Leerzeichen (grid-cols-[1fr_2fr]); schreibe \_ für einen echten Unterstrich.
• Längen: eine nackte Zahl oder px (Punkte), pt (4/3 Punkt, wie in CSS), rem (16 Punkte) und %, wo Prozentwerte sinnvoll sind.
• Winkel (rotate-[...], hue-rotate-[...], bg-linear-[...]): deg, rad, grad, turn.
• Zeiten (duration-[...], delay-[...]): ms oder s; eine nackte Zahl sind Millisekunden.
• Typ-Hinweise lösen mehrdeutige Werte auf: text-[length:22px] ist eine Größe, text-[color:#333] eine Farbe; border-[length:3px] entsprechend.

Beliebige CSS-Eigenschaften ([mask-type:luminance]) werden nicht unterstützt.

#Layout

Scrollen ist ein Element, keine Klasse: overflow-auto und overflow-scroll werden nicht unterstützt; verwende scroll.

#Flexbox und Grid

#Abstände

#Größen

Container-Breiten (Punkte): 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 ist das 65-Fache der Breite von 0 in der Schrift des Elements (CSS-65ch), wie in Tailwind CSS.

#Typografie

#Schrift

#Größe, Farbe und Zeilenhöhe

text-<size> setzt die Schriftgröße und die dazu passende Zeilenhöhe von Tailwind, die eine leading-*-Klasse ersetzt, egal wo sie im String steht und welche Variante sie hat (leading-tight md:text-lg behält den engen Zeilenabstand):

#Ausrichtung, Schreibweise und Umbruch

#Dekoration und Schatten

Die Textschatten von Tailwind haben mehrere Ebenen; nativ wird ein Schatten gezeichnet, nämlich die breiteste Ebene.

#Eingaben

#Hintergründe

Gradient-Utilities mischen ihre Farben in Oklab, so wie Tailwind CSS sie schreibt (in oklab); bei einer beliebigen Position (bg-linear-[25deg], bg-conic-[0.25turn]) folgen sie dem CSS-Standard: Oklab mit den Farben der Palette und sRGB, wenn jeder Stopp eine Hex-Farbe, eine rgb()-Farbe, eine hsl()-Farbe oder eine benannte Farbe ist.

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" />

#Rahmen

Radius-Größen (Punkte): xs 2, sm 4, md 6, lg 8, xl 12, 2xl 16, 3xl 24, 4xl 32, full 9999.

#Ringe

Ringe sind Box-Schatten mit einer Ausbreitung (Spread); sie werden außerhalb des Rahmens gezeichnet, ohne Platz zu beanspruchen.

#Effekte

Schatten, Ringe und innere Schatten werden wie in CSS zu einer einzigen boxShadow-Liste kombiniert. Eine Schattenfarbe ersetzt die Farbe jeder Ebene, ebenso das Alpha, wie bei Tailwinds --tw-shadow-color: shadow-md shadow-red-500 ist ein deckend roter Schatten, shadow-md/20 shadow-red-500 einer mit 20 %.

#Filter

#Transformationen

Transform-Utilities lassen sich wie in CSS kombinieren: translate-*, rotate-* und scale-* setzen die Properties translate, rotate und scale und werden unabhängig von der Reihenfolge kombiniert; anschließend greift transform (rotate-x-*, skew-*). Die gleichnamigen Schlüssel der Prop style ersetzen nur ihre eigene Property: style={{ scale: 1.1 }} ersetzt scale-95 und behält rotate-3. transform, transform-gpu, transform-cpu und transform-flat werden akzeptiert und bewirken nichts: NSH setzt jede Transformation gleich zusammen, flach. Translationen um einen Bruchteil der Größe werden gegen den Frame des Elements aufgelöst und folgen ihm bei einer Größenänderung.

#Übergänge und Animation

Übergänge laufen auf dem UI-Thread, wenn sich ein Wert ändert, auch wenn eine Variante zu greifen beginnt oder aufhört. So animiert transition active:scale-95 das Drücken ohne JS. Packe Animationen in motion-safe:, um die Einstellung „Bewegung reduzieren“ zu respektieren.

#Interaktivität

#SVG

#Bilder

#Akzeptiert ohne Wirkung

Diese Utilities sind Rendering-Hinweise oder beschreiben, was jede native View ohnehin ist; sie werden ohne Warnung geparst und ändern nichts: 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. Scrollen, Snapping und Overscroll sind Props von scroll.

#Nicht unterstützt

peer-*-Varianten, Pseudo-Elemente (before:, after:), beliebige Properties ([prop:value]), overflow-auto / overflow-scroll, divide-*, columns-*, float-*, container, Container Queries, order-*, transform-3d, select-all, border-double / outline-double, intrinsische Min-/Max-Constraints (wie max-w-max), snap-*, scroll-*, overscroll-*, touch-* und isolate sind unbekannte Klassen. nsh build und nsh dev warnen vor unbekannten Klassen, die sie in deinem Quellcode finden (file:line:col: unknown class '...'), und die Runtime protokolliert jede unbekannte Klasse einmal.

#Varianten

Varianten machen ein Utility bedingt: dark:bg-zinc-900, md:flex-row, active:opacity-70. Sie lassen sich stapeln (dark:active:bg-zinc-700) und werden nativ ausgewertet, sobald sich ändert, wovon sie abhängen.

#Darstellung und Umgebung

#Breakpoints

Breakpoints vergleichen die Fensterbreite in Punkten.

Ein Smartphone im Hochformat (390 Punkte breit) entspricht keinem der Standard-Breakpoints; ein Tablet oder ein Smartphone im Querformat entspricht mehreren. In Rust ist ein Breakpoint eine Bedingung auf dem Fenster: .style_when(move || window().width >= px(768.0), |s| s.p_8()) ist md:p-8.

#Interaktionszustände

Zustände werden von der Plattform nur für Elemente verfolgt, deren Klassen sie verwenden, und Änderungen werden nativ angewendet, ohne JS-Roundtrip.

Dieselben Zustände als Style-Objekte sind die Props activeStyle, hoverStyle, focusStyle, disabledStyle, checkedStyle, indeterminateStyle, expandedStyle und pressedStyle jedes Elements (und das selectedStyle eines Button); sie haben Vorrang vor dem Style und den Klassen des Elements.

disabled funktioniert bei jedem Element: Es wendet disabled: an und entfernt die Press-Handler des Elements, sodass es auch kein Feedback beim Drücken zeigt.

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>

#Gruppen

Markiere ein Vorfahrenelement mit group und style Nachkommen abhängig von dessen Zustand mit group-<state>:. Benenne Gruppen, um sie zu verschachteln: group/card und 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 unter Geschwisterelementen

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>

#Platzhalter und Auswahl

placeholder: gilt für den Platzhalter eines <Input> und akzeptiert nur eine Textfarbe: placeholder:text-zinc-400 (der Style-Key placeholderColor). selection: gilt für die Auswahl eines <Input> oder eines auswählbaren <Text> und bei jedem Element auch für die darin enthaltenen Elemente (Tailwinds & *::selection; das nächstgelegene Element gewinnt). Es akzeptiert eine Hintergrundfarbe, die Hervorhebung: selection:bg-violet-200 (der Style-Key selectionColor, der auch den Cursor eines Eingabefelds einfärbt, wenn die Plattform ihn einfarbig zeichnet).

#Wichtig

! vor oder nach einem Utility (!p-4, p-4!) sorgt dafür, dass es sich gegenüber jeder anderen Klasse und dem Inline-style durchsetzt.

#Theme-Anpassung

Erweitere das Theme im Objekt "tailwind" der nsh.json deiner App. Einträge mit neuem Namen werden hinzugefügt; Einträge mit einem bereits vorhandenen Namen ersetzen den Standardwert. Längen sind in Punkten angegeben. Das Theme wird beim Bundling der App geprüft: Ein unbekannter Schlüssel oder ein ungültiger Wert führt zu einem Build-Fehler.

{
  "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 }
  }
}

Mit diesem Theme funktionieren bg-brand-500, bg-brand (die Abstufung DEFAULT), 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 und max-w-content.

#Siehe auch

• Tailwind: die Anleitung.
• Styling: class, classList, style und wie sie zusammenspielen.
• Style-Referenz: die Style-Keys, die Utilities setzen.