Tailwind 参考

每个元素都可以在 class 属性中写 Tailwind CSS 类（条件类写在 classList 中）。NSH 在 Rust 中按 Tailwind 4 的默认主题解析它们：JS 只传递字符串，每个不同的字符串只解析一次并缓存；当外观、窗口尺寸或按压状态变化时，dark:、active: 等变体在原生侧重新求值，不运行任何 JS。

每个工具类设置的值都与 Tailwind CSS 4 为它生成的完全相同，含义与浏览器中一致。本页列出支持的内容。入门介绍见 Tailwind；工具类最终设置的样式键见 样式参考。

Rust 组件不使用 class 字符串：它们用 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()）。颜色是值：主题颜色，或 nsh_core::element::palette 中的 Tailwind 调色板（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:，最后是平台。与 Tailwind 的排序一样，先比较类中顺序最靠后的变体，再比较次靠后的变体，多一个变体的排在后面（dark:hover: 在 dark: 之后）。因此 "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 等）会像 CSS 一样传给其中的 <Text> 和 <Input>。
• display 遵循 CSS。 flex 和 inline-flex 是横向排列，除非有方向类另行指定，且与其在字符串中的位置无关（flex-col flex 是纵向）。样式中的 display: "flex" 同样是横向；未设置 display 的视图保持 NSH 默认的纵向排列。

#单位与主题

长度单位是点（iOS 上 1 point，Android 上 1 dp）。Tailwind 的 1rem 等于 16 点，所以在相同密度下与网页一致：一个间距步长是 4 点（p-4 为 16 点），text-base 为 16 点。

#间距值

接受间距值的工具类（内外边距、gap、inset、宽高、basis、translate、leading）可以写：

外边距、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 不是可用的颜色值。与浏览器一样，没有颜色类的边框、轮廓或环使用元素的文字颜色，可以是它自己的，也可以是继承的（<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（与 CSS 相同，为 4/3 点）、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 与网格

#间距

#尺寸

容器宽度（点）：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；与 Tailwind CSS 一样，prose 是元素字体中 0 宽度的 65 倍（CSS 的 65ch）。

#排版

#字体

#字号、颜色与行高

text-<size> 同时设置字号和 Tailwind 对应的行高；leading-* 类会替换这个行高，与它在字符串中的位置和变体无关（leading-tight md:text-lg 保持 tight 行高）：

#对齐、大小写与换行

#装饰线与阴影

Tailwind 的文字阴影有多层；原生只绘制一层，即最宽的那层。

#输入框

#背景

与 Tailwind CSS 的写法（in oklab）一致，渐变工具类在 Oklab 中混合颜色；位置为任意值时（bg-linear-[25deg]、bg-conic-[0.25turn]）遵循 CSS 的默认规则：使用调色板颜色时在 Oklab 中混合，所有色标都是十六进制、rgb()、hsl() 或具名颜色时在 sRGB 中混合。

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。

#环

环是带扩展的盒阴影，画在边框之外，不占布局空间。

#效果

阴影、环和内阴影与 CSS 一样合并为一个 boxShadow 列表。与 Tailwind 的 --tw-shadow-color 一样，阴影颜色替换各层的颜色，透明度也一并替换：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 以同一种方式合成所有变换，且都是平面的。按尺寸分数的平移会根据元素的实际尺寸计算，尺寸变化时自动更新。

#过渡与动画

值发生变化时（包括变体开始或停止匹配时），过渡在 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。滚动、吸附和越界滚动是 scroll 的属性。

#不支持

peer-* 变体、伪元素（before:、after:）、任意属性（[prop:value]）、overflow-auto / overflow-scroll、divide-*、columns-*、float-*、container、容器查询、order-*、transform-3d、select-all、border-double / outline-double、固有最小/最大尺寸约束（如 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 属性（以及 Button 的 selectedStyle）；它们叠加在元素的样式和类之上。

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> 的选区，写在任意元素上时也作用于其中的输入框和文本（Tailwind 的 & *::selection；以最近的元素为准），接受选区的背景色，即高亮颜色：selection:bg-violet-200（样式键 selectionColor；在平台用同一种颜色绘制光标和选区时，也决定输入框光标的颜色）。

#重要标记

在工具类前后加 !（!p-4、p-4!）可以让它覆盖其他所有类以及内联 style。

#主题定制

在应用 nsh.json 的 "tailwind" 对象中扩展主题。新名字的条目会被添加，与默认值同名的条目会替换默认值。长度单位是点。主题在打包时检查：未知的键或无效的值会导致构建错误。

{
  "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 及其组合方式。
• 样式参考：工具类所设置的样式键。