Tailwind এ অনুভূমিক এবং উল্লম্ব প্যাডিং কিভাবে যোগ করবেন?

Tailwind E Anubhumika Ebam Ullamba Pyadim Kibhabe Yoga Karabena



Tailwind CSS-এ, প্যাডিং নির্দিষ্ট উপাদানের বিষয়বস্তু এবং এর সীমানার মধ্যবর্তী স্থান। অনুভূমিক প্যাডিং উপাদানের বাম এবং ডান দিকে স্থান, যেখানে উল্লম্ব প্যাডিং একটি উপাদানের উপরে এবং নীচের স্থান। Tailwind পছন্দসই উপাদানগুলিতে অনুভূমিক বা উল্লম্ব প্যাডিং যোগ করার জন্য বিভিন্ন ইউটিলিটি ক্লাস অফার করে।

এই নিবন্ধটি ব্যাখ্যা করবে:







Tailwind এ অনুভূমিক প্যাডিং কিভাবে যোগ করবেন?

Tailwind-এ একটি উপাদানে অনুভূমিক প্যাডিং যোগ করতে, HTML প্রোগ্রামে পছন্দসই উপাদানের সাথে “px-” ক্লাস ব্যবহার করা হয়। ব্যবহারকারীরা প্যাডিংয়ের আকারের জন্য বিভিন্ন মান নির্দিষ্ট করতে পারেন। এই শ্রেণীটি x-অক্ষ বরাবর প্যাডিং যোগ করে অর্থাৎ উপাদানের বাম এবং ডান উভয় দিকে।



বাক্য গঠন



< উপাদান ক্লাস = 'px-0 ...' > ... উপাদান >


এখানে 'px' 'x-অক্ষ' বা 'অনুভূমিক প্যাডিং' উপস্থাপন করে।





উদাহরণ: একটি HTML উপাদানে অনুভূমিক প্যাডিং প্রয়োগ করা

এই উদাহরণে, আমরা ব্যবহার করব ' px-20 'এর সাথে ইউটিলিটি ক্লাস'

অনুভূমিক প্যাডিং যোগ করার জন্য উপাদান:



< শরীর >

< div ক্লাস = 'bg-pink-600 px-20 w-max' >
প্যাডিং ভিতরে Tailwind CSS
div >

শরীর >


আউটপুট


উপরের আউটপুটটি পাত্রের বাম এবং ডান দিকে প্যাডিং দেখায়। এটি নির্দেশ করে যে অনুভূমিক প্যাডিং সফলভাবে কন্টেইনার উপাদানে প্রয়োগ করা হয়েছে।

Tailwind এ উল্লম্ব প্যাডিং কিভাবে যোগ করবেন?

Tailwind এ একটি উপাদানে উল্লম্ব প্যাডিং যোগ করতে, ' py- HTML প্রোগ্রামে নির্দিষ্ট উপাদান সহ ইউটিলিটি ক্লাস। এই শ্রেণীটি y-অক্ষ বরাবর প্যাডিং যোগ করে অর্থাৎ উপাদানের উপরের এবং নীচে উভয় দিকেই।

বাক্য গঠন

< উপাদান ক্লাস = 'py-0 ...' > ... উপাদান >


এখানে 'py' 'y-অক্ষ' বা 'উল্লম্ব প্যাডিং' উপস্থাপন করে।

উদাহরণ: একটি HTML উপাদানে উল্লম্ব প্যাডিং প্রয়োগ করা

এই উদাহরণে, আমরা ব্যবহার করব ' py-20 'এর সাথে ইউটিলিটি ক্লাস'

এটিতে উল্লম্ব প্যাডিং যোগ করতে উপাদান:

< শরীর >

< div ক্লাস = 'bg-pink-600 py-20 w-max' >
প্যাডিং ভিতরে Tailwind CSS
div >

শরীর >


আউটপুট


উপরের আউটপুটটি পাত্রের উপরের এবং নীচের দিকে প্যাডিং দেখায়। এটি নির্দেশ করে যে উল্লম্ব প্যাডিং কার্যকরভাবে ধারক উপাদানে প্রয়োগ করা হয়েছে।

উপসংহার

Tailwind-এ অনুভূমিক এবং উল্লম্ব প্যাডিং যোগ করতে, “ px- ' এবং ' py- ” ইউটিলিটি ক্লাস যথাক্রমে HTML প্রোগ্রামে পছন্দসই উপাদানের সাথে ব্যবহার করা হয়। ব্যবহারকারীরা একটি উপাদানের বাম এবং ডান বা উপরে এবং নীচে প্যাডিং প্রয়োগ করতে বিভিন্ন মান নির্দিষ্ট করতে পারেন। এই নিবন্ধটি Tailwind-এ অনুভূমিক এবং উল্লম্ব প্যাডিং প্রয়োগ করার সম্পূর্ণ পদ্ধতি চিত্রিত করেছে।