Tailwind CSS-এ, নির্দিষ্ট উপাদানের বিষয়বস্তু এবং এর সীমানার মধ্যে স্থান যোগ করতে প্যাডিং ব্যবহার করা হয়। এটি উপাদানের ভিতরে অতিরিক্ত ব্যবধান যোগ করে। Tailwind CSS প্যাডিং ইউটিলিটি এবং প্যাডিং মানগুলির একটি সেট সরবরাহ করে যা ব্যবহারকারীদের পছন্দসই উপাদানগুলির ব্যবধান কাস্টমাইজ করার অনুমতি দেয়। তদুপরি, ব্যবহারকারীরা একটি একক দিকে প্যাডিং যুক্ত করতে পারেন, যেমন একটি নির্দিষ্ট উপাদানের উপরে, নীচে, বাম বা ডানদিকে।
এই ব্লগটি Tailwind CSS-এ একটি উপাদানের একক দিকে প্যাডিং যোগ করার উদাহরণগুলি প্রদর্শন করবে।
কিভাবে Tailwind একটি একক দিকে প্যাডিং যোগ করতে?
টেলউইন্ডে একটি উপাদানের একক দিকে প্যাডিং যোগ করতে, নিম্নলিখিত ইউটিলিটি ক্লাসগুলি ব্যবহার করা যেতে পারে:
এটি আরও ভালভাবে বুঝতে, নীচে দেওয়া উদাহরণগুলি দেখুন।
উদাহরণ 1: একটি উপাদানের শীর্ষে প্যাডিং যোগ করুন
এই উদাহরণে, আমরা ব্যবহার করব ' pt-10 'এ ইউটিলিটি ক্লাস' উদাহরণ 2: একটি উপাদানের নীচে প্যাডিং যোগ করুন এই উদাহরণে, আমরা ব্যবহার করব ' pb-10 'ক্লাসে' উদাহরণ 3: একটি উপাদানের ডানদিকে প্যাডিং যোগ করুন এই উদাহরণে, আমরা ব্যবহার করব ' pr-10 'ক্লাসে' উদাহরণ 4: একটি উপাদানের বাম দিকে প্যাডিং যোগ করুন এই উদাহরণে, আমরা ব্যবহার করব ' pl-10 'ক্লাসে' Tailwind এ একটি উপাদানের একক দিকে প্যাডিং যোগ করতে, বিভিন্ন ইউটিলিটি ক্লাস ব্যবহার করা যেতে পারে, যেমন “ pl-
< div ক্লাস = 'bg-pink-600 pt-10 w-max' >
প্যাডিং ভিতরে Tailwind CSS
div >
শরীর >
আউটপুট
উপরের আউটপুটটি দেখায় যে প্যাডিংটি পাত্রের শীর্ষে যুক্ত করা হয়েছে।
< div ক্লাস = 'bg-pink-600 pb-10 w-max' >
প্যাডিং ভিতরে Tailwind CSS
div >
শরীর >
আউটপুট 
এটি দেখা যায় যে প্যাডিংটি পাত্রের নীচে যুক্ত করা হয়েছে।
< div ক্লাস = 'bg-pink-600 pr-10 w-max' >
প্যাডিং ভিতরে Tailwind CSS
div >
শরীর >
আউটপুট 
উপরের আউটপুটটি দেখায় যে প্যাডিংটি কন্টেইনার উপাদানের ডানদিকে যুক্ত করা হয়েছে।
< div ক্লাস = 'bg-pink-600 pl-10 w-max' >
প্যাডিং ভিতরে Tailwind CSS
div >
শরীর >
আউটপুট 
এটি লক্ষ্য করা যায় যে প্যাডিংটি পাত্রের বাম দিকে যুক্ত করা হয়েছে। উপসংহার