রিয়্যাক্ট টেইলউইন্ড কম্পোনেন্ট বিল্ডার লাইভ প্রিভিউ এবং কোড এক্সপোর্ট সহ

টেইলউইন্ড সিএসএস সহ কাস্টম রিয়্যাক্ট কম্পোনেন্ট তৈরি করুন। বাটন, ইনপুট, টেক্সটেরিয়া, সিলেক্ট এবং ব্রেডক্রাম্বস তৈরি করুন রিয়েল-টাইম প্রিভিউ এবং প্রকল্পে ব্যবহারের জন্য তৈরি কোড সহ।

টেইলউইন্ড সিএসএস সহ রিয়্যাক্ট কম্পোনেন্ট বিল্ডার

টেইলউইন্ড সিএসএস সহ রিয়্যাক্ট কম্পোনেন্ট তৈরি করুন এবং লাইভ প্রিভিউ দেখুন

কম্পোনেন্ট প্রকার

প্রপার্টিসমূহ

প্রতিক্রিয়াশীল ভিউ

অবস্থা প্রিভিউ

লাইভ প্রিভিউ

জেনারেটেড কোড

<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>
📚

ডকুমেন্টেশন

রিয়্যাক্ট টেইলউইন্ড কম্পোনেন্ট বিল্ডার: লাইভ প্রিভিউ সহ কাস্টম UI কম্পোনেন্ট তৈরি করুন

ভিজুয়াল এডিটর দিয়ে অবিলম্বে রিয়্যাক্ট টেইলউইন্ড কম্পোনেন্ট তৈরি করুন

রিয়্যাক্ট টেইলউইন্ড কম্পোনেন্ট বিল্ডার হল একটি শক্তিশালী ভিজুয়াল এডিটর যা আপনাকে টেইলউইন্ড CSS ব্যবহার করে অবিলম্বে কাস্টম রিয়্যাক্ট কম্পোনেন্ট তৈরি করতে সাহায্য করে। এই বিনামূল্যের অনলাইন রিয়্যাক্ট টেইলউইন্ড কম্পোনেন্ট বিল্ডার ডেভেলপার এবং ডিজাইনারদের CSS কোড লিখা ছাড়াই উৎপাদন-প্রস্তুত UI কম্পোনেন্ট তৈরি, কাস্টমাইজ এবং রপ্তানি করতে সক্ষম করে। আমাদের লাইভ প্রিভিউ রিয়্যাক্ট টেইলউইন্ড বিল্ডার ব্যবহার করে, আপনি ডিজাইন করার সময় বাটন, ফর্ম, ইনপুট এবং নেভিগেশন কম্পোনেন্ট সহ টেইলউইন্ড ইউটিলিটি-ফার্স্ট CSS ফ্রেমওয়ার্ক ব্যবহার করে আপনার পরিবর্তনগুলি সরাসরি দেখতে পাবেন।

আমাদের রিয়্যাক্ট টেইলউইন্ড কম্পোনেন্ট বিল্ডার বাটন, টেক্সট ইনপুট, টেক্সটেরিয়া, সিলেক্ট ড্রপডাউন এবং ব্রেডক্রাম্ব নেভিগেশন সহ প্রধান UI উপাদান তৈরি করতে সহায়তা করে। প্রত্যেকটি রিয়্যাক্ট কম্পোনেন্টকে টেইলউইন্ড CSS ইউটিলিটি ক্লাস ব্যবহার করে রঙ, স্পেসিং, টাইপোগ্রাফি, বর্ডার এবং প্রতিক্রিয়াশীল ডিজাইনের জন্য পূর্ণরূপে কাস্টমাইজ করা যায় - সবকিছুই অবিলম্বে লাইভ প্রিভিউ সহ যা আপনি বৈশিষ্ট্য পরিবর্তন করার সাথে সাথে আপডেট হয়।

রিয়্যাক্ট টেইলউইন্ড কম্পোনেন্ট বিল্ডারের প্রধান বৈশিষ্ট্যগুলি

  • বহুবিধ কম্পোনেন্ট প্রকার: বাটন, টেক্সট ইনপুট, টেক্সটেরিয়া, সিলেক্ট মেনু এবং ব্রেডক্রাম্ব নেভিগেশন তৈরি করুন
  • লাইভ প্রিভিউ: বৈশিষ্ট্য পরিবর্তন করার সাথে সাথে আপনার কম্পোনেন্টগুলি আপডেট হতে দেখুন
  • প্রতিক্রিয়াশীল পরীক্ষা: মোবাইল, ট্যাবলেট এবং ডেস্কটপ দৃশ্যে আপনার কম্পোনেন্টগুলি প্রিভিউ করুন
  • স্টেট ভিজুয়ালাইজেশন: আপনার কম্পোনেন্টগুলি বিভিন্ন অবস্থায় (সাধারণ, হোভার, ফোকাস, সক্রিয়) কিভাবে দেখায় তা পরীক্ষা করুন
  • কোড জেনারেশন: টেইলউইন্ড CSS ক্লাসগুলি সহ পরিষ্কার, ব্যবহারযোগ্য রিয়্যাক্ট কোড পান
  • ক্লিপবোর্ডে কপি: একক ক্লিকে তৈরি কোডটি সহজেই কপি করুন
  • কোনো নির্ভরতা নেই: বাহ্যিক API কল বা ব্যাকএন্ড প্রয়োজনীয়তা ছাড়াই ব্রাউজারে সম্পূর্ণ কাজ করে

রিয়্যাক্ট টেইলউইন্ড কম্পোনেন্ট বিল্ডার ব্যবহার করার পদক্ষেপ-দ্বারা-পদক্ষেপ গাইড

