تخطي إلى المحتوى
🛠️
Whiz Tools

منشئ مكونات React Tailwind - معاينة مباشرة ومولد التعليمات البرمجية

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

منشئ مكونات React مع Tailwind CSS

أنشئ مكونات React مع Tailwind CSS وشاهد معاينة مباشرة

نوع المكون

الخصائص

عرض متجاوب

معاينة الحالة

معاينة مباشرة

الكود المولد

jsx
<button
  className="text-white bg-blue-500 py-2 px-4 m-0 border border-transparent rounded text-base font-medium hover:bg-opacity-90 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer"
>
  Button
</button>
حاسبة التحميل...
📚

التوثيق

ما هو منشئ مكوّنات React وTailwind؟

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

أنواع المكوّنات

يمكن للأداة إنشاء خمسة أنواع من المكوّنات:

  • زر — زر قابل للنقر بنص مخصّص
  • إدخال نصي — حقل نموذج ذي سطر واحد مع نص نائب
  • منطقة نصية — حقل نموذج متعدد الأسطر بعدد محدد من الصفوف
  • قائمة اختيار — قائمة منسدلة مبنية من قائمة خيارات
  • مسار التنقل — صف من الروابط يوضّح موقع الصفحة في الموقع، مثل الصفحة الرئيسية / المنتجات / الفئة

ما الخصائص التي يمكن تغييرها؟

تنطبق خمس خصائص للتنسيق على كل أنواع المكوّنات:

  • لون النص — أبيض أو أسود أو رمادي أو أزرق أو أحمر أو أخضر
  • لون الخلفية — بلا لون أو أبيض أو رمادي فاتح أو أزرق أو أحمر أو أخضر
  • الحشو (المسافة الداخلية) — بلا حشو أو صغير أو متوسط أو كبير أو القيمة الافتراضية للزر
  • نصف قطر الحدود (تدوير الزوايا) — بلا تدوير أو صغير أو متوسط أو كبير أو تدوير كامل
  • العرض — تلقائي أو كامل أو نصف أو ثلث أو ربع

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

أربع خصائص ثابتة ولا يمكن تغييرها عبر الواجهة: الهامش (دائماً m-0)، ونمط الحدود (دائماً border border-transparent)، وحجم الخط (دائماً text-base)، وسُمك الخط (دائماً font-medium). يحمل كل مكوّن مُنشأ هذه الأصناف الأربعة نفسها. ولاستخدام هامش أو حدود أو حجم خط مختلف، تُعدّل الشيفرة المنسوخة يدوياً.

كيفية بناء قائمة الأصناف المُنشأة

تبني الأداة سلسلة أصناف Tailwind لكل مكوّن بترتيب ثابت:

  1. صنف لون النص، إذا كان محدداً
  2. صنف لون الخلفية، إذا كان محدداً
  3. أصناف الحشو والهامش والحدود ونصف قطر الحدود
  4. صنف العرض، ما لم يُضبط العرض على «تلقائي»
  5. صنفا حجم الخط وسُمك الخط الثابتان
  6. أصناف الحالات التفاعلية (التحويم والتركيز والنشاط)، وتختلف بحسب نوع المكوّن
  7. أصناف الحالة المعطّلة، إذا كان خيار «معطّل» محدداً

تحصل الأزرار على hover:bg-opacity-90 وfocus:ring-2 وfocus:ring-offset-2 وfocus:ring-blue-500. ويحصل الزر غير المعطّل أيضاً على cursor-pointer. أما حقول الإدخال النصية والمناطق النصية وقوائم الاختيار فتحصل بدلاً من ذلك على focus:outline-none وfocus:ring-2 وfocus:ring-blue-500 وfocus:border-blue-500. ولا تحصل مسارات التنقل على أي من هذه الأصناف التفاعلية، ولا تنطبق الحالة المعطّلة عليها، إذ لا يمكن تعطيل قائمة تنقل.

مثال: زر

باستخدام الإعدادات الافتراضية (نص أبيض، وخلفية زرقاء-500، وحشو متوسط، وزوايا مستديرة)، تُخرج الأداة:

1<button
2  className="text-white bg-blue-500 py-2 px-4 m-0 border border-transparent rounded text-base font-medium hover:bg-opacity-90 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer"
3>
4  Button
5</button>
6

مثال: إدخال نصي

باستخدام نص رمادي، وخلفية بيضاء، وحشو صغير، ونصف قطر حدود كبير، وعرض كامل، مع تحديد خيار «مطلوب»:

1<input
2  type="text"
3  className="text-gray-700 bg-white p-2 m-0 border border-transparent rounded-lg w-full text-base font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
4  placeholder="Enter your name"
5  required
6/>
7

مثال: منطقة نصية وقائمة اختيار

تتبع المناطق النصية وقوائم الاختيار قاعدة بناء الأصناف نفسها التي تتبعها حقول الإدخال النصية. منطقة نصية بنص أسود، وحشو متوسط، وتدوير متوسط، وعرض كامل، و4 صفوف:

1<textarea
2  className="text-black p-4 m-0 border border-transparent rounded w-full text-base font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
3  placeholder="Enter your message"
4  rows={4}
5></textarea>
6

قائمة اختيار بالألوان والمسافات نفسها الواردة في مثال حقل الإدخال النصي أعلاه، وبها ثلاثة خيارات:

1<select
2  className="text-gray-700 bg-white p-2 m-0 border border-transparent rounded w-full text-base font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
3  required
4>
5  <option value="option1">Option 1</option>
6  <option value="option2">Option 2</option>
7  <option value="option3">Option 3</option>
8</select>
9

مثال: مسار التنقل

تستخدم روابط مسار التنقل والفواصل أصناف ثابتة دائماً (hover:text-blue-600 للروابط، وmx-2 text-gray-400 للفاصل «/»). ولا تحصل الخصائص الخمس المشتركة على هذه الأصناف إلا القائمة الخارجية. باستخدام نص رمادي ومن دون حشو أو تدوير:

1<nav className="flex" aria-label="Breadcrumb">
2  <ol className="text-gray-700 p-0 m-0 border border-transparent text-base font-medium flex space-x-2">
3  <li className="flex items-center">
4    <a href="/" className="hover:text-blue-600">Home</a>
5  </li>
6  <li className="flex items-center">
7    <span className="mx-2 text-gray-400">/</span>
8    <a href="/components" className="hover:text-blue-600">Components</a>
9  </li>
10  </ol>
11</nav>
12

المعاينة المتجاوبة مقابل الأصناف المتجاوبة

تحتوي الأداة على عنصر تحكم «العرض المتجاوب» بثلاثة خيارات: الهاتف المحمول والجهاز اللوحي وسطح المكتب. لا يؤدي التبديل بينها إلا إلى تغيير عرض مربع المعاينة، بحيث يمكن للمستخدم رؤية الشكل التقريبي للمكوّن على شاشة أضيق. ولا يضيف ذلك أي بادئة لنقاط توقف Tailwind، مثل sm: أو md: أو lg: أو xl:، إلى الشيفرة المُنشأة. وتبقى مخرجات JSX نفسها بصرف النظر عن العرض المتجاوب المحدد. ومن يحتاج إلى جعل المكوّن يبدو مختلفاً عند عروض شاشات مختلفة يجب أن يضيف أصناف نقاط التوقف تلك إلى الشيفرة المنسوخة يدوياً.

كيفية إضافة Tailwind CSS إلى مشروع React

  1. ثبّت الحزم: npm install -D tailwindcss postcss autoprefixer
  2. أعدد ملفات الإعداد: npx tailwindcss init -p
  3. أدرج ملفات مصدر المشروع في tailwind.config.js ضمن content
  4. أضف توجيهات Tailwind الثلاثة إلى ملف CSS الرئيسي: @tailwind base; @tailwind components; @tailwind utilities;
  5. ألصق مكوّناً مُنشأً في ملف React

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

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

هل تضيف الأداة أصناف نقاط التوقف المتجاوبة مثل sm: أو md: تلقائياً؟ لا. يغيّر عنصر التحكم للهاتف المحمول/الجهاز اللوحي/سطح المكتب حجم مربع المعاينة فقط. ولا تحتوي الشيفرة المُصدّرة على أصناف sm: أو md: أو lg: أو xl:؛ ويجب إضافتها يدوياً عند الحاجة.

هل يمكنني تغيير الهامش أو نمط الحدود أو حجم الخط؟ ليس عبر الواجهة. يستخدم كل مكوّن مُنشأ الهامش الثابت نفسه (m-0)، والحدود نفسها (border border-transparent)، وحجم الخط نفسه (text-base)، وسُمك الخط نفسه (font-medium). غيّر هذه القيم بتعديل الشيفرة المنسوخة مباشرة.

هل تحفظ الأداة مكوّناتي؟ لا. لا توجد ميزة للحفظ. انسخ الشيفرة المُنشأة وخزّنها في ملفات المشروع نفسه.

هل تُنشئ TypeScript؟ تُخرج الأداة JSX (صياغة JavaScript). والمخرجات عبارة عن ترميز JSX عادي، لذا يمكن لصقه في ملف .tsx من دون تغييرات، مع أنها لا تُنشئ تعريفات للأنواع.

هل استخدام الأداة مجاني؟ نعم. تعمل بالكامل في المتصفح، من دون حساب ومن دون إرسال أي طلب إلى خادم.

هل تعمل مع Next.js أو Gatsby أو أطر React الأخرى؟ نعم. الشيفرة المُنشأة عبارة عن JSX عادي مع أصناف Tailwind، لذا تعمل مع أي إطار مبني على React ومهيّأ لاستخدام Tailwind CSS.