Referencia de Tailwind

Cada elemento acepta clases de Tailwind CSS en su prop class (y las condicionales en classList). NSH las resuelve en Rust con el tema por defecto de Tailwind 4: JS solo pasa la cadena, cada cadena distinta se analiza una sola vez y se guarda en caché, y variantes como dark: o active: se reevalúan de forma nativa cuando cambia la apariencia, el tamaño de la ventana o el estado de pulsación, sin ejecutar nada de JS.

Cada utilidad establece exactamente lo que Tailwind CSS 4 genera para ella, con el mismo significado que en un navegador. Esta página enumera lo que se admite. Para una introducción, consulta Tailwind; para las claves de estilo que establecen las utilidades, consulta la Referencia de estilos.

Los componentes de Rust no reciben cadenas de clases: dan estilo a los elementos con los métodos tipados de Styled (nsh_core::prelude), que se llaman como estas utilidades y se resuelven a los mismos valores, incluidas las escalas por defecto de Tailwind (px-4 es .px_4(), rounded-2xl .rounded_2xl(), shadow-md .shadow_md(), bg-linear-to-br .bg_linear_to_br()). Los colores son valores: colores del tema, o la paleta de Tailwind como nsh_core::element::palette (ZINC.shade(800) es zinc-800). Las variantes son métodos que reciben un closure de estilos: .active(|s| …), .hover(…), .focus(…), .disabled_style(…), .dark(…), .group_active(…) y .style_when(condition, …) para el resto. La Referencia de estilos indica el método de cada clave 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>

#Cómo se combinan las clases

• Gana la última. Entre utilidades del mismo nivel de variante, gana la que aparece más tarde en la cadena: "p-4 p-2" es p-2. Un componente puede recibir una prop class y añadirla a sus propias clases sin tailwind-merge.
• Las variantes se aplican después de las utilidades simples, en el orden de variantes de Tailwind: group-*: (por su estado, luego por nombre de grupo), selection:, placeholder:, posición (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 nombre), movimiento, puntos de corte de max-*: del más ancho al más estrecho, luego puntos de corte ascendentes, orientación, dirección, dark: y, por último, plataforma. Decide la variante más alta de la clase, después la siguiente más alta, y una variante adicional va después (dark:hover: después de dark:), tal como las ordena Tailwind. Así, "active:bg-red-500 bg-blue-500" es rojo mientras está pulsado.
• style gana sobre las clases. El style en línea se aplica encima de las clases resueltas. Una clave de estilo es la propiedad CSS de su nombre, la que establecen las utilidades, así que reemplaza esa propiedad y nada más: style={{ paddingLeft: 8 }} se impone a pl-4 y conserva pr-4. Una utilidad importante (!p-4 o p-4!) también se impone al estilo en línea.
• Los estilos de texto se heredan. Las utilidades de texto en una vista (text-white, font-bold, text-center, …) pasan a los elementos <Text> y <Input> que contiene, como en CSS.
• El display es el de CSS. flex y inline-flex producen una fila salvo que una utilidad de dirección indique otra cosa, esté donde esté en la cadena (flex-col flex es una columna). El display: "flex" de un estilo es una fila del mismo modo; las vistas que no establecen display mantienen la columna por defecto de NSH.

#Unidades y tema

Las longitudes son puntos (1 = un punto en iOS, un dp en Android). El 1rem de Tailwind equivale a 16 puntos, de modo que el tema coincide con el de la web a la misma densidad: un paso de espaciado son 4 puntos (p-4 = 16 puntos), text-base son 16 puntos.

#Valores de espaciado

Las utilidades que aceptan un valor de espaciado (padding, margin, gap, inset, width, height, basis, translate, leading) admiten:

Los márgenes, los insets, translate, rotate, skew, scale, z, hue-rotate, tracking, underline-offset, outline-offset, las líneas de la cuadrícula y los ángulos de los degradados admiten un - inicial para valores negativos: -mt-2, -translate-x-1/2, -rotate-6. Tailwind no tiene forma negativa para el resto (-p-4, -gap-2, -w-4), y NSH tampoco.

