ٹیل وائنڈ سی ایس ایس کے ساتھ کسٹم ریایکٹ کمپوننٹس بنائیں۔ بٹنز، ان پٹس، ٹیکسٹ ایریاز، سیلیکٹس اور بریڈکرمبز کو ریئل ٹائم پریویو اور آپ کے پروجیکٹس میں استعمال کے لیے تیار کردہ کوڈ کے ساتھ بنائیں۔
ریایکٹ کمپوننٹس ٹیل وینڈ سی ایس ایس کے ساتھ بنائیں اور لائیو پیش نظارے دیکھیں
<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 کمپوننٹ بلڈر ایک طاقتور وژوئل ایڈیٹر ہے جو آپ کو فوری طور پر Tailwind CSS کے ساتھ کسٹم React کمپوننٹس بنانے میں مدد کرتا ہے۔ یہ مفت آن لائن React Tailwind کمپوننٹ بلڈر ڈیولپرز اور ڈیزائنرز کو بغیر CSS کوڈ لکھے پروڈکشن-ریڈی UI کمپوننٹس بنانے، کسٹمائز کرنے اور برآمد کرنے میں مدد کرتا ہے۔ ہمارے لائیو پریویو React Tailwind بلڈر کے ساتھ، آپ بٹنز، فارمز، انپٹس اور نیویگیشن کمپوننٹس کو Tailwind کے utility-first CSS فریم ورک کا استعمال کرتے ہوئے ڈیزائن کرتے وقت ریئل ٹائم تبدیلیوں کو دیکھ سکتے ہیں۔
ہمارے React Tailwind کمپوننٹ بلڈر میں بٹنز، ٹیکسٹ انپٹس، ٹیکسٹ ایریاز، سلیکٹ ڈراپ ڈاؤنز اور بریڈکرمب نیویگیشن سمیت ضروری UI عناصر بنانے کی حمایت ہے۔ ہر React کمپوننٹ کو Tailwind CSS utility کلاسز کا استعمال کرکے رنگوں، سپیسنگ، ٹائپوگرافی، بارڈرز اور ریسپانسیو ڈیزائن کے لیے مکمل طور پر کسٹمائز کیا جا سکتا ہے - سب کچھ فوری لائیو پریویو کے ساتھ جو آپ کی خصوصیات میں ترمیم کرتے وقت ڈائنامک طور پر اپ ڈیٹ ہوتا ہے۔ رپڈ پروٹوٹائپنگ اور کمپوننٹ ڈویلپمنٹ کے لیے کامل۔
شروع میں آپ کو دستیاب اختیارات میں سے وہ کمپوننٹ منتخب کرنا ہے جسے آپ بنانا چاہتے ہیں:
ہر کمپوننٹ کی قسم کے لیے خصوصیات پینل میں اپنی خصوصیات کو کسٹمائز کرنے کے اختیارات موجود ہیں۔
کمپوننٹ کی قسم منتخب کرنے کے بعد، آپ خصوصیات پینل کا استعمال کرکے اس کے ظاہری شکل اور رویے کو کسٹمائز کر سکتے ہیں۔ عام خصوصیات میں شامل ہیں:
مخصوص کمپوننٹ اقسام کے لیے، اضافی خصوصیات دستیاب ہیں:
جیسے آپ خصوصیات میں ترمیم کرتے ہیں، لائیو پریویو ریئل ٹائم میں اپ ڈیٹ ہوتا ہے، جس سے آپ کو دکھائی دیتا ہے کہ آپ کا کمپوننٹ کیسا دکھائی دے گا۔ آپ یہ بھی کر سکتے ہیں:
آپ اپنے کمپوننٹ سے مطمئن ہو جانے پر، آلہ خودکار طور پر React کوڈ جنریٹ کرتا ہے جس میں Tailwind CSS کلاسز شامل ہیں۔ آپ:
بٹنز صارف کی تعامل کے لیے ضروری UI عناصر ہیں۔ ہمارے بلڈر کے ساتھ، آپ مختلف بٹن سٹائلز بنا سکتے ہیں:
اہم کسٹمائزیشن اختیارات:
جنریٹ کردہ کوڈ کا مثال:
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آپ کے ورک فلو کے لیے مفید ہونے والے مزید ٹولز کا انعام کریں