এই পোস্টটি Tailwind-এ কলামগুলির মধ্যে ফাঁক যোগ করার সম্পূর্ণ পদ্ধতি সম্পর্কে বিস্তারিত বর্ণনা করে।
টেলউইন্ডে কলামের মধ্যে ফাঁক কীভাবে যোগ করবেন?
Tailwind-এ কলামগুলির মধ্যে ফাঁক যোগ করতে, বিল্ট-ইন ব্যবহার করুন “ ফাঁক-{সাইজ} 'উপযোগিতা। এটি একটি পূর্ণসংখ্যার মান নির্দিষ্ট করে যা অনুভূমিকভাবে এবং উল্লম্বভাবে কলামগুলির মধ্যে ব্যবধানকে উপস্থাপন করে। উল্লেখিত উদাহরণের সাহায্যে কার্যত এই কাজটি করা যাক।
প্রজেক্ট ফাইল স্ট্রাকচার
দ্য ' ফাঁক-{সাইজ} প্রদত্ত ফাইল কাঠামো অনুসরণ করে যে কোনো Tailwind প্রকল্পে ইউটিলিটি প্রয়োগ করা যেতে পারে:
প্রথম উদাহরণ দিয়ে শুরু করা যাক।
উদাহরণ 1: সারি এবং কলামের মধ্যে একই ব্যবধান যোগ করতে 'গ্যাপ-{সাইজ}' ইউটিলিটি ব্যবহার করুন
এই উদাহরণটি প্রদত্ত কলামগুলির মধ্যে অনুভূমিকভাবে এবং উল্লম্বভাবে একই ব্যবধান যোগ করতে 'ব্যবধান-{সাইজ}' ইউটিলিটি প্রয়োগ করে।
HTML কোড
নিম্নলিখিত কোডের ওভারভিউ:
< মাথা >
< লিঙ্ক href = '/dist/output.css' rel = 'স্টাইলশীট' >
< / মাথা >
< শরীর >
< h1 ক্লাস = 'টেক্সট-3xl ফন্ট-বোল্ড টেক্সট-সেন্টার আন্ডারলাইন টেক্সট-কমলা-600' > Linuxhint-এ স্বাগতম! < / h1 < br >
< div ক্লাস = 'mx-2 গ্রিড grid-cols-3 gap-4' >
< div ক্লাস = 'বর্ডার-2 বর্ডার-কমলা-600' > প্রথম টিউটোরিয়াল < / div >
< div ক্লাস = 'বর্ডার-2 বর্ডার-কমলা-600' > দ্বিতীয় টিউটোরিয়াল < / div >
< div ক্লাস = 'বর্ডার-2 বর্ডার-কমলা-600' > তৃতীয় টিউটোরিয়াল < / div >
< div ক্লাস = 'বর্ডার-2 বর্ডার-কমলা-600' > চতুর্থ টিউটোরিয়াল < / div >
< div ক্লাস = 'বর্ডার-2 বর্ডার-কমলা-600' > পঞ্চম টিউটোরিয়াল < / div >
< div ক্লাস = 'বর্ডার-2 বর্ডার-কমলা-600' > ষষ্ঠ টিউটোরিয়াল < / div >
< div ক্লাস = 'বর্ডার-2 বর্ডার-কমলা-600' > সপ্তম টিউটোরিয়াল < / div >
< div ক্লাস = 'বর্ডার-2 বর্ডার-কমলা-600' > অষ্টম টিউটোরিয়াল < / div >
< / div >
<শরীর<
উপরের কোড লাইনে:
- প্রথমে প্রধান CSS ফাইল লিঙ্ক করুন “ /dist/output.css ' বিদ্যমান HTML ফাইলের সাথে ' index.html ' ব্যবহার করে ' <লিঙ্ক> 'হেড' বিভাগে ট্যাগ করুন।
- এরপর, 'শরীর' বিভাগটি একটি '
' উপাদান তৈরি করে যা ' অক্ষরের আকার ', ' হরফের ওজন ', ' পাঠ্য সারিবদ্ধ ', ' পাঠ্য সজ্জা ', এবং ' লেখার রঙ ” Tailwind ক্লাস, যথাক্রমে.
- এর পরে, একটি '' উপাদান যোগ করা হয় যা ' গ্রিড ' ইউটিলিটি তার বিষয়বস্তুকে গ্রিড লেআউটের উল্লিখিত সংখ্যায় সেট করতে, ' মার্জিন অনুভূমিক মার্জিন সেট করতে ক্লাস এবং ' ফাঁক ” কলামের মধ্যে নির্দিষ্ট ফাঁক যোগ করতে ইউটিলিটি।
- '
' উপাদানের বডি বিভাগে, আরও আটটি '' উপাদান অন্তর্ভুক্ত করা হয়েছে যা ব্যবহার করে ' সীমানার প্রশস্থতা ' এবং ' সীমান্ত রঙ ” ক্লাস, যথাক্রমে।আউটপুট
লাইভ সার্ভারে উপরের HTML কোডটি চালান এবং আউটপুট বিশ্লেষণ করুন:
যেমন দেখা যায়, আউটপুট যথাযথভাবে উভয় মাত্রার কলামের মধ্যে নির্দিষ্ট ফাঁক যোগ করে।
উদাহরণ 2: স্বাধীনভাবে সারি এবং কলামের মধ্যে একটি ব্যবধান যোগ করতে 'গ্যাপ-{সাইজ}' ইউটিলিটি ব্যবহার করুন
দ্য ' ফাঁক-{সাইজ} ” ইউটিলিটি “x(অনুভূমিক)” এবং “y(উল্লম্ব)” মাত্রার সাথে সারির জন্য “গ্যাপ-এক্স-{সাইজ}” এবং কলাম যোগ করার জন্য “গ্যাপ-ই-{সাইজ}” হিসাবে প্রয়োগ করা যেতে পারে। পৃথকভাবে তাদের মধ্যে ব্যবধান।আসুন এর বাস্তব বাস্তবায়ন দেখি।
HTML কোড
< মাথা >
প্রদত্ত কোডটি দেখুন:
< লিঙ্ক href = '/dist/output.css' rel = 'স্টাইলশীট' >
< / মাথা >
< শরীর >
< div ক্লাস = 'mx-2 গ্রিড grid-cols-4 gap-x-4 gap-y-6' >
< div ক্লাস = 'বর্ডার-2 বর্ডার-কমলা-600' >প্রথম টিউটোরিয়াল< / div >
< div ক্লাস = 'বর্ডার-2 বর্ডার-কমলা-600' >দ্বিতীয় টিউটোরিয়াল< / div >
< div ক্লাস = 'বর্ডার-2 বর্ডার-কমলা-600' >তৃতীয় টিউটোরিয়াল< / div >
< div ক্লাস = 'বর্ডার-2 বর্ডার-কমলা-600' >চতুর্থ টিউটোরিয়াল< / div >
< div ক্লাস = 'বর্ডার-2 বর্ডার-কমলা-600' >পঞ্চম টিউটোরিয়াল< / div >
< div ক্লাস = 'বর্ডার-2 বর্ডার-কমলা-600' >ষষ্ঠ টিউটোরিয়াল< / div >
< div ক্লাস = 'বর্ডার-2 বর্ডার-কমলা-600' >সপ্তম টিউটোরিয়াল< / div >
< div ক্লাস = 'বর্ডার-2 বর্ডার-কমলা-600' >অষ্টম টিউটোরিয়াল< / div >
< / div >
< শরীর >এখানে ' ফাঁক-এক্স-{সাইজ} ” ইউটিলিটি সারি এবং “এর মধ্যে ফাঁক যোগ করে ফাঁক-y-{সাইজ} ” স্বাধীনভাবে কলামের মধ্যে নির্দিষ্ট ফাঁক যোগ করে।
আউটপুট
উপরের ফলাফলটি যাচাই করে যে সারি এবং কলামের মধ্যে ব্যবধান সেই অনুযায়ী প্রয়োগ করা হয়েছে।
উপসংহার
'Tailwind CSS' একটি বিল্ট-ইন প্রদান করে ' ফাঁক-{সাইজ} ” কলামের মধ্যে ফাঁক যোগ করতে ইউটিলিটি। এটি 'এর মাধ্যমে আলাদাভাবে সারি এবং কলামের মধ্যে ফাঁক যোগ করতেও ব্যবহার করা যেতে পারে ফাঁক-এক্স-{সাইজ} ' এবং ' ফাঁক-y-{সাইজ} 'ইউটিলিটিস। এই পোস্টটি Tailwind-এ কলামগুলির মধ্যে ফাঁক যোগ করার সম্পূর্ণ পদ্ধতি প্রদান করেছে।
- '