مُنشئ مكوّنات React Tailwind مع معاينة مباشرة

مقدمة

يُعتبر مُنشئ مكوّنات React Tailwind أداة قوية وسهلة الاستخدام تتيح للمطورين إنشاء وتخصيص مكوّنات React بصريًا باستخدام فئات Tailwind CSS. سواء كنت تقوم بتصميم واجهة جديدة، أو تتعلم Tailwind CSS، أو تحتاج ببساطة إلى توليد كود مكوّنات بسرعة، فإن هذه الأداة التفاعلية توفر معاينات في الوقت الحقيقي وتولد كودًا نظيفًا جاهزًا للإنتاج. من خلال دمج مرونة React مع النهج القائم على الأدوات لـ Tailwind CSS، يمكنك بناء مكوّنات واجهة مستخدم جميلة واستجابة بسرعة دون الحاجة إلى كتابة CSS من الصفر.

تدعم هذه الأداة إنشاء مكوّنات React الأساسية بما في ذلك الأزرار، ومدخلات النص، ومربعات النص، وقوائم الاختيار المنسدلة، والتنقل عبر الخبز. يمكن تخصيص كل مكوّن بشكل موسع باستخدام خصائص Tailwind CSS، مما يتيح لك ضبط الألوان، والمسافات، والطباعة، والحدود، والمزيد - كل ذلك مع معاينة حية فورية تتحدث مع إجراء التعديلات.

الميزات الرئيسية

• أنواع مكوّنات متعددة: بناء الأزرار، ومدخلات النص، ومربعات النص، وقوائم الاختيار، والتنقل عبر الخبز
• معاينة حية: شاهد مكوّناتك تتحديث في الوقت الحقيقي أثناء تعديل الخصائص
• اختبار الاستجابة: معاينة مكوّناتك في عرض الجوال، والتابلت، وسطح المكتب
• تصور الحالة: اختبار كيف تبدو مكوّناتك في حالات مختلفة (عادية، تمرير، تركيز، نشط)
• توليد الكود: الحصول على كود React نظيف وجاهز للاستخدام مع فئات Tailwind CSS
• نسخ إلى الحافظة: نسخ الكود المُولد بسهولة بنقرة واحدة
• بدون تبعيات: يعمل بالكامل في المتصفح دون الحاجة إلى مكالمات API خارجية أو متطلبات خلفية

كيفية استخدام مُنشئ المكوّنات

الخطوة 1: اختر نوع المكوّن

ابدأ باختيار نوع المكوّن الذي ترغب في إنشائه من الخيارات المتاحة:

• زر: إنشاء أزرار للدعوة إلى العمل، أو أزرار إرسال، أو أزرار تنقل
• مدخل نص: تصميم حقول إدخال النماذج لجمع النص أحادي السطر
• مربع نص: بناء مناطق إدخال نص متعددة الأسطر للمحتوى الأطول
• اختيار: إنشاء قوائم اختيار منسدلة مع خيارات قابلة للتخصيص
• خبز: تصميم الخبز للتنقل لإظهار تسلسل الصفحات

كل نوع من أنواع المكوّنات له مجموعة من الخصائص القابلة للتخصيص التي ستظهر في لوحة الخصائص.

الخطوة 2: تخصيص خصائص المكوّن

بعد اختيار نوع المكوّن، يمكنك تخصيص مظهره وسلوكه باستخدام لوحة الخصائص. تشمل الخصائص الشائعة:

• محتوى النص: تعيين النص المعروض على الأزرار أو نص العنصر النائب للمدخلات
• الألوان: اختيار ألوان النص والخلفية من لوحة ألوان Tailwind
• الحشو: ضبط المسافات الداخلية للمكوّن
• الهامش: تعيين المسافات الخارجية حول المكوّن
• الحدود: إضافة حدود بأنماط وأحجام وألوان مختلفة
• نصف القطر: تدوير زوايا المكوّن
• العرض: تعيين عرض المكوّن (تلقائي، كامل، أو بناءً على النسبة المئوية)
• الطباعة: ضبط حجم الخط، والوزن، وخصائص النص الأخرى

