Tailwind संदर्भ

हर element अपने class prop में Tailwind CSS classes लेता है (और शर्त वाली classes classList में)। NSH इन्हें Rust में Tailwind 4 की default theme के विरुद्ध resolve करता है: JS केवल string पास करता है, हर अलग string एक बार parse होकर cache हो जाती है, और dark: या active: जैसे variants, appearance, window size या press state बदलने पर, बिना कोई JS चलाए, native रूप से दोबारा evaluate होते हैं।

हर utility ठीक वही सेट करती है जो Tailwind CSS 4 उसके लिए generate करता है, और उसका अर्थ वही है जो ब्राउज़र में होता है। यह पृष्ठ बताता है कि क्या समर्थित है। परिचय के लिए Tailwind देखें; utilities जो style keys सेट करती हैं, उनके लिए Style reference देखें।

Rust components class strings नहीं लेते: वे Styled (nsh_core::prelude) के typed methods से elements को style करते हैं, जिनके नाम इन्हीं utilities पर आधारित हैं और जो वही मान resolve करते हैं, Tailwind के default scales सहित (px-4 यानी .px_4(), rounded-2xl यानी .rounded_2xl(), shadow-md यानी .shadow_md(), bg-linear-to-br यानी .bg_linear_to_br())। Colors मान (values) हैं: theme colors, या Tailwind का palette nsh_core::element::palette के रूप में (ZINC.shade(800) यानी zinc-800)। Variants ऐसे methods हैं जो styles का closure लेते हैं: .active(|s| …), .hover(…), .focus(…), .disabled_style(…), .dark(…), .group_active(…), और बाकी के लिए .style_when(condition, …)। Style reference हर style key का method बताता है।

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>

#Classes कैसे मिलती हैं

• बाद वाली जीतती है। एक ही variant स्तर की utilities में, string में बाद वाली जीतती है: "p-4 p-2" यानी p-2। कोई component class prop लेकर उसे अपनी classes के अंत में जोड़ सकता है, tailwind-merge के बिना।
• Variants सादी utilities के बाद लागू होते हैं, Tailwind के variant क्रम में: group-*: (पहले उनकी state से, फिर group नाम से), selection:, placeholder:, position (first: …), checked:, indeterminate:, selected:, focus-within:, hover:, focus:, focus-visible:, active:, enabled:, disabled:, aria-busy:, aria-checked:, aria-expanded:, aria-pressed:, aria-selected:, data-*: (नाम से), motion, max-*: breakpoints चौड़े से पहले, फिर बढ़ते क्रम में breakpoints, orientation, direction, dark:, फिर platform। किसी class का सबसे ऊँचा variant तय करता है, फिर उसका अगला सबसे ऊँचा, और एक अतिरिक्त variant बाद में आता है (dark:hover: dark: के बाद), जैसा Tailwind उन्हें sort करता है। इसलिए "active:bg-red-500 bg-blue-500" दबाए जाने पर लाल होता है।
• style classes पर जीतता है। Inline style resolve हुई classes के ऊपर लागू होता है। Style key अपने नाम की CSS property है, वही जो utilities सेट करती हैं, इसलिए वह केवल उसी property को बदलती है, और कुछ नहीं: style={{ paddingLeft: 8 }}, pl-4 को हराता है और pr-4 को बनाए रखता है। Important utility (!p-4 या p-4!) inline style पर भी जीतती है।
• Text styles inherit होती हैं। View पर text utilities (text-white, font-bold, text-center, …) उसके अंदर के <Text> और <Input> elements तक पहुँचती हैं, जैसा CSS में होता है।
• Display CSS वाला है। flex और inline-flex row बनाते हैं, जब तक कोई direction utility कुछ और न कहे, चाहे वह string में कहीं भी हो (flex-col flex column है)। Style का display: "flex" भी उसी तरह row है; जो views कोई display सेट नहीं करते वे NSH का column default रखते हैं।

#Units और theme

लंबाइयाँ points में होती हैं (1 = iOS पर एक point, Android पर एक dp)। Tailwind का 1rem 16 points है, इसलिए theme उसी density पर वेब से मेल खाती है: एक spacing step 4 points है (p-4 = 16 points), text-base 16 points है।

#Spacing मान

जो utilities spacing मान लेती हैं (padding, margin, gap, inset, width, height, basis, translate, leading) वे ये स्वीकार करती हैं:

Margins, insets, translate, rotate, skew, scale, z, hue-rotate, tracking, underline-offset, outline-offset, grid lines और gradient angles negative मानों के लिए आगे - लेते हैं: -mt-2, -translate-x-1/2, -rotate-6। Tailwind में बाकियों का कोई negative रूप नहीं है (-p-4, -gap-2, -w-4), और NSH में भी नहीं है।

#Colors

पूरा Tailwind 4 palette built-in है: 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, हर एक shades 50, 100–900, 950 में; साथ में black, white और transparent। आपके अपने colors nsh.json से आते हैं (देखें Theme customization)।

