Справочник по Tailwind

Каждый элемент принимает классы Tailwind CSS в свойстве class (а условные классы, в classList). NSH разбирает их в Rust по стандартной теме Tailwind 4: JS передаёт только строку, каждая уникальная строка разбирается один раз и кэшируется, а варианты вроде dark: или active: пересчитываются нативно при смене оформления, размера окна или состояния нажатия, без запуска JS.

Каждая утилита задаёт ровно то, что для неё генерирует Tailwind CSS 4, с тем же смыслом, что и в браузере. На этой странице перечислено то, что поддерживается. Введение см. в разделе Tailwind; ключи стиля, которые задают утилиты, описаны в справочнике по стилям.

Компоненты Rust не принимают строки классов: они стилизуют элементы типизированными методами Styled (nsh_core::prelude), названными по этим утилитам и разрешающимися в те же значения, включая стандартные шкалы Tailwind (px-4 это .px_4(), rounded-2xl это .rounded_2xl(), shadow-md это .shadow_md(), bg-linear-to-br это .bg_linear_to_br()). Цвета являются значениями: цвета темы или палитра Tailwind в виде nsh_core::element::palette (ZINC.shade(800) это zinc-800). Варианты это методы, принимающие замыкание со стилями: .active(|s| …), .hover(…), .focus(…), .disabled_style(…), .dark(…), .group_active(…), а для остальных .style_when(condition, …). Справочник по стилям указывает метод для каждого ключа стиля.

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>

#Как комбинируются классы

• Побеждает последний. Среди утилит одного уровня варианта побеждает та, что стоит в строке позже: "p-4 p-2" это p-2. Компонент может принять свойство class и добавить его к своим классам без tailwind-merge.
• Варианты применяются после обычных утилит в порядке вариантов Tailwind: group-*: (по их состоянию, затем по имени группы), selection:, placeholder:, позиция (first: …), checked:, indeterminate:, selected:, focus-within:, hover:, focus:, focus-visible:, active:, enabled:, disabled:, aria-busy:, aria-checked:, aria-expanded:, aria-pressed:, aria-selected:, data-*: (по имени), движение, точки останова max-*: от самых широких, затем точки останова по возрастанию, ориентация, направление, dark:, затем платформа. Решает старший вариант класса, затем следующий по старшинству, а класс с ещё одним вариантом идёт позже (dark:hover: после dark:), так же как их сортирует Tailwind. Поэтому "active:bg-red-500 bg-blue-500" красный, пока элемент нажат.
• style побеждает классы. Инлайновый style применяется поверх разрешённых классов. Ключ стиля это CSS-свойство с тем же именем, которое задают утилиты, поэтому он заменяет только это свойство и ничего больше: style={{ paddingLeft: 8 }} перекрывает pl-4 и сохраняет pr-4. Важная утилита (!p-4 или p-4!) побеждает и инлайновый стиль.
• Стили текста наследуются. Текстовые утилиты на представлении (text-white, font-bold, text-center, …) передаются вложенным в него элементам <Text> и <Input>, как в CSS.
• Display работает как в CSS. flex и inline-flex дают строку, если утилита направления не указывает иное, где бы она ни стояла в строке (flex-col flex это столбец). display: "flex" в стиле так же означает строку; представления, не задающие display, сохраняют столбец по умолчанию, принятый в NSH.

#Единицы измерения и тема

Длины измеряются в пунктах (1 = один пункт на iOS, один dp на Android). 1rem в Tailwind равен 16 пунктам, поэтому тема совпадает с веб-версией при той же плотности: один шаг отступа равен 4 пунктам (p-4 = 16 пунктов), text-base равен 16 пунктам.

#Значения отступов

Утилиты, принимающие значение отступа (padding, margin, gap, inset, ширина, высота, basis, translate, leading), допускают:

Margin, inset, translate, rotate, skew, scale, z, hue-rotate, tracking, underline-offset, outline-offset, линии сетки и углы градиента принимают ведущий - для отрицательных значений: -mt-2, -translate-x-1/2, -rotate-6. У остальных (-p-4, -gap-2, -w-4) в Tailwind нет отрицательной формы, нет её и в NSH.