بالنسبة لأنواع المكوّنات المحددة، تتوفر خصائص إضافية:

• مدخل نص/مربع نص: تعيين نص العنصر النائب، وحالة المطلوبة، وحالة التعطيل
• مربع نص: ضبط عدد الصفوف
• اختيار: إضافة، وتحرير، أو إزالة الخيارات
• خبز: تكوين عناصر التنقل والروابط

الخطوة 3: معاينة مكوّنك

بينما تقوم بتعديل الخصائص، تتحدث المعاينة الحية في الوقت الحقيقي، مما يظهر بالضبط كيف سيبدو مكوّنك. يمكنك أيضًا:

• اختبار السلوك الاستجابي: التبديل بين عرض الجوال، والتابلت، وسطح المكتب للتأكد من أن مكوّنك يبدو جيدًا في جميع أحجام الشاشة
• التحقق من الحالات المختلفة: رؤية كيف يظهر مكوّنك في الحالات العادية، والتمرير، والتركيز، والنشاط

الخطوة 4: احصل على الكود

بمجرد أن تكون راضيًا عن مكوّنك، تقوم الأداة تلقائيًا بتوليد الكود المقابل لـ React مع فئات Tailwind CSS. يمكنك:

• مراجعة الكود المُولد: رؤية كود JSX الخاص بـ React مع جميع الفئات المطبقة من Tailwind
• نسخ إلى الحافظة: انقر على زر "نسخ الكود" لنسخ الكود إلى الحافظة
• استخدامه في مشروعك: لصق الكود مباشرة في مشروع React الخاص بك

أنواع المكوّنات بالتفصيل

الأزرار

الأزرار هي عناصر واجهة مستخدم أساسية للتفاعلات مع المستخدم. مع مُنشئنا، يمكنك إنشاء أنماط أزرار متنوعة:

• أزرار العمل الأساسية
• أزرار ثانوية أو حدودية
• أزرار الأيقونات
• أزرار بعرض كامل
• أزرار معطلة

خيارات التخصيص الرئيسية:

• محتوى النص
• ألوان الخلفية والنص
• الحشو والهامش
• الحدود ونصف القطر
• العرض والارتفاع
• حجم الخط والوزن
• حالات التمرير والتركيز والنشاط

مثال على الكود المُولد:

1<button 
2  className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:ring-2 focus:ring-blue-300 focus:outline-none"
3>
4  إرسال
5</button>
6

مدخلات النص

تتيح مدخلات النص للمستخدمين إدخال نص أحادي السطر في النماذج. تساعدك مُنشئتنا على إنشاء مدخلات تتناسب مع نظام التصميم الخاص بك:

خيارات التخصيص الرئيسية:

• نص العنصر النائب
• أنماط وألوان الحدود
• الحشو والعرض
• حالات المطلوبة والمعطلة
• أنماط التركيز

مثال على الكود المُولد:

1<input
2  type="text"
3  className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
4  placeholder="أدخل اسمك"
5  required
6/>
7

مربعات النص

تُستخدم مربعات النص لإدخال نص متعدد الأسطر، مثل التعليقات أو الوصف:

خيارات التخصيص الرئيسية:

• عدد الصفوف
• نص العنصر النائب
• سلوك تغيير الحجم
• الحدود والحشو
• حالات المطلوبة والمعطلة

مثال على الكود المُولد:

1<textarea
2  className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
3  placeholder="أدخل رسالتك"
4  rows={4}
5></textarea>
6

قوائم الاختيار المنسدلة

تتيح قوائم الاختيار المنسدلة للمستخدمين الاختيار من قائمة من الخيارات:

خيارات التخصيص الرئيسية:

• عناصر الخيارات (النص والقيمة)
• الحدود والحشو
• العرض والمظهر
• حالات المطلوبة والمعطلة

مثال على الكود المُولد:

1<select
2  className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
3  required
4>
5  <option value="option1">الخيار 1</option>
6  <option value="option2">الخيار 2</option>
7  <option value="option3">الخيار 3</option>
8</select>
9

التنقل عبر الخبز

تساعد الخبز المستخدمين على فهم موقعهم داخل تسلسل موقع الويب:

