رموز تصميم Tailwind CSS على واجهات الويب في Red Carpet Transport

نظام التصميم

Tailwind CSS

يُرمّز التصميم القائم على الأدوات رموز الفخامة في Red Carpet عبر واجهات التسويق والحجز والبوابات.

رموز تصميم Tailwind CSS على واجهات الويب في Red Carpet Transport
نظرة عامة

واجهة مستخدم فاخرة قائمة على الأدوات

تُرمّز Tailwind CSS المسافات والطباعة والتأثيرات الزجاجية المستخدمة في الرؤوس وصفحات الوجهات وأدوات الحجز.

تُعيَّن رموز التصميم إلى متغيرات CSS للون الأساسي للعلامة التجارية والتدرجات البطلة وتأثير ضبابية رأس الزجاج — مما يُتيح المستأجرين ذوي العلامة التجارية المخصصة.

توفر مكوّنات Shadcn UI البدائية حوارات ونماذج ومفاتيح يمكن الوصول إليها دون انجراف مكوّنات مخصصة.

  • تعيين متغيرات العلامة التجارية
  • نقاط توقف أولى على الجوال
  • مجموعة مكوّنات Shadcn
  • أدوات مدركة للـ RTL
كيف يعمل

كيف تُشكّل Tailwind CSS كل نقطة تواصل مع الضيف

  • الخطوة 1

    الترميز

    تُعرّف CSS العامة ألوان العلامة التجارية وارتفاعات الرؤوس ومتغيرات التداخل البطلة التي تستهلكها الأدوات.

  • الخطوة 2

    التركيب

    تستخدم أقسام الصفحة حزمات الفخامة للوجهات والبطاقات الزجاجية ووصفات الحركة كمجموعات فئات قابلة لإعادة الاستخدام.

  • الخطوة 3

    التحقق

    تُصادق نصوص الانحدار المرئي على تباعد الصفحة الرئيسية والحجز وعرض الشرائح عبر نقاط التوقف.

رموز تصميم Tailwind CSS على واجهات الويب في Red Carpet Transport
الفوائد

مزايا التصميم

  • اتساق مرئي

    مصدر رمز واحد يمنع الألوان خارج العلامة التجارية بين صفحات التسويق والبوابات المصادق عليها.

  • تكرار سريع

    يضبط المصممون والمهندسون المسافات والطباعة دون البحث في ملفات CSS القديمة.

  • إمكانية وصول افتراضية

    تتبع حلقات التركيز وأزواج التباين والحوارات البدائية أنماط إمكانية وصول Shadcn.

الأمان — Tailwind CSS
الأمان

ممارسات تصميم آمنة

تحذف Tailwind CSS الفئات غير المستخدمة في حزم الإنتاج مما يُقلّل من سطح الهجوم من CSS غير النشط.

لا تدخل أي أنماط مستخدم مُولَّدة مضمّنة إلى DOM — يُعقَّم محتوى نظام إدارة المحتوى قبل التصيير.

  • حذف الإنتاج
  • نص منسق مُعقَّم
  • لا CSS مستخدم اعتباطي
  • حالات تركيز متسقة
التكامل — Tailwind CSS
التكامل

تكامل سلسلة الأدوات

تُعالج PostCSS Tailwind CSS مع autoprefixer داخل بناء Next.js.

تتجاور فئات المكوّنات مع وحدات React؛ تعيش الطبقات العامة في apps/web/src/app/globals.css.

  • PostCSS مع Tailwind CSS v3
  • مساعدو clsx/tailwind-merge
  • وصفات فئات الحركة الفاخرة
  • أدوات نطاقات الوجهات
حالات الاستخدام — Tailwind CSS
حالات الاستخدام

تجارب مصمَّمة

  • بطل الصفحة الرئيسية

    تشترك أداة الحجز الزجاجية وعرض شرائح الوجهات وشرائط التقنية في أدوات البطاقات المائلة.

  • مكتبة الوجهات

    تستخدم أقسام الوسائط المنقسمة وطيّات الأسئلة الشائعة والعلامات المائية الجمالية فئات فخامة الوجهات.

  • لوحات البوابات

    تُعيد استخدام جداول الإدارة والشركاء والسائقين أنماط كثافة بيانات Tailwind CSS المدمجة.

الدعم

أسئلة شائعة حول Tailwind CSS