ধাপ 1: আপনার রিয়্যাক্ট কম্পোনেন্ট প্রকার বেছে নিন

শুরু করুন আপনি যে ধরনের কম্পোনেন্ট তৈরি করতে চান তা বেছে নিয়ে:

  • বাটন: কল-টু-অ্যাকশন বাটন, সাবমিট বাটন বা নেভিগেশন বাটন তৈরি করুন
  • টেক্সট ইনপুট: একক-লাইন টেক্সট সংগ্রহের জন্য ফর্ম ইনপুট ক্ষেত্র ডিজাইন করুন
  • টেক্সটেরিয়া: দীর্ঘ বিষয়বস্তুর জন্য মাল্টি-লাইন টেক্সট ইনপুট এলাকা তৈরি করুন
  • সিলেক্ট: কাস্টমাইজযোগ্য বিকল্পগুলি সহ ড্রপডাউন নির্বাচন মেনু তৈরি করুন
  • ব্রেডক্রাম্ব: পৃষ্ঠার হিয়ারারকি দেখাতে নেভিগেশন ব্রেডক্রাম্ব ডিজাইন করুন

প্রত্যেকটি কম্পোনেন্ট প্রকারের নিজস্ব কাস্টমাইজযোগ্য বৈশিষ্ট্য থাকে যা বৈশিষ্ট্য প্যানেলে প্রদর্শিত হবে।

ধাপ 2: টেইলউইন্ড CSS বৈশিষ্ট্য কাস্টমাইজ করুন

একটি কম্পোনেন্ট প্রকার বেছে নেওয়ার পরে, আপনি বৈশিষ্ট্য প্যানেল ব্যবহার করে এর চেহারা এবং আচরণ কাস্টমাইজ করতে পারেন। সাধারণ বৈশিষ্ট্যগুলির মধ্যে রয়েছে:

  • টেক্সট কন্টেন্ট: বাটনে প্রদর্শিত টেক্সট বা ইনপুটের প্লেসহোল্ডার টেক্সট সেট করুন
  • রঙ: টেইলউইন্ড রঙের প্যালেট থেকে টেক্সট এবং ব্যাকগ্রাউন্ড রঙ বেছে নিন
  • প্যাডিং: কম্পোনেন্টের অভ্যন্তরীণ স্পেসিং সমন্বয় করুন
  • মার্জিন: কম্পোনেন্টের বহিরাগত স্পেসিং সেট করুন
  • বর্ডার: বিভিন্ন শৈলী, প্রস্থ এবং রঙের সাথে বর্ডার যুক্ত করুন
  • বর্ডার ব্যাডিয়াস: আপনার কম্পোনেন্টের কোণগুলি গোল করুন
  • প্রস্থ: কম্পোনেন্টের প্রস্থ সেট করুন (অটো, পূর্ণ বা শতাংশভিত্তিক)
  • টাইপোগ্রাফি: ফন্ট আকার, ওজন এবং অন্যান্য টেক্সট বৈশিষ্ট্য সমন্বয় করুন

নির্দিষ্ট কম্পোনেন্ট প্রকারের জন্য, অতিরিক্ত বৈশিষ্ট্য উপলব্ধ:

  • টেক্সট ইনপুট/টেক্সটেরিয়া: প্লেসহোল্ডার টেক্সট, প্রয়োজনীয় অবস্থা এবং অক্ষম অবস্থা সেট করুন
  • টেক্সটেরিয়া: সারির সংখ্যা সমন্বয় করুন
  • সিলেক্ট: বিকল্প যুক্ত করুন, সম্পাদনা করুন বা অপসারণ করুন
  • ব্রেডক্রাম্ব: নেভিগেশন আইটেম এবং লিঙ্ক কনফিগার করুন

ধাপ 3: রিয়্যাক্ট কম্পোনেন্ট লাইভ প্রিভিউ

আপনি যখন বৈশিষ্ট্য সমন্বয় করবেন, লাইভ প্রিভিউ সরাসরি আপডেট হবে, যা আপনার কম্পোনেন্ট কিভাবে দেখাবে তা দেখাবে। আপনি এছাড়াও:

  • প্রতিক্রিয়াশীল আচরণ পরীক্ষা করুন: মোবাইল, ট্যাবলেট এবং ডেস্কটপ দৃশ্যে সুইচ করে নিশ্চিত করুন যে আপনার কম্পোনেন্ট সমস্ত স্ক্রিন আকারে ভাল দেখায়
  • বিভিন্ন অবস্থা পরীক্ষা করুন: আপনার কম্পোনেন্ট সাধারণ, হোভার, ফোকাস এবং সক্রিয় অবস্থায় কিভাবে দেখায় তা দেখুন

ধাপ 4: রিয়্যাক্ট টেইলউইন্ড কোড রপ্তানি করুন

আপনি যখন আপনার কম্পোনেন্টে সন্তুষ্ট হবেন, টুল স্বয়ংক্রিয়ভাবে টেইলউইন্ড CSS ক্লাসগুলি সহ তাত্পর্যপূর্ণ রিয়্যাক্ট কোড তৈরি করে। আপনি:

  • তৈরি কোডটি পর্যালোচনা করতে পারেন: প্রয়োগ করা সমস্ত টেইলউইন্ড ক্লাসগুলি সহ সঠিক রিয়্যাক্ট JSX কোড দেখুন
  • ক্লিপবোর্ডে কপি করুন: "কোড কপি করুন" বোতামে ক্লিক করে কোডটি আপনার ক্লিপবোর্ড
🔗

সম্পর্কিত সরঞ্জাম

আপনার কাজে দরকারী হতে পারে আরো টুল খুঁজে বের করুন