خيارات التخصيص الرئيسية:

• عناصر التنقل والروابط
• نمط الفاصل
• ألوان النص والتمرير
• المسافات بين العناصر

مثال على الكود المُولد:

1<nav className="flex" aria-label="Breadcrumb">
2  <ol className="flex space-x-2 text-gray-700">
3    <li className="flex items-center">
4      <a href="/" className="hover:text-blue-600">الرئيسية</a>
5    </li>
6    <li className="flex items-center">
7      <span className="mx-2 text-gray-400">/</span>
8      <a href="/products" className="hover:text-blue-600">المنتجات</a>
9    </li>
10    <li className="flex items-center">
11      <span className="mx-2 text-gray-400">/</span>
12      <a href="/products/category" className="hover:text-blue-600">الفئة</a>
13    </li>
14  </ol>
15</nav>
16

خصائص Tailwind CSS موضحة

تستفيد أداة مُنشئ المكوّنات لدينا من فئات Tailwind CSS لتنسيق المكوّنات. إليك مرجع سريع لأكثر الخصائص استخدامًا:

الألوان

تقدم Tailwind لوحة ألوان شاملة. بعض الأمثلة:

• ألوان النص: text-{color}-{shade} (مثل text-blue-500، text-red-600)
• ألوان الخلفية: bg-{color}-{shade} (مثل bg-green-500، bg-gray-100)
• ألوان الحدود: border-{color}-{shade} (مثل border-gray-300)

المسافات

تحكم في الحشو والهامش باستخدام هذه الفئات:

• الحشو: p-{size}، px-{size}، py-{size} (مثل p-4، px-3 py-2)
• الهامش: m-{size}، mx-{size}، my-{size} (مثل m-2، mx-auto)

الطباعة

اضبط مظهر النص باستخدام:

• حجم الخط: text-{size} (مثل text-sm، text-lg)
• وزن الخط: font-{weight} (مثل font-bold، font-medium)
• محاذاة النص: text-{alignment} (مثل text-center، text-right)

الحدود

خصص الحدود باستخدام:

• عرض الحدود: border، border-{width} (مثل border-2)
• نصف القطر: rounded، rounded-{size} (مثل rounded-md، rounded-full)

العرض والارتفاع

قم بتعيين الأبعاد باستخدام:

• العرض: w-{size} (مثل w-full، w-1/2)
• الارتفاع: h-{size} (مثل h-10، h-auto)

الحالات التفاعلية

قم بتنسيق الحالات المختلفة باستخدام:

• تمرير: hover:{property} (مثل hover:bg-blue-600)
• تركيز: focus:{property} (مثل focus:ring-2)
• نشط: active:{property} (مثل active:bg-blue-700)
• معطل: disabled:{property} (مثل disabled:opacity-50)

حالات الاستخدام

1. التصميم السريع

يعتبر مُنشئ مكوّنات React Tailwind مثاليًا لتصميم مكوّنات واجهة المستخدم بسرعة قبل تنفيذها في قاعدة الشيفرة الخاصة بك. يمكن أن يوفر ذلك وقت تطوير كبير من خلال السماح للمصممين والمطورين بتجربة أنماط وتكوينات مختلفة دون كتابة الشيفرة من الصفر.

سير العمل النموذجي:

1. استخدم مُنشئ المكوّنات لتصميم نظام الأزرار
2. جرب ألوان وأحجام وحالات مختلفة
3. انسخ الكود المُولد بمجرد الرضا
4. نفذ في مشروع React الخاص بك

2. تعلم Tailwind CSS

بالنسبة للمطورين الجدد على Tailwind CSS، تعتبر هذه الأداة مصدر تعلم ممتاز. من خلال تعديل الخصائص ورؤية التغييرات في الوقت الحقيقي، يمكنك فهم كيفية عمل فئات Tailwind معًا لإنشاء تصميمات متماسكة بشكل أفضل.

فوائد التعلم:

• تصور تأثير فئات Tailwind المختلفة
• فهم تركيبات الفئات لأنماط واجهة المستخدم الشائعة
• تعلم أفضل الممارسات لتنظيم فئات Tailwind

3. تطوير نظام التصميم

