Tailwind リファレンス

すべての要素は、class prop(条件付きのクラスは classList)で Tailwind CSS のクラスを受け取ります。NSH は Tailwind 4 のデフォルトテーマに対して、これらを Rust 内で解決します。JS が渡すのは文字列だけで、異なる文字列は一度だけ解析されてキャッシュされます。dark: や active: などのバリアントは、外観、ウィンドウサイズ、押下状態が変化したときに、JS を実行せずネイティブに再評価されます。

各ユーティリティは、Tailwind CSS 4 が生成するものとまったく同じ内容を、ブラウザーと同じ意味で設定します。このページではサポートされているものを一覧にしています。概要については Tailwind を、ユーティリティが設定するスタイルキーについては Style リファレンス を参照してください。

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())。色は値として扱われ、テーマカラー、または nsh_core::element::palette としての Tailwind のパレットを使います(ZINC.shade(800) は zinc-800)。バリアントはスタイルのクロージャを受け取るメソッドです: .active(|s| …)、.hover(…)、.focus(…)、.disabled_style(…)、.dark(…)、.group_active(…)、そしてそれ以外には .style_when(condition, …)。Style リファレンス に、各スタイルキーに対応するメソッド名が記載されています。

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 prop を受け取り、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:、そしてプラットフォーム。クラスの最上位のバリアントで順序が決まり、次にその次の上位のバリアントで決まります。さらにバリアントが 1 つ増えるものは後になります(dark:hover: は dark: の後)。これは Tailwind の並べ方と同じです。したがって "active:bg-red-500 bg-blue-500" は、押されている間は赤になります。
• style はクラスより優先されます。 インラインの style は、解決されたクラスの上に適用されます。スタイルキーは、同名の CSS プロパティ(ユーティリティが設定するもの)であり、そのプロパティだけを置き換えます: style={{ paddingLeft: 8 }} は pl-4 に勝ち、pr-4 は維持されます。important のユーティリティ(!p-4 または p-4!)は、インラインスタイルにも勝ちます。
• テキストスタイルは継承されます。 ビューに指定したテキストユーティリティ(text-white、font-bold、text-center …)は、CSS と同様に、その内部の <Text> 要素と <Input> 要素に引き継がれます。
• display は CSS に従います。 flex と inline-flex は、方向ユーティリティが文字列のどこかで指定されていない限り row になります(flex-col flex は column)。スタイルの display: "flex" も同様に row です。display を設定しないビューは、NSH のデフォルトである column のままです。

#単位とテーマ

長さはポイントです(1 = iOS では 1 ポイント、Android では 1 dp)。Tailwind の 1rem は 16 ポイントなので、テーマは同じ密度の Web と一致します。スペーシングの 1 ステップは 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。Tailwind にはそれ以外のユーティリティ(-p-4、-gap-2、-w-4)の負の形式がなく、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 prop で幅だけを設定したボーダーも同様です。

#任意値

角括弧を使うと、テーマにない値を渡せます: w-[37px]、grid-cols-[200px_1fr]、bg-[linear-gradient(45deg,red,blue)]。

• _ はスペースを表します(grid-cols-[1fr_2fr])。リテラルのアンダースコアには \_ と書きます。
• 長さ: 数値のみ、または px(ポイント)、pt(CSS と同じく 1 ポイントの 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。prose は、Tailwind CSS と同様に、要素のフォントの 0(CSS の 65ch)の幅の 65 倍です。

#タイポグラフィ

#フォント

#サイズ、色、行の高さ

text-<size> はフォントサイズと、それに対応する Tailwind の行の高さを設定します。この行の高さは、文字列内の位置やバリアントに関係なく leading-* クラスで置き換えられます(leading-tight md:text-lg はタイトな行間を維持します):

#配置、大文字小文字、折り返し

#装飾とシャドウ

Tailwind のテキストシャドウは複数のレイヤーを持ちますが、ネイティブでは最も幅の広いレイヤーの1つのシャドウのみが描画されます。

#入力

#背景

グラデーションのユーティリティは、Tailwind CSS の記述(in oklab)と同様に Oklab で色を混合します。任意の位置(bg-linear-[25deg], bg-conic-[0.25turn])を指定した場合は CSS のデフォルトに従い、パレットの色では Oklab、すべてのストップが 16 進数、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 と同様に 1 つの 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 prop の同名のキーは、それ自身のプロパティだけを置き換えます。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 の prop です。

#非対応

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 '...')、ランタイムは未知のクラスをそれぞれ 1 回ログに記録します。

#バリアント

バリアントはユーティリティを条件付きにします: 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 とのやり取りなしにネイティブで適用されます。

スタイルオブジェクトとしての同じ状態は、すべての要素(および Button の selectedStyle)の activeStyle、hoverStyle、focusStyle、disabledStyle、checkedStyle、indeterminateStyle、expandedStyle、pressedStyle prop です。これらは要素のスタイルとクラスより優先されます。

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 と、それらの組み合わせ方。
• スタイルリファレンス: ユーティリティが設定するスタイルキー。