Riferimento Tailwind

Ogni elemento accetta classi Tailwind CSS nella prop class (e quelle condizionali in classList). NSH le risolve in Rust rispetto al tema predefinito di Tailwind 4: JS passa solo la stringa, ogni stringa distinta viene analizzata una sola volta e messa in cache, e varianti come dark: o active: vengono rivalutate in modo nativo quando cambiano l’aspetto, la dimensione della finestra o lo stato di pressione, senza eseguire alcun JS.

Ogni utility imposta esattamente ciò che Tailwind CSS 4 genera per essa, con lo stesso significato che ha in un browser. Questa pagina elenca ciò che è supportato. Per un’introduzione vedi Tailwind; per le chiavi di stile impostate dalle utility, vedi il Riferimento degli stili.

I componenti Rust non accettano stringhe di classi: stilizzano gli elementi con i metodi tipizzati di Styled (nsh_core::prelude), che prendono il nome da queste utility e si risolvono negli stessi valori, comprese le scale predefinite di Tailwind (px-4 è .px_4(), rounded-2xl .rounded_2xl(), shadow-md .shadow_md(), bg-linear-to-br .bg_linear_to_br()). I colori sono valori: colori del tema, oppure la palette di Tailwind come nsh_core::element::palette (ZINC.shade(800) è zinc-800). Le varianti sono metodi che accettano una closure di stili: .active(|s| …), .hover(…), .focus(…), .disabled_style(…), .dark(…), .group_active(…) e .style_when(condition, …) per tutte le altre. Il Riferimento degli stili indica il metodo di ogni chiave di stile.

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>

#Come si combinano le classi

• Vince l’ultima. Tra utility dello stesso livello di variante, vince quella che compare più avanti nella stringa: "p-4 p-2" è p-2. Un componente può accettare una prop class e aggiungerla alle proprie classi senza tailwind-merge.
• Le varianti si applicano dopo le utility semplici, nell’ordine delle varianti di Tailwind: group-*: (prima per stato, poi per nome del gruppo), selection:, placeholder:, posizione (first: …), checked:, indeterminate:, selected:, focus-within:, hover:, focus:, focus-visible:, active:, enabled:, disabled:, aria-busy:, aria-checked:, aria-expanded:, aria-pressed:, aria-selected:, data-*: (per nome), movimento, max-*: breakpoint dal più ampio, poi breakpoint in ordine crescente, orientamento, direzione, dark:, infine piattaforma. Decide la variante più alta di una classe, poi la successiva più alta, e un’altra variante viene dopo (dark:hover: dopo dark:), come Tailwind le ordina. Quindi "active:bg-red-500 bg-blue-500" è rosso mentre è premuto.
• style vince sulle classi. Lo style inline viene applicato sopra le classi risolte. Una chiave di stile è la proprietà CSS con lo stesso nome, quella impostata dalle utility, quindi sostituisce quella proprietà e nient’altro: style={{ paddingLeft: 8 }} batte pl-4 e mantiene pr-4. Anche un’utility important (!p-4 o p-4!) vince sullo stile inline.
• Gli stili di testo si ereditano. Le utility di testo su una view (text-white, font-bold, text-center, …) passano agli elementi <Text> e <Input> al suo interno, come in CSS.
• Il display è quello di CSS. flex e inline-flex creano una riga a meno che un’utility di direzione dica altrimenti, ovunque si trovi nella stringa (flex-col flex è una colonna). Anche il display: "flex" di uno stile è una riga allo stesso modo; le view che non impostano alcun display mantengono la colonna predefinita di NSH.

#Unità e tema

Le lunghezze sono in punti (1 = un punto su iOS, un dp su Android). Il 1rem di Tailwind è di 16 punti, quindi il tema corrisponde a quello del web alla stessa densità: un passo di spaziatura è di 4 punti (p-4 = 16 punti), text-base è di 16 punti.

#Valori di spaziatura

Le utility che accettano un valore di spaziatura (padding, margin, gap, inset, larghezza, altezza, basis, translate, leading) accettano:

Margin, inset, translate, rotate, skew, scale, z, hue-rotate, tracking, underline-offset, outline-offset, le linee della griglia e gli angoli dei gradienti accettano un - iniziale per i valori negativi: -mt-2, -translate-x-1/2, -rotate-6. Tailwind non ha una forma negativa per le altre (-p-4, -gap-2, -w-4), e nemmeno NSH.