#Цвета

Полная палитра Tailwind 4 встроена: 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, каждый в оттенках 50, 100–900, 950; а также black, white и transparent. Собственные цвета берутся из nsh.json (см. Настройка темы).

Каждая цветовая утилита принимает:

currentColor и inherit не являются значениями цвета. Как и в браузере, граница, outline или ring без цветового класса рисуется цветом текста элемента, собственным или унаследованным (<View class="text-white"><View class="border ring-2" /></View> рисует оба белым), и так же рисуется граница, толщину которой задаёт свойство style без цвета.

#Произвольные значения

Квадратные скобки передают значение, которого нет в теме: w-[37px], grid-cols-[200px_1fr], bg-[linear-gradient(45deg,red,blue)].

• _ обозначает пробел (grid-cols-[1fr_2fr]); для буквального подчёркивания пишите \_.
• Длины: просто число или px (пункты), pt (4/3 пункта, как в CSS), rem (16 пунктов) и % там, где уместны проценты.
• Углы (rotate-[...], hue-rotate-[...], bg-linear-[...]): deg, rad, grad, turn.
• Время (duration-[...], delay-[...]): ms или s; просто число означает миллисекунды.
• Подсказки типа разрешают неоднозначные значения: text-[length:22px] это размер, text-[color:#333] цвет; border-[length:3px] аналогично.

Произвольные CSS-свойства ([mask-type:luminance]) не поддерживаются.

#Раскладка

Прокрутка это элемент, а не класс: overflow-auto и overflow-scroll не поддерживаются; используйте scroll.

#Flexbox и grid

#Отступы

#Размеры

Ширина контейнеров (в пунктах): 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 ширинам 0 шрифта элемента (65ch в CSS), как в Tailwind CSS.

#Типографика

#Шрифт

#Размер, цвет и высота строки

text-<size> задаёт размер шрифта и соответствующую высоту строки из Tailwind; её заменяет класс leading-*, где бы он ни стоял в строке и каков бы ни был его вариант (leading-tight md:text-lg сохраняет плотный межстрочный интервал):

#Выравнивание, регистр и перенос

#Оформление и тень

У текстовых теней Tailwind несколько слоёв; нативно рисуется одна тень — самый широкий слой.

#Поля ввода

#Фоны

Утилиты градиентов смешивают цвета в Oklab, как их записывает Tailwind CSS (in oklab); при произвольной позиции (bg-linear-[25deg], bg-conic-[0.25turn]) они следуют значению CSS по умолчанию: Oklab для цветов палитры и sRGB, когда каждый опорный цвет — hex, rgb(), hsl() или именованный цвет.

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

#Границы

Размеры радиуса (в пунктах): xs 2, sm 4, md 6, lg 8, xl 12, 2xl 16, 3xl 24, 4xl 32, full 9999.

#Кольца

Кольца — это тени блока с растяжением (spread); они рисуются снаружи границы и не занимают места.

#Эффекты

Тени, кольца и внутренние тени объединяются в один список boxShadow, как в CSS. Цвет тени заменяет цвет каждого слоя, включая альфа-канал, как --tw-shadow-color в Tailwind: shadow-md shadow-red-500 — непрозрачная красная тень, shadow-md/20 shadow-red-500 — тень с альфа-каналом 20%.

#Фильтры

#Трансформации

Утилиты трансформаций компонуются как в CSS: translate-*, rotate-* и scale-* задают свойства translate, rotate и scale и комбинируются независимо от порядка, затем применяется transform (rotate-x-*, skew-*). Ключи пропа style с теми же именами заменяют только своё свойство: style={{ scale: 1.1 }} заменяет scale-95 и сохраняет rotate-3. transform, transform-gpu, transform-cpu и transform-flat принимаются и ничего не делают: NSH компонует все трансформации одинаково, плоско. Сдвиги на долю размера вычисляются относительно frame элемента и следуют за ним при изменении размера.

#Переходы и анимация

Переходы выполняются в UI-потоке при изменении значения, в том числе когда вариант начинает или перестаёт совпадать, поэтому transition active:scale-95 анимирует нажатие без JS. Оборачивайте анимации в motion-safe:, чтобы учитывать настройку уменьшения движения.

#Интерактивность

#SVG

#Изображения

#Принимаются без эффекта

Эти утилиты — подсказки для рендеринга или то, чем уже является любое нативное представление; они разбираются без предупреждения и ничего не меняют: 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. Прокрутка, привязка (snapping) и overscroll — это пропы scroll.

#Не поддерживается

Варианты peer-*, псевдоэлементы (before:, after:), произвольные свойства ([prop:value]), overflow-auto / overflow-scroll, divide-*, columns-*, float-*, container, контейнерные запросы, order-*, transform-3d, select-all, border-double / outline-double, внутренние (intrinsic) ограничения min/max (например, max-w-max), snap-*, scroll-*, overscroll-*, touch-* и isolate — неизвестные классы. nsh build и nsh dev предупреждают о неизвестных классах, найденных в вашем исходном коде (file:line:col: unknown class '...'), а рантайм логирует каждый неизвестный класс один раз.

#Варианты

Варианты делают утилиту условной: dark:bg-zinc-900, md:flex-row, active:opacity-70. Они комбинируются (dark:active:bg-zinc-700) и вычисляются нативно при каждом изменении того, от чего зависят.

#Оформление и окружение

#Брейкпоинты

Брейкпоинты сравниваются с шириной окна в пунктах.

Телефон в портретной ориентации (шириной 390 пунктов) не соответствует ни одному из брейкпоинтов по умолчанию; планшет или телефон в альбомной ориентации соответствует нескольким. В Rust брейкпоинт — это условие на окно: .style_when(move || window().width >= px(768.0), |s| s.p_8()) — это md:p-8.

#Состояния взаимодействия

Платформа отслеживает состояния только для элементов, в классах которых они используются, а изменения применяются нативно, без обращения к JS.

Те же состояния в виде объектов стиля — это пропы activeStyle, hoverStyle, focusStyle, disabledStyle, checkedStyle, indeterminateStyle, expandedStyle и pressedStyle каждого элемента (и selectedStyle у Button); они накладываются поверх стиля и классов элемента.

disabled работает на любом элементе: он применяет disabled: и убирает обработчики нажатий элемента, поэтому обратной связи при нажатии тоже нет.

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>

#Группы

Пометьте предка с помощью group и стилизуйте потомков по его состоянию с помощью group-<state>:. Назовите группы, чтобы вкладывать их друг в друга: group/card и 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>

#Позиция среди соседних элементов

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: применяется к плейсхолдеру элемента <Input> и принимает только цвет текста: placeholder:text-zinc-400 (ключ стиля placeholderColor). selection: применяется к выделению элемента <Input> или выделяемого элемента <Text>, а на любом элементе — к выделению внутри него (& *::selection в Tailwind; побеждает ближайший элемент), и принимает фон — подсветку: selection:bg-violet-200 (ключ стиля selectionColor, который также окрашивает каретку поля ввода там, где платформа рисует её одним цветом).

#Важно

! до или после утилиты (!p-4, p-4!) делает её приоритетнее всех остальных классов и встроенного style.

#Настройка темы

Расширьте тему в объекте "tailwind" файла nsh.json вашего приложения. Записи с новым именем добавляются; записи с существующим именем заменяют значения по умолчанию. Длины задаются в пунктах. Тема проверяется при сборке приложения: неизвестный ключ или недопустимое значение приводят к ошибке сборки.

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

С такой темой работают bg-brand-500, bg-brand (оттенок 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 и max-w-content.

#См. также

• Tailwind: руководство.
• Стилизация: class, classList, style и как они сочетаются.
• Справочник по стилям: ключи стиля, которые задают утилиты.