Tailwind CSS-এ, প্যাডিং নির্দিষ্ট উপাদানের বিষয়বস্তু এবং এর সীমানার মধ্যবর্তী স্থান। অনুভূমিক প্যাডিং উপাদানের বাম এবং ডান দিকে স্থান, যেখানে উল্লম্ব প্যাডিং একটি উপাদানের উপরে এবং নীচের স্থান। Tailwind পছন্দসই উপাদানগুলিতে অনুভূমিক বা উল্লম্ব প্যাডিং যোগ করার জন্য বিভিন্ন ইউটিলিটি ক্লাস অফার করে।
এই নিবন্ধটি ব্যাখ্যা করবে:
Tailwind এ অনুভূমিক প্যাডিং কিভাবে যোগ করবেন?
Tailwind-এ একটি উপাদানে অনুভূমিক প্যাডিং যোগ করতে, HTML প্রোগ্রামে পছন্দসই উপাদানের সাথে “px-
বাক্য গঠন
< উপাদান ক্লাস = 'px-0 ...' > ... উপাদান >
এখানে 'px' 'x-অক্ষ' বা 'অনুভূমিক প্যাডিং' উপস্থাপন করে।
উদাহরণ: একটি HTML উপাদানে অনুভূমিক প্যাডিং প্রয়োগ করা
এই উদাহরণে, আমরা ব্যবহার করব ' px-20 'এর সাথে ইউটিলিটি ক্লাস' Tailwind এ একটি উপাদানে উল্লম্ব প্যাডিং যোগ করতে, ' py- বাক্য গঠন উদাহরণ: একটি HTML উপাদানে উল্লম্ব প্যাডিং প্রয়োগ করা এই উদাহরণে, আমরা ব্যবহার করব ' py-20 'এর সাথে ইউটিলিটি ক্লাস' Tailwind-এ অনুভূমিক এবং উল্লম্ব প্যাডিং যোগ করতে, “ px-
< শরীর >
< div ক্লাস = 'bg-pink-600 px-20 w-max' >
প্যাডিং ভিতরে Tailwind CSS
div >
শরীর >
আউটপুট
উপরের আউটপুটটি পাত্রের বাম এবং ডান দিকে প্যাডিং দেখায়। এটি নির্দেশ করে যে অনুভূমিক প্যাডিং সফলভাবে কন্টেইনার উপাদানে প্রয়োগ করা হয়েছে। Tailwind এ উল্লম্ব প্যাডিং কিভাবে যোগ করবেন?
এখানে 'py' 'y-অক্ষ' বা 'উল্লম্ব প্যাডিং' উপস্থাপন করে।
< div ক্লাস = 'bg-pink-600 py-20 w-max' >
প্যাডিং ভিতরে Tailwind CSS
div >
শরীর >
আউটপুট
উপরের আউটপুটটি পাত্রের উপরের এবং নীচের দিকে প্যাডিং দেখায়। এটি নির্দেশ করে যে উল্লম্ব প্যাডিং কার্যকরভাবে ধারক উপাদানে প্রয়োগ করা হয়েছে। উপসংহার