#Colori

L’intera palette di Tailwind 4 è integrata: 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, ciascuno nelle tonalità 50, 100–900, 950; più black, white e transparent. I tuoi colori personalizzati provengono da nsh.json (vedi Personalizzazione del tema).

Ogni utility di colore accetta:

currentColor e inherit non sono valori di colore. Come in un browser, un bordo, un outline o un ring senza una classe di colore viene disegnato con il colore del testo dell’elemento, il proprio o quello ereditato (<View class="text-white"><View class="border ring-2" /></View> li disegna entrambi bianchi), e lo stesso vale per un bordo la cui larghezza è impostata dalla prop style senza un colore.

#Valori arbitrari

Le parentesi quadre passano un valore che il tema non possiede: w-[37px], grid-cols-[200px_1fr], bg-[linear-gradient(45deg,red,blue)].

• _ sta per uno spazio (grid-cols-[1fr_2fr]); scrivi \_ per un trattino basso letterale.
• Lunghezze: un numero semplice o px (punti), pt (4/3 di punto, come in CSS), rem (16 punti), e % dove le percentuali hanno senso.
• Angoli (rotate-[...], hue-rotate-[...], bg-linear-[...]): deg, rad, grad, turn.
• Tempi (duration-[...], delay-[...]): ms o s; un numero semplice è in millisecondi.
• Gli indizi di tipo risolvono i valori ambigui: text-[length:22px] è una dimensione, text-[color:#333] un colore; border-[length:3px] allo stesso modo.

Le proprietà CSS arbitrarie ([mask-type:luminance]) non sono supportate.

#Layout

Lo scorrimento è un elemento, non una classe: overflow-auto e overflow-scroll non sono supportati; usa scroll.

#Flexbox e grid

#Spaziatura

#Dimensionamento

Larghezze dei container (punti): 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 è 65 volte la larghezza del 0 del font dell’elemento (il 65ch di CSS), come in Tailwind CSS.

#Tipografia

#Font

#Dimensione, colore e altezza di riga

text-<size> imposta la dimensione del font e la corrispondente altezza di riga di Tailwind, che una classe leading-* sostituisce ovunque si trovi nella stringa e qualunque sia la sua variante (leading-tight md:text-lg mantiene l’interlinea stretta):

#Allineamento, maiuscole/minuscole e a capo

#Decorazione e ombra

Le ombre del testo di Tailwind hanno più livelli; in modo nativo viene disegnata una sola ombra, il livello più ampio.

#Input

#Sfondi

Le utility dei gradienti mescolano i colori in Oklab, come le scrive Tailwind CSS (in oklab); a una posizione arbitraria (bg-linear-[25deg], bg-conic-[0.25turn]) seguono il comportamento predefinito di CSS: Oklab con i colori della palette e sRGB quando ogni stop è un colore esadecimale, rgb(), hsl() o con nome.

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

#Bordi

Dimensioni del raggio (punti): xs 2, sm 4, md 6, lg 8, xl 12, 2xl 16, 3xl 24, 4xl 32, full 9999.

#Anelli

Gli anelli sono ombre del box con uno spread, disegnate fuori dal bordo senza occupare spazio.

#Effetti

Ombre, anelli e ombre interne si combinano in un’unica lista boxShadow, come in CSS. Il colore dell’ombra sostituisce il colore di ogni livello, alfa compreso, come --tw-shadow-color di Tailwind: shadow-md shadow-red-500 è un’ombra rossa opaca, shadow-md/20 shadow-red-500 una al 20%.

#Filtri

#Trasformazioni

Le utility di trasformazione si compongono come in CSS: translate-*, rotate-* e scale-* impostano le proprietà translate, rotate e scale e si combinano indipendentemente dall’ordine; poi si applica transform (rotate-x-*, skew-*). Le chiavi della prop style con gli stessi nomi sostituiscono solo la propria proprietà: style={{ scale: 1.1 }} sostituisce scale-95 e mantiene rotate-3. transform, transform-gpu, transform-cpu e transform-flat sono accettate e non fanno nulla: NSH compone ogni trasformazione allo stesso modo, in piano. Le traslazioni per una frazione della dimensione vengono risolte rispetto al frame dell’elemento e lo seguono quando viene ridimensionato.

#Transizioni e animazione

Le transizioni vengono eseguite sul thread UI quando un valore cambia, anche quando una variante inizia o smette di corrispondere, quindi transition active:scale-95 anima la pressione senza JS. Racchiudi le animazioni in motion-safe: per rispettare l’impostazione di riduzione del movimento.

#Interattività

#SVG

#Immagini

#Accettate senza effetto

Queste utility sono suggerimenti di rendering, o ciò che ogni vista nativa è già; vengono analizzate senza avvisi e non cambiano nulla: 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. Scorrimento, snapping e overscroll sono prop di scroll.

#Non supportate

Le varianti peer-*, gli pseudo-elementi (before:, after:), le proprietà arbitrarie ([prop:value]), overflow-auto / overflow-scroll, divide-*, columns-*, float-*, container, le container query, order-*, transform-3d, select-all, border-double / outline-double, i vincoli min/max intrinseci (come max-w-max), snap-*, scroll-*, overscroll-*, touch-* e isolate sono classi sconosciute. nsh build e nsh dev segnalano le classi sconosciute che trovano nel tuo sorgente (file:line:col: unknown class '...'), e il runtime registra nel log ogni classe sconosciuta una sola volta.

#Varianti

Le varianti rendono condizionale una utility: dark:bg-zinc-900, md:flex-row, active:opacity-70. Si combinano (dark:active:bg-zinc-700) e vengono valutate in modo nativo ogni volta che cambia ciò da cui dipendono.

#Aspetto e ambiente

#Breakpoint

I breakpoint confrontano la larghezza della finestra in punti.

Un telefono in verticale (largo 390 punti) non corrisponde a nessuno dei breakpoint predefiniti; un tablet o un telefono in orizzontale ne soddisfa diversi. In Rust, un breakpoint è una condizione sulla finestra: .style_when(move || window().width >= px(768.0), |s| s.p_8()) è md:p-8.

#Stati di interazione

Gli stati sono tracciati dalla piattaforma solo per gli elementi le cui classi li usano, e le modifiche si applicano in modo nativo, senza round trip verso JS.

Gli stessi stati come oggetti di stile sono le prop activeStyle, hoverStyle, focusStyle, disabledStyle, checkedStyle, indeterminateStyle, expandedStyle e pressedStyle di ogni elemento (e selectedStyle di un Button); hanno la precedenza sullo stile e sulle classi dell’elemento.

disabled funziona su qualsiasi elemento: applica disabled: e rimuove i gestori di pressione dell’elemento, quindi non mostra nemmeno alcun feedback di pressione.

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>

#Gruppi

Contrassegna un antenato con group e applica stili ai discendenti in base al suo stato con group-<state>:. Assegna un nome ai gruppi per annidarli: group/card e 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>

#Posizione tra i fratelli

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 e selezione

placeholder: si applica al placeholder di un <Input> e accetta solo un colore del testo: placeholder:text-zinc-400 (la chiave di stile placeholderColor). selection: si applica alla selezione di un <Input> o di un <Text> selezionabile e, su qualsiasi elemento, a quelli al suo interno (il & *::selection di Tailwind; prevale l’elemento più vicino), e accetta lo sfondo, cioè l’evidenziazione: selection:bg-violet-200 (la chiave di stile selectionColor, che colora anche il cursore di un input dove la piattaforma li disegna con un unico colore).

#Important

! prima o dopo una utility (!p-4, p-4!) la fa prevalere su ogni altra classe e sul style inline.

#Personalizzazione del tema

Estendi il tema nell’oggetto "tailwind" del nsh.json della tua app. Le voci con un nome nuovo vengono aggiunte; le voci con un nome già esistente sostituiscono quelle predefinite. Le lunghezze sono in punti. Il tema viene verificato quando l’app viene impacchettata: una chiave sconosciuta o un valore non valido causa un errore di build.

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

Con questo tema funzionano bg-brand-500, bg-brand (la sfumatura 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 e max-w-content.

#Correlati

• Tailwind: la guida.
• Styling: class, classList, style e come si combinano.
• Riferimento degli stili: le chiavi di stile impostate dalle utility.