हर color utility ये लेती है:

currentColor और inherit color मान नहीं हैं। ब्राउज़र की तरह, color class के बिना border, outline या ring element के text color में बनता है, चाहे वह उसका अपना हो या inherit किया हुआ (<View class="text-white"><View class="border ring-2" /></View> दोनों को सफ़ेद बनाता है), और यही उस border के साथ भी होता है जिसकी चौड़ाई style prop बिना color के सेट करता है।

#Arbitrary मान

Square brackets ऐसा मान पास करते हैं जो theme में नहीं है: w-[37px], grid-cols-[200px_1fr], bg-[linear-gradient(45deg,red,blue)]।

• _ एक space के लिए है (grid-cols-[1fr_2fr]); शाब्दिक underscore के लिए \_ लिखें।
• लंबाइयाँ: केवल संख्या या px (points), pt (एक point का 4/3, जैसा CSS में), rem (16 points), और % जहाँ प्रतिशत का अर्थ बनता है।
• Angles (rotate-[...], hue-rotate-[...], bg-linear-[...]): deg, rad, grad, turn।
• Times (duration-[...], delay-[...]): ms या s; केवल संख्या milliseconds मानी जाती है।
• Type hints अस्पष्ट मानों को तय करते हैं: text-[length:22px] एक size है, text-[color:#333] एक color; border-[length:3px] भी इसी तरह।

Arbitrary CSS properties ([mask-type:luminance]) समर्थित नहीं हैं।

#Layout

Scrolling एक element है, class नहीं: overflow-auto और overflow-scroll समर्थित नहीं हैं; scroll का उपयोग करें।

#Flexbox और grid

#Spacing

#Sizing

Container की चौड़ाइयाँ (points में): 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 element के font के 0 की चौड़ाई का 65 गुना है (CSS का 65ch), जैसा Tailwind CSS में होता है।

#Typography

#Font

#Size, color और line height

text-<size> font size और Tailwind की उससे मेल खाती line height सेट करता है, जिसे leading-* class बदल देती है, चाहे वह string में कहीं भी हो और उसका variant कुछ भी हो (leading-tight md:text-lg तंग leading को बनाए रखता है):

#Alignment, case और wrapping

#सजावट और शैडो

Tailwind के टेक्स्ट शैडो में कई लेयर होती हैं; नेटिव रूप से एक शैडो बनाया जाता है, सबसे चौड़ी लेयर।

#इनपुट

#बैकग्राउंड

ग्रेडिएंट यूटिलिटी अपने रंगों को Oklab में मिलाती हैं, जैसा Tailwind CSS उन्हें लिखता है (in oklab); किसी मनमानी पोज़िशन (bg-linear-[25deg], bg-conic-[0.25turn]) पर वे CSS के डिफ़ॉल्ट का पालन करती हैं: पैलेट के रंगों के साथ Oklab, और जब हर स्टॉप hex, 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, इंट्रिन्सिक 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 प्रॉप हैं (और 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>

#समूह (Groups)

किसी पूर्वज (ancestor) को group से चिह्नित करें और उसकी स्थिति के आधार पर वंशजों (descendants) को 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>

#सहोदरों (siblings) के बीच स्थिति

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 और चयन (selection)

placeholder: किसी <Input> के placeholder पर लागू होता है और केवल टेक्स्ट का रंग लेता है: placeholder:text-zinc-400 (स्टाइल कुंजी placeholderColor)। selection: किसी <Input> या चयन-योग्य <Text> के चयन पर लागू होता है, और किसी भी एलिमेंट पर उसके अंदर मौजूद एलिमेंट्स पर (Tailwind का & *::selection; सबसे नज़दीकी एलिमेंट का मान लागू होता है), और यह उसकी पृष्ठभूमि (background), यानी हाइलाइट, लेता है: selection:bg-violet-200 (स्टाइल कुंजी selectionColor, जो उन प्लेटफ़ॉर्म पर input के caret को भी वही रंग देती है जहाँ caret एक ही रंग में बनाया जाता है)।

#महत्वपूर्ण

किसी utility (!p-4, p-4!) से पहले या बाद में ! लगाने पर वह अन्य सभी क्लासेज़ और inline style पर प्राथमिकता पाती है।

#थीम कस्टमाइज़ेशन

अपने ऐप के nsh.json के "tailwind" ऑब्जेक्ट में थीम को विस्तारित करें। नए नाम वाली प्रविष्टियाँ जोड़ी जाती हैं; मौजूदा नाम वाली प्रविष्टियाँ डिफ़ॉल्ट को बदल देती हैं। लंबाइयाँ points में होती हैं। ऐप को bundle करते समय थीम की जाँच की जाती है: कोई अज्ञात कुंजी या अमान्य मान build error है।

{
  "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 shade), 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: गाइड।
• Styling: class, classList, style और वे कैसे मिलकर काम करते हैं।
• Style reference: वे स्टाइल कुंजियाँ जो utilities सेट करती हैं।