#Colores

La paleta completa de Tailwind 4 está incorporada: 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 uno en los tonos 50, 100–900, 950; además de black, white y transparent. Tus propios colores provienen de nsh.json (consulta Personalización del tema).

Toda utilidad de color admite:

currentColor y inherit no son valores de color. Como en un navegador, un borde, un contorno o un anillo sin clase de color se dibuja con el color de texto del elemento, el propio o el que hereda (<View class="text-white"><View class="border ring-2" /></View> dibuja ambos en blanco), y lo mismo ocurre con un borde cuyo grosor establece la prop style sin color.

#Valores arbitrarios

Los corchetes pasan un valor que el tema no tiene: w-[37px], grid-cols-[200px_1fr], bg-[linear-gradient(45deg,red,blue)].

• _ representa un espacio (grid-cols-[1fr_2fr]); escribe \_ para un guion bajo literal.
• Longitudes: un número sin unidad o px (puntos), pt (4/3 de punto, como en CSS), rem (16 puntos) y % donde los porcentajes tienen sentido.
• Ángulos (rotate-[...], hue-rotate-[...], bg-linear-[...]): deg, rad, grad, turn.
• Tiempos (duration-[...], delay-[...]): ms o s; un número sin unidad son milisegundos.
• Las indicaciones de tipo resuelven valores ambiguos: text-[length:22px] es un tamaño, text-[color:#333] un color; border-[length:3px] igualmente.

Las propiedades CSS arbitrarias ([mask-type:luminance]) no se admiten.

#Layout

El scroll es un elemento, no una clase: overflow-auto y overflow-scroll no se admiten; usa scroll.

#Flexbox y grid

#Espaciado

#Tamaño

Anchos de contenedor (puntos): 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 es 65 veces el ancho del 0 de la fuente del elemento (el 65ch de CSS), como en Tailwind CSS.

#Tipografía

#Fuente

#Tamaño, color y altura de línea

text-<size> establece el tamaño de fuente y la altura de línea correspondiente de Tailwind, que una clase leading-* reemplaza esté donde esté en la cadena y sea cual sea su variante (leading-tight md:text-lg conserva el interlineado ajustado):

#Alineación, mayúsculas y ajuste de línea

#Decoración y sombra

Las sombras de texto de Tailwind tienen varias capas; de forma nativa se dibuja una sola sombra, la capa más ancha.

#Inputs

#Fondos

Las utilidades de degradado mezclan sus colores en Oklab, tal como las escribe Tailwind CSS (in oklab); en una posición arbitraria (bg-linear-[25deg], bg-conic-[0.25turn]) siguen el comportamiento por defecto de CSS: Oklab con los colores de la paleta y sRGB cuando todas las paradas son colores hexadecimales, rgb(), hsl() o colores con nombre.

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

#Bordes

Tamaños de radio (puntos): xs 2, sm 4, md 6, lg 8, xl 12, 2xl 16, 3xl 24, 4xl 32, full 9999.

#Anillos

Los anillos son sombras de caja con propagación (spread), dibujadas fuera del borde sin ocupar espacio.

#Efectos

Las sombras, los anillos y las sombras interiores se combinan en una sola lista boxShadow, como en CSS. El color de una sombra reemplaza el color de cada capa, también su alfa, igual que --tw-shadow-color de Tailwind: shadow-md shadow-red-500 es una sombra roja opaca, shadow-md/20 shadow-red-500 una al 20 %.

#Filtros

#Transformaciones

Las utilidades de transformación se componen como en CSS: translate-*, rotate-* y scale-* establecen las propiedades translate, rotate y scale y se combinan sin importar el orden; después se aplica transform (rotate-x-*, skew-*). Las claves del prop style con los mismos nombres reemplazan solo su propia propiedad: style={{ scale: 1.1 }} reemplaza scale-95 y conserva rotate-3. transform, transform-gpu, transform-cpu y transform-flat se aceptan y no hacen nada: NSH compone todas las transformaciones por igual, en plano. Las traslaciones por una fracción del tamaño se resuelven con respecto al frame del elemento y lo siguen cuando cambia de tamaño.

#Transiciones y animación

Las transiciones se ejecutan en el hilo de la UI cuando cambia un valor, incluso cuando una variante empieza o deja de coincidir, de modo que transition active:scale-95 anima la pulsación sin JS. Envuelve las animaciones en motion-safe: para respetar el ajuste de reducción de movimiento.

#Interactividad

#SVG

#Imágenes

#Aceptadas sin efecto

Estas utilidades son indicaciones de renderizado, o lo que ya es toda vista nativa; se analizan sin advertencia y no cambian 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. El desplazamiento, el snapping y el overscroll son props de scroll.

#No compatibles

Las variantes peer-*, los pseudoelementos (before:, after:), las propiedades arbitrarias ([prop:value]), overflow-auto / overflow-scroll, divide-*, columns-*, float-*, container, las container queries, order-*, transform-3d, select-all, border-double / outline-double, las restricciones intrínsecas de mínimo/máximo (como max-w-max), snap-*, scroll-*, overscroll-*, touch-* y isolate son clases desconocidas. nsh build y nsh dev avisan de las clases desconocidas que encuentran en tu código fuente (file:line:col: unknown class '...'), y el runtime registra cada clase desconocida una sola vez.

#Variantes

Las variantes hacen que una utilidad sea condicional: dark:bg-zinc-900, md:flex-row, active:opacity-70. Se pueden apilar (dark:active:bg-zinc-700) y se evalúan de forma nativa cada vez que cambia aquello de lo que dependen.

#Apariencia y entorno

#Breakpoints

Los breakpoints comparan el ancho de la ventana en puntos.

Un teléfono en vertical (390 puntos de ancho) no coincide con ninguno de los breakpoints por defecto; una tableta o un teléfono en horizontal coincide con varios. En Rust, un breakpoint es una condición sobre la ventana: .style_when(move || window().width >= px(768.0), |s| s.p_8()) es md:p-8.

#Estados de interacción

La plataforma sigue los estados solo en los elementos cuyas clases los usan, y los cambios se aplican de forma nativa, sin ida y vuelta a JS.

Los mismos estados como objetos de estilo son los props activeStyle, hoverStyle, focusStyle, disabledStyle, checkedStyle, indeterminateStyle, expandedStyle y pressedStyle de cada elemento (y selectedStyle de un Button); se superponen al estilo y a las clases del elemento.

disabled funciona en cualquier elemento: aplica disabled: y elimina los manejadores de pulsación del elemento, por lo que tampoco muestra respuesta visual al pulsar.

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

Marca un ancestro con group y aplica estilos a los descendientes según su estado con group-<state>:. Asigna nombres a los grupos para anidarlos: group/card y 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>

#Posición entre hermanos

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>

#Marcador de posición y selección

placeholder: se aplica al marcador de posición de un <Input> y solo admite un color de texto: placeholder:text-zinc-400 (la clave de estilo placeholderColor). selection: se aplica a la selección de un <Input> o de un <Text> seleccionable, y en cualquier elemento a los que contiene (el & *::selection de Tailwind; prevalece el del elemento más cercano), y admite su fondo, el resaltado: selection:bg-violet-200 (la clave de estilo selectionColor, que también tiñe el cursor de texto de un input en las plataformas que lo dibujan de un solo color).

#Importante

! antes o después de una utilidad (!p-4, p-4!) hace que prevalezca sobre cualquier otra clase y sobre el style en línea.

#Personalización del tema

Extiende el tema en el objeto "tailwind" del nsh.json de tu app. Las entradas con un nombre nuevo se añaden; las entradas con un nombre existente reemplazan a las predeterminadas. Las longitudes están en puntos. El tema se comprueba al empaquetar la app: una clave desconocida o un valor no válido provoca un error de compilación.

{
  "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 este tema, bg-brand-500, bg-brand (la tonalidad 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 y max-w-content funcionan.

#Relacionado

• Tailwind: la guía.
• Estilos: class, classList, style y cómo se combinan.
• Referencia de estilos: las claves de estilo que establecen las utilidades.