Referência do Tailwind

Todo elemento aceita classes do Tailwind CSS na prop class (e as condicionais em classList). O NSH as resolve em Rust contra o tema padrão do Tailwind 4: o JS passa apenas a string, cada string distinta é analisada uma vez e armazenada em cache, e variantes como dark: ou active: são reavaliadas nativamente quando a aparência, o tamanho da janela ou o estado de pressionamento muda, sem executar nenhum JS.

Cada utilitário define exatamente o que o Tailwind CSS 4 gera para ele, com o mesmo significado de um navegador. Esta página lista o que é suportado. Para uma introdução, veja Tailwind; para as chaves de estilo que os utilitários definem, veja a Referência de estilos.

Componentes Rust não recebem strings de classe: eles estilizam elementos com os métodos tipados de Styled (nsh_core::prelude), nomeados a partir desses utilitários e resolvendo para os mesmos valores, incluindo as escalas padrão do Tailwind (px-4 é .px_4(), rounded-2xl .rounded_2xl(), shadow-md .shadow_md(), bg-linear-to-br .bg_linear_to_br()). Cores são valores: cores do tema, ou a paleta do Tailwind como nsh_core::element::palette (ZINC.shade(800) é zinc-800). Variantes são métodos que recebem um closure de estilos: .active(|s| …), .hover(…), .focus(…), .disabled_style(…), .dark(…), .group_active(…) e .style_when(condition, …) para as demais. A Referência de estilos indica o método de cada chave de estilo.

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>

#Como as classes se combinam

• O último vence. Entre utilitários do mesmo nível de variante, o que vem depois na string vence: "p-4 p-2" é p-2. Um componente pode receber uma prop class e anexá-la às suas próprias classes sem tailwind-merge.
• Variantes se aplicam depois dos utilitários simples, na ordem de variantes do Tailwind: group-*: (pelo estado e depois pelo nome do grupo), selection:, placeholder:, posição (first: …), checked:, indeterminate:, selected:, focus-within:, hover:, focus:, focus-visible:, active:, enabled:, disabled:, aria-busy:, aria-checked:, aria-expanded:, aria-pressed:, aria-selected:, data-*: (por nome), movimento, max-*: breakpoints do mais largo ao mais estreito, depois breakpoints em ordem crescente, orientação, direção, dark: e, por fim, plataforma. A variante mais alta de uma classe decide, depois a próxima mais alta, e uma variante adicional vem depois (dark:hover: depois de dark:), como o Tailwind as ordena. Assim, "active:bg-red-500 bg-blue-500" fica vermelho enquanto pressionado.
• style vence as classes. O style inline é aplicado sobre as classes resolvidas. Uma chave de estilo é a propriedade CSS de mesmo nome, a mesma que os utilitários definem, então ela substitui essa propriedade e nada mais: style={{ paddingLeft: 8 }} vence pl-4 e mantém pr-4. Um utilitário important (!p-4 ou p-4!) também vence o estilo inline.
• Estilos de texto são herdados. Utilitários de texto em uma view (text-white, font-bold, text-center, …) passam para os elementos <Text> e <Input> dentro dela, como no CSS.
• Display é o do CSS. flex e inline-flex criam uma linha, a menos que um utilitário de direção diga o contrário, onde quer que ele esteja na string (flex-col flex é uma coluna). O display: "flex" de um estilo é uma linha da mesma forma; views que não definem display mantêm o padrão de coluna do NSH.

#Unidades e o tema

Os comprimentos são em pontos (1 = um ponto no iOS, um dp no Android). O 1rem do Tailwind equivale a 16 pontos, então o tema coincide com o da web na mesma densidade: um passo de espaçamento são 4 pontos (p-4 = 16 pontos), text-base são 16 pontos.

#Valores de espaçamento

Utilitários que recebem um valor de espaçamento (padding, margin, gap, inset, largura, altura, basis, translate, leading) aceitam:

Margens, insets, translate, rotate, skew, scale, z, hue-rotate, tracking, underline-offset, outline-offset, linhas de grid e ângulos de gradiente aceitam um - inicial para valores negativos: -mt-2, -translate-x-1/2, -rotate-6. O Tailwind não tem forma negativa para os demais (-p-4, -gap-2, -w-4), e o NSH também não.

#Cores

A paleta completa do Tailwind 4 está embutida: 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, cada uma nos tons 50, 100–900, 950; mais black, white e transparent. Suas próprias cores vêm de nsh.json (veja Personalização do tema).

Todo utilitário de cor aceita:

currentColor e inherit não são valores de cor. Como em um navegador, uma borda, um outline ou um ring sem classe de cor é desenhado na cor do texto do elemento, a própria ou a herdada (<View class="text-white"><View class="border ring-2" /></View> desenha ambos de branco), e o mesmo vale para uma borda cuja largura é definida pela prop style sem cor.

#Valores arbitrários

Colchetes passam um valor que o tema não tem: w-[37px], grid-cols-[200px_1fr], bg-[linear-gradient(45deg,red,blue)].

• _ representa um espaço (grid-cols-[1fr_2fr]); escreva \_ para um sublinhado literal.
• Comprimentos: um número puro ou px (pontos), pt (4/3 de ponto, como no CSS), rem (16 pontos) e % onde porcentagens fazem sentido.
• Ângulos (rotate-[...], hue-rotate-[...], bg-linear-[...]): deg, rad, grad, turn.
• Tempos (duration-[...], delay-[...]): ms ou s; um número puro é em milissegundos.
• Dicas de tipo resolvem valores ambíguos: text-[length:22px] é um tamanho, text-[color:#333] uma cor; border-[length:3px] idem.

Propriedades CSS arbitrárias ([mask-type:luminance]) não são suportadas.

#Layout

A rolagem é um elemento, não uma classe: overflow-auto e overflow-scroll não são suportados; use scroll.

#Flexbox e grid

#Espaçamento

#Dimensionamento

Larguras de contêiner (pontos): 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 vezes a largura do 0 da fonte do elemento (o 65ch do CSS), como no Tailwind CSS.

#Tipografia

#Fonte

#Tamanho, cor e altura de linha

text-<size> define o tamanho da fonte e a altura de linha correspondente do Tailwind, que uma classe leading-* substitui onde quer que esteja na string e qualquer que seja sua variante (leading-tight md:text-lg mantém a entrelinha justa):

#Alinhamento, caixa e quebra de linha

#Decoração e sombra

As sombras de texto do Tailwind têm várias camadas; nativamente, uma sombra é desenhada: a camada mais larga.

#Inputs

#Fundos

As utilitárias de gradiente misturam suas cores em Oklab, como o Tailwind CSS as escreve (in oklab); em uma posição arbitrária (bg-linear-[25deg], bg-conic-[0.25turn]), seguem o padrão do CSS: Oklab com as cores da paleta e sRGB quando todas as paradas são cores hex, rgb(), hsl() ou nomeadas.

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

#Bordas

Tamanhos de raio (pontos): xs 2, sm 4, md 6, lg 8, xl 12, 2xl 16, 3xl 24, 4xl 32, full 9999.

#Anéis

Anéis são sombras de caixa com espalhamento, desenhadas fora da borda sem ocupar espaço.

#Efeitos

Sombras, anéis e sombras internas se combinam em uma única lista boxShadow, como no CSS. Uma cor de sombra substitui a cor de cada camada, inclusive o alfa, como o --tw-shadow-color do Tailwind: shadow-md shadow-red-500 é uma sombra vermelha opaca, shadow-md/20 shadow-red-500 uma a 20%.

#Filtros

#Transformações

As utilitárias de transformação se compõem como no CSS: translate-*, rotate-* e scale-* definem as propriedades translate, rotate e scale e se combinam independentemente da ordem; depois, transform é aplicado (rotate-x-*, skew-*). As chaves de mesmo nome da prop style substituem apenas a própria propriedade: style={{ scale: 1.1 }} substitui scale-95 e mantém rotate-3. transform, transform-gpu, transform-cpu e transform-flat são aceitas e não fazem nada: o NSH compõe todas as transformações da mesma forma, de maneira plana. As translações por uma fração do tamanho são resolvidas em relação ao frame do elemento e o acompanham quando ele é redimensionado.

#Transições e animação

As transições rodam na thread de UI quando um valor muda, inclusive quando uma variante passa a corresponder ou deixa de corresponder, então transition active:scale-95 anima o toque sem JS. Envolva as animações em motion-safe: para respeitar a configuração de redução de movimento.

#Interatividade

#SVG

#Imagens

#Aceitos sem efeito

Estas utilitárias são dicas de renderização, ou aquilo que toda view nativa já é; são interpretadas sem aviso e não mudam nada: 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. Rolagem, snapping e overscroll são props de scroll.

#Não suportado

Variantes peer-*, pseudoelementos (before:, after:), propriedades arbitrárias ([prop:value]), overflow-auto / overflow-scroll, divide-*, columns-*, float-*, container, container queries, order-*, transform-3d, select-all, border-double / outline-double, restrições intrínsecas de mín/máx (como max-w-max), snap-*, scroll-*, overscroll-*, touch-* e isolate são classes desconhecidas. nsh build e nsh dev avisam sobre as classes desconhecidas que encontram no seu código-fonte (file:line:col: unknown class '...'), e o runtime registra cada classe desconhecida uma única vez.

#Variantes

As variantes tornam uma utilitária condicional: dark:bg-zinc-900, md:flex-row, active:opacity-70. Elas se empilham (dark:active:bg-zinc-700) e são avaliadas nativamente sempre que aquilo de que dependem muda.

#Aparência e ambiente

#Breakpoints

Os breakpoints comparam a largura da janela em pontos.

Um celular em modo retrato (390 pontos de largura) não corresponde a nenhum dos breakpoints padrão; um tablet ou um celular em modo paisagem corresponde a vários. Em Rust, um breakpoint é uma condição sobre a janela: .style_when(move || window().width >= px(768.0), |s| s.p_8()) é md:p-8.

#Estados de interação

Os estados são rastreados pela plataforma apenas para os elementos cujas classes os usam, e as mudanças são aplicadas nativamente, sem ida e volta ao JS.

Os mesmos estados como objetos de estilo são as props activeStyle, hoverStyle, focusStyle, disabledStyle, checkedStyle, indeterminateStyle, expandedStyle e pressedStyle de todo elemento (e o selectedStyle de um Button); elas prevalecem sobre o estilo e as classes do elemento.

disabled funciona em qualquer elemento: aplica disabled: e remove os handlers de toque do elemento, então também não mostra feedback de toque.

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>

#Grupos

Marque um ancestral com group e estilize os descendentes de acordo com o estado dele usando group-<state>:. Dê nomes aos grupos para aninhá-los: 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>

#Posição entre irmãos

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 seleção

placeholder: se aplica ao placeholder de um <Input> e aceita apenas uma cor de texto: placeholder:text-zinc-400 (a chave de estilo placeholderColor). selection: se aplica à seleção de um <Input> ou de um <Text> selecionável e, em qualquer elemento, aos elementos dentro dele (& *::selection do Tailwind; vale o do elemento mais próximo), e aceita o seu fundo, o destaque: selection:bg-violet-200 (a chave de estilo selectionColor, que também colore o cursor de um input nas plataformas que o desenham em uma única cor).

#Importante

! antes ou depois de um utilitário (!p-4, p-4!) faz com que ele prevaleça sobre qualquer outra classe e sobre o style inline.

#Personalização do tema

Estenda o tema no objeto "tailwind" do nsh.json do seu app. Entradas com um nome novo são adicionadas; entradas com um nome já existente substituem o padrão. Os comprimentos são em pontos. O tema é verificado quando o app é empacotado: uma chave desconhecida ou um valor inválido causa um erro de 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 }
  }
}

Com esse tema, bg-brand-500, bg-brand (o tom 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 funcionam.

#Relacionados

• Tailwind: o guia.
• Estilização: class, classList, style e como eles se combinam.
• Referência de estilos: as chaves de estilo que os utilitários definem.