عند إنشاء نظام تصميم لمشروعك أو مؤسستك، يمكن أن يساعد مُنشئ المكوّنات في إنشاء أنماط مكوّنات متسقة تتماشى مع إرشادات علامتك التجارية.

العملية:

1. تحديد لوحة الألوان والطباعة الخاصة بك
2. إنشاء مكوّنات أساسية لكل نوع (أزرار، مدخلات، إلخ)
3. توثيق الكود المُولد لفريقك
4. ضمان الاتساق عبر تطبيقك

4. عروض العملاء

عند العمل مع العملاء الذين قد لا يكونوا تقنيين، فإن الطبيعة المرئية لمُنشئ المكوّنات تجعل من السهل عرض خيارات واجهة المستخدم والحصول على تعليقات قبل الالتزام بالتنفيذ.

النهج في العرض:

1. إعداد عدة متغيرات للمكوّنات
2. عرض المعاينة الحية خلال اجتماعات العملاء
3. إجراء تعديلات في الوقت الحقيقي بناءً على التعليقات
4. تصدير الكود النهائي بمجرد الموافقة

البدائل

بينما يوفر مُنشئ مكوّنات React Tailwind لدينا تجربة مبسطة لإنشاء مكوّنات فردية، هناك أدوات أخرى قد تفكر فيها حسب احتياجاتك:

1. Tailwind UI: مكتبة مكوّنات مدفوعة تحتوي على مكوّنات مُعدة مسبقًا. على عكس أداتنا المجانية، توفر Tailwind UI مكوّنات كاملة مصممة بشكل احترافي ولكن تتطلب شراء.

2. Headless UI: لمكوّنات تفاعلية أكثر تعقيدًا مع منطق السلوك المدمج والوصول. تركز أداتنا على التنسيق المرئي بدلاً من التفاعلات المعقدة.

3. ملعب Tailwind CSS: الملعب الرسمي لـ Tailwind يسمح لك بتجربة صفحات HTML كاملة بدلاً من مكوّنات فردية.

4. Figma/Sketch + الإضافات: أدوات التصميم مع إضافات Tailwind يمكن استخدامها للتصميم المرئي ولكن لا تولد كود React مثل أداتنا.

اعتبارات فنية

توافق المتصفح

يعمل مُنشئ مكوّنات React Tailwind في جميع المتصفحات الحديثة، بما في ذلك:

• Chrome (الإصدار 60+)
• Firefox (الإصدار 55+)
• Safari (الإصدار 11+)
• Edge (الإصدار 79+)

لأفضل تجربة، نوصي باستخدام أحدث إصدار من المتصفح المفضل لديك.

تحسين الأداء

عند استخدام المكوّنات المُولدة في الإنتاج، ضع في اعتبارك هذه النصائح لتحسين الأداء:

1. إزالة الأنماط غير المستخدمة: استخدم خيار الإزالة في Tailwind في الإنتاج لإزالة CSS غير المستخدمة
2. استخراج المكوّنات: للمكوّنات المتكررة، أنشئ مكوّنات React قابلة لإعادة الاستخدام بدلاً من تكرار JSX
3. تنظيم الفئات: تجميع الفئات ذات الصلة لتحسين صيانة الشيفرة

اعتبارات الوصول

تشجع أداة مُنشئ المكوّنات لدينا أفضل ممارسات الوصول:

• تحتوي مدخلات النص ومربعات النص على تسميات صحيحة
• تحتوي الأزرار على نسب تباين مناسبة
• تكون حالات التركيز مرئية بوضوح
• تتضمن الخبز تسميات ARIA

ومع ذلك، يجب دائمًا اختبار التنفيذ النهائي الخاص بك مع برامج قراءة الشاشة والتنقل عبر لوحة المفاتيح لضمان الامتثال الكامل للوصول.

الأسئلة الشائعة

هل يمكنني حفظ المكوّنات التي أنشأتها لاستخدامها لاحقًا؟

حاليًا، لا تتضمن الأداة ميزة الحفظ. ومع ذلك، يمكنك نسخ الكود المُولد وحفظه في ملفاتك الخاصة. للاستخدام المتكرر، ضع في اعتبارك إنشاء مكتبة مكوّنات في مشروعك.

