এই ব্লগটি Tailwind-এ একাধিক উপাদানের মধ্যে সমান স্থান নির্ধারণের একটি ধারণা প্রদান করবে।
Tailwind এ একাধিক উপাদানের মধ্যে সমান স্থান কিভাবে বরাদ্দ করবেন?
ব্যবহারকারীরা ' ব্যবহার করে উপাদানগুলির মধ্যে সমান স্থান নির্ধারণ করতে পারেন স্থান-{x/y}-{size} 'ইউটিলিটি ক্লাস। ব্যবহারকারীরা একটি পূর্ণসংখ্যার মান উল্লেখ করে x বা y-অক্ষে স্থান যোগ করতে পারেন। স্পেসিং ইউটিলিটি প্রয়োজনীয় কারণ এটি ওয়েব পৃষ্ঠাটিকে আকর্ষণীয় করে তোলে। যদি একটি ওয়েবপেজে উপাদানগুলির মধ্যে সঠিক ব্যবধান না থাকে তবে এটি ব্যবহারকারীদের আকর্ষণ করবে না।
গ্রিড উপাদানগুলির মধ্যে সমান স্থান নির্ধারণের জন্য একটি কোড উদাহরণ নেওয়া যাক।
পদ্ধতি 1: X-অক্ষে স্থান বরাদ্দ করা।
x-অক্ষে নির্ধারিত সমান স্থান উপাদানটির ডান এবং বামে সমান ব্যবধান তৈরি করে। x-অক্ষে স্থান নির্ধারণ করতে নিম্নলিখিত সিনট্যাক্স ব্যবহার করুন:
স্থান - এক্স - { আকার }
আকার যেকোনো পূর্ণসংখ্যার মান হতে পারে।
x-অক্ষে সমান স্থান নির্ধারণ করতে নীচের কোডটি বিবেচনা করুন:
< শরীর >< div ক্লাস = 'mx-4 grid grid-cols-4 space-x-4' >
< div ক্লাস = 'bg-সবুজ-400 h-16 বৃত্তাকার-lg বর্ডার-2 বর্ডার-সবুজ-800' > 1 div >
< div ক্লাস = 'bg-সবুজ-400 h-16 বৃত্তাকার-lg বর্ডার-2 বর্ডার-সবুজ-800' > 2 div >
< div ক্লাস = 'bg-সবুজ-400 h-16 বৃত্তাকার-lg বর্ডার-2 বর্ডার-সবুজ-800' > 3 div >
< div ক্লাস = 'bg-সবুজ-400 h-16 বৃত্তাকার-lg বর্ডার-2 বর্ডার-সবুজ-800' > 4 div >
div >
শরীর >
এই কোডে:
- ' mx-4 ” x-অক্ষে (ডান এবং বামে) 4 পিক্সের মার্জিন যোগ করে।
- দ্য ' গ্রিড ” ক্লাস একটি গ্রিড তৈরি করে।
- দ্য ' grid-cols-4 গ্রিডে ৪টি কলাম তৈরি করুন।
- দ্য ' স্থান-x-4 ” গ্রিডের উপাদানগুলির মধ্যে একটি 4px স্থান যোগ করে৷
- ' বিজি-সবুজ-400 ” ব্যাকগ্রাউন্ডের রঙ সবুজে সেট করে।
- ' h-16 ” উচ্চতা 16px সেট করে।
- দ্য ' বৃত্তাকার-lg ” কোণার বৃত্তাকার করে এবং সীমানা ব্যাসার্ধ বড়।
- দ্য ' সীমানা-২ ” উপাদানটির চারপাশে একটি 2px সীমানা তৈরি করে।
- ' বর্ডার-সবুজ-800 ” সীমানা গাঢ় সবুজ করে তোলে।
আউটপুট
উপরের কোড দ্বারা তৈরি আউটপুট পূর্বরূপ দেখুন:
এটি দেখা যায় যে উপাদানগুলির মধ্যে একটি 4px ব্যবধান বরাদ্দ করা হয়েছে।
পদ্ধতি 2: y-অক্ষে স্থান বরাদ্দ করা।
উপরের কোডে ছোট পরিবর্তনের মাধ্যমে উপরের পদ্ধতির মতো y-অক্ষে ব্যবধান নির্ধারণ করা যেতে পারে। এটি y-অক্ষ বরাবর স্থান নির্ধারণ করে (উপর এবং নীচে)। এর জন্য সিনট্যাক্স হল:
নিচের কোডটি y-অক্ষ বরাবর স্পেস যোগ করতে প্রয়োগ করা যেতে পারে:
< শরীর >< div ক্লাস = 'mx-4 my-4 space-y-4' >
< div ক্লাস = 'bg-সবুজ-400 h-16 বৃত্তাকার-lg বর্ডার-2 বর্ডার-সবুজ-800' > 1 div >
< div ক্লাস = 'bg-সবুজ-400 h-16 বৃত্তাকার-lg বর্ডার-2 বর্ডার-সবুজ-800' > 2 div >
< div ক্লাস = 'bg-সবুজ-400 h-16 বৃত্তাকার-lg বর্ডার-2 বর্ডার-সবুজ-800' > 3 div >
< div ক্লাস = 'bg-সবুজ-400 h-16 বৃত্তাকার-lg বর্ডার-2 বর্ডার-সবুজ-800' > 4 div >
div >
শরীর >
এই কোডে:
- ' mx-4 আউটপুটকে আরও অপ্টিমাইজ করতে উপাদানগুলির বাম এবং ডানে একটি 4px মার্জিন যোগ করে৷
- ' আমার-4 ” y-অক্ষে (উপর এবং নীচে) একটি 4px মার্জিন যোগ করে।
- ' স্থান-y-4 ” y-অক্ষে (উপর এবং নীচে) 4px স্থান যোগ করে।
আউটপুট
উপরের কোডটি সংরক্ষণ করুন এবং ব্যবধান দেখতে এটির দ্বারা তৈরি ওয়েবপৃষ্ঠাটির পূর্বরূপ দেখুন:
যে সব উপাদানের মধ্যে সমান স্থান বরাদ্দ সম্পর্কে.
উপসংহার
Tailwind-এ একাধিক উপাদানের মধ্যে সমান স্থান নির্ধারণ করতে, ব্যবহারকারীরা ব্যবহার করতে পারেন “ স্থান-{x/y}-{size} ” ইউটিলিটি ক্লাস এবং প্রয়োজন অনুযায়ী আকার হিসাবে একটি পূর্ণসংখ্যার মান নির্দিষ্ট করুন। উপাদানগুলির মধ্যে সমান ব্যবধান আউটপুটকে আরও মাপযোগ্য করে তোলে এবং দর্শকরা ওয়েবপৃষ্ঠার সাথে জড়িত থাকে। এই পোস্টটি Tailwind-এ একাধিক উপাদানের মধ্যে সমান স্থান বরাদ্দ করার পদ্ধতি প্রদান করেছে।