مرجع 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). المتغيّرات دوال تأخذ closure من الأنماط: .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!) على النمط المضمَّن أيضًا.
• تُورَّث أنماط النص. تنتقل فئات النص على view (text-white، font-bold، text-center، …) إلى عناصر <Text> و<Input> داخله، كما في CSS.
• يتبع display قواعد CSS. يجعل flex وinline-flex العنصر صفًا ما لم تنص فئة اتجاه على غير ذلك، أيًّا كان موضعها في السلسلة (flex-col flex عمود). ويكون display: "flex" في النمط صفًا بالطريقة نفسها؛ أما الـ views التي لا تضبط display فتحتفظ بالافتراضي في NSH وهو العمود.

#الوحدات والسمة

الأطوال بالنقاط (1 = نقطة واحدة على iOS، وdp واحد على Android). يساوي 1rem في Tailwind ‏16 نقطة، فتطابق السمة الويب بالكثافة نفسها: خطوة التباعد الواحدة 4 نقاط (p-4 = 16 نقطة)، وtext-base يساوي 16 نقطة.

#قيم التباعد

الفئات التي تأخذ قيمة تباعد (padding وmargin وgap وinset وwidth وheight، 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. ليس في 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 قيمًا لونية. كما في المتصفح، تُرسم الحدود (border) أو الإطار الخارجي (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.

#الحلقات

الحلقات هي ظلال صندوقية ذات انتشار، تُرسم خارج الحد دون أن تشغل حيزًا.

#التأثيرات

تُدمج الظلال والحلقات والظلال الداخلية في قائمة 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 كل التحويلات بالطريقة نفسها، مسطّحة. تُحسب الإزاحات بكسر من الحجم بالنسبة إلى إطار العنصر، وتتبعه عند تغيير حجمه.

#الانتقالات والحركة

تعمل الانتقالات على خيط واجهة المستخدم عند تغير قيمة، بما في ذلك عندما يبدأ تطابق متغيّر (variant) أو ينتهي، لذا يحرّك 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 '...')، ويسجّل وقت التشغيل كل صنف غير معروف مرة واحدة.

#المتغيّرات (Variants)

تجعل المتغيّرات الأداة مشروطة: dark:bg-zinc-900, md:flex-row, active:opacity-70. يمكن تكديسها (dark:active:bg-zinc-700) وتُقيَّم أصليًا كلما تغيّر ما تعتمد عليه.

#المظهر والبيئة

#نقاط التوقف (Breakpoints)

تقارن نقاط التوقف عرض النافذة بالنقاط.

لا يطابق الهاتف في الوضع الرأسي (بعرض 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: على النص البديل (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 وكيفية اجتماعها.
• مرجع الأنماط: مفاتيح الأنماط التي تضبطها الأدوات المساعدة.