هل تولد الأداة كود TypeScript؟

تولد النسخة الحالية كود React بلغة JavaScript. بالنسبة لـ TypeScript، ستحتاج إلى إضافة تعريفات النوع يدويًا. نحن نفكر في إضافة دعم TypeScript في التحديثات المستقبلية.

هل يمكنني إنشاء مكوّنات استجابية؟

نعم! تتيح لك الأداة معاينة مكوّناتك في أحجام عرض مختلفة (الجوال، التابلت، سطح المكتب) وتضمين فئات Tailwind الاستجابية. يمكنك استخدام ميزة المعاينة الاستجابية لضمان أن مكوّناتك تبدو جيدة على جميع الأجهزة.

كيف يمكنني إضافة ألوان مخصصة غير موجودة في لوحة ألوان Tailwind؟

بينما تستخدم الأداة لوحة ألوان Tailwind الافتراضية، يمكنك تخصيص الألوان في مشروعك الخاص عن طريق توسيع تكوين Tailwind. سيعمل الكود المُولد مع الألوان المخصصة الخاصة بك إذا اتبعت تسميات Tailwind.

هل يمكنني إنشاء متغيرات وضع مظلم لمكوّناتي؟

لا تستهدف النسخة الحالية وضع الظلام بشكل محدد. ومع ذلك، يمكنك استخدام الكود المُولد كنقطة انطلاق وإضافة فئات وضع الظلام من Tailwind (dark:) في مشروعك.

هل المكوّنات المُولدة متاحة للوصول؟

تشجع الأداة أفضل ممارسات الوصول، ولكن يجب عليك دائمًا اختبار التنفيذ النهائي الخاص بك لضمان الامتثال للوصول. انتبه بشكل خاص إلى تباين الألوان، والتنقل عبر لوحة المفاتيح، والتوافق مع برامج قراءة الشاشة.

هل يمكنني استخدام هذه الأداة مع Next.js أو Gatsby؟

نعم! تعمل مكوّنات React المُولدة بشكل مستقل عن الإطار وستعمل مع أي إطار يعتمد على React، بما في ذلك Next.js وGatsby وCreate React App وغيرها.

كيف يمكنني إضافة أيقونات إلى مكوناتي؟

بينما لا تتضمن الأداة اختيار الأيقونات مباشرة، يمكنك بسهولة إضافة أيقونات إلى المكوّنات المُولدة باستخدام مكتبات مثل React Icons أو Heroicons أو Font Awesome بمجرد نسخ الكود إلى مشروعك.

هل هذه الأداة مجانية للاستخدام؟

نعم، مُنشئ مكوّنات React Tailwind مجاني تمامًا للاستخدام، دون الحاجة إلى حساب.

هل يمكنني المساهمة في تحسين هذه الأداة؟

نرحب بالمساهمات! تحقق من مستودع GitHub الخاص بنا للحصول على معلومات حول كيفية المساهمة في تطوير هذه الأداة.

خاتمة

يوفر مُنشئ مكوّنات React Tailwind مع المعاينة المباشرة طريقة قوية وبسيطة لإنشاء مكوّنات واجهة مستخدم جميلة ومخصصة دون الحاجة إلى كتابة CSS من الصفر. من خلال دمج مرونة React مع النهج القائم على الأدوات لـ Tailwind CSS، يمكنك بسرعة تصميم وبناء مكوّنات تتناسب مع متطلبات تصميمك الدقيقة.

ابدأ في تجربة أنواع المكوّنات المختلفة، وتخصيص خصائصها، ورؤية التغييرات في الوقت الحقيقي. عندما تكون راضيًا عن تصميمك، انسخ ببساطة الكود المُولد ودمجه في مشروع React الخاص بك. سواء كنت مطورًا متمرسًا أو بدأت للتو في استخدام React وTailwind، ستساعدك هذه الأداة في تسريع عملية تطوير واجهة المستخدم الخاصة بك.

هل أنت مستعد لبناء مكوّنك الأول؟ اختر نوع المكوّن من الخيارات أعلاه وابدأ في التخصيص!