قم ببناء مكونات React مخصصة باستخدام Tailwind CSS. إنشاء أزرار ومدخلات ومساحات نص ومحددات وفتات خبز مع معاينة فورية وتوليد الرمز الجاهز للاستخدام في مشاريعك.
قم ببناء مكونات React مع Tailwind CSS وشاهد معاينة مباشرة
<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 CSS على الفور. هذا بناء مكون React Tailwind المجاني عبر الإنترنت يمكّن المطورين والمصممين من بناء وتخصيص وتصدير مكونات واجهة مستخدم جاهزة للإنتاج دون الحاجة إلى كتابة كود CSS يدويًا. باستخدام بناء React Tailwind مع معاينة مباشرة، يمكنك رؤية التغييرات في الوقت الفعلي أثناء تصميم الأزرار والنماذج والإدخالات والمكونات الملاحية باستخدام إطار عمل Tailwind CSS المبني على الأدوات المساعدة.
يدعم بناء مكون React Tailwind إنشاء عناصر واجهة المستخدم الأساسية بما في ذلك الأزرار وإدخالات النص والمناطق النصية والقوائم المنسدلة والتنقل بواسطة فتات الخبز. يمكن تخصيص كل مكون React بالكامل باستخدام فئات الأدوات المساعدة Tailwind CSS للألوان والمسافات والطباعة والحدود والتصميم المستجيب - كل ذلك مع معاينة مباشرة فورية تتحدث ديناميكيًا مع تعديل الخصائص. مثالي للنماذج الأولية السريعة وتطوير المكونات.
ابدأ بتحديد نوع المكون الذي تريد بناؤه من بين الخيارات المتاحة:
لكل نوع مكون مجموعة من الخصائص القابلة للتخصيص التي ستظهر في لوحة الخصائص.
بعد تحديد نوع المكون، يمكنك تخصيص مظهره وسلوكه باستخدام لوحة الخصائص. الخصائص الشائعة تشمل:
بالنسبة لأنواع المكونات المحددة، تتوفر خصائص إضافية:
أثناء ضبط الخصائص، تتحدث المعاينة المباشرة في الوقت الفعلي، مما يوضح تمامًا كيف سيبدو مكونك. يمكنك أيضًا:
بمجرد أن تكون راضيًا عن مكونك، يقوم الأداة تلقائيًا بتوليد كود React المقابل مع فئات Tailwind CSS. يمكنك:
الأزرار هي عناصر واجهة المستخدم الأساسية للتفاعلات المستخدم. باستخدام بنائنا، يمكنك إنشاء أنماط زر متنوعة:
خيارات التخصيص الرئيسية:
مثال على الكود المولد:
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 لوحة ألوان شاملة. بعض الأمثلة:
text-{color}-{shade} (على سبيل المثال، text-blue-500، text-red-600)اكتشف المزيد من الأدوات التي قد تكون مفيدة لسير عملك