কিভাবে Tailwind সব দিকে প্যাডিং যোগ করতে?

Kibhabe Tailwind Saba Dike Pyadim Yoga Karate



Tailwind CSS হল একটি সুপরিচিত ফ্রেমওয়ার্ক যা কাস্টমাইজযোগ্য এবং প্রতিক্রিয়াশীল ওয়েব পেজ বা ডিজাইন তৈরি করতে ব্যবহার করা হয়। এটি ব্যবহারকারীদের কোনো কাস্টম CSS না লিখে উপাদানগুলির বিন্যাস এবং ব্যবধান নিয়ন্ত্রণ করতে দেয়। প্যাডিং হল নির্দিষ্ট উপাদানের বিষয়বস্তু এবং এর সীমানার মধ্যবর্তী স্থান। কখনও কখনও, ব্যবহারকারীরা একটি উপাদানের প্রতিটি পাশে একই পরিমাণ প্যাডিং প্রয়োগ করতে চান। টেইলউইন্ড একটি উপাদানের সব দিকে প্যাডিং প্রয়োগ করার জন্য বা নির্দিষ্ট দিকে যেমন উপরে, ডান, নীচে বা বামে ইউটিলিটি ক্লাস প্রদান করে।

এই নিবন্ধটি টেইলউইন্ডে একটি উপাদানের সব দিকে প্যাডিং যুক্ত করার পদ্ধতির উদাহরণ দেবে।







কিভাবে Tailwind সব দিকে প্যাডিং যোগ করতে?

Tailwind-এ একটি নির্দিষ্ট উপাদানের সব দিকে প্যাডিং যোগ করতে, একটি HTML কাঠামো তৈরি করুন। তারপর, নির্দিষ্ট উপাদানের সাথে “p-” ইউটিলিটি ক্লাস ব্যবহার করুন। একটি উপাদানে প্যাডিং প্রয়োগ করার জন্য এটি পছন্দসই মান নির্দিষ্ট করতে হবে। পরবর্তী, পরিবর্তনগুলি নিশ্চিত করতে HTML ওয়েব পৃষ্ঠাটি দেখুন।



বাক্য গঠন



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


'' কে যেকোনো পছন্দসই সংখ্যা দিয়ে প্রতিস্থাপন করুন, যেমন 2, 4, 12, 20, ইত্যাদি।





উদাহরণ

এই উদাহরণে, আমাদের দুটি '

' উপাদান এবং আমরা দুটি ভিন্ন প্যাডিং প্রয়োগ করব অর্থাৎ ' p-8 ' এবং ' p-14 'তাদের উপর:



< শরীর >

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

< br >

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

শরীর >


এখানে, প্রথম

এ:

    • ' bg-pink-600 ” ক্লাস
      উপাদানের পটভূমিতে গোলাপী রঙ সেট করে।
    • ' p-8 ” ক্লাস কন্টেইনারের সব দিকে প্যাডিংয়ের 8 ইউনিট যোগ করে।
    • ' w- সর্বোচ্চ ” ক্লাস
      উপাদানের প্রস্থকে তার সর্বাধিক বিষয়বস্তুর প্রস্থে সেট করে।

দ্বিতীয়

-এ:

    • ' bg-teal-600 ” ক্লাস
      উপাদানের পটভূমিতে টিল রঙ সেট করে।
    • ' p-14 ” ক্লাস কন্টেইনারের সব দিকে প্যাডিংয়ের 14 ইউনিট প্রযোজ্য।
    • ' w- সর্বোচ্চ ” ক্লাস
      উপাদানের প্রস্থকে তার সর্বাধিক বিষয়বস্তুর প্রস্থে সেট করে।

আউটপুট


উপরের আউটপুট অনুযায়ী, নির্দিষ্ট প্যাডিং উভয় পাত্রের সব দিকে প্রয়োগ করা হয়েছে।

উপসংহার

Tailwind-এ একটি উপাদানের সব দিকে প্যাডিং যোগ করতে, HTML প্রোগ্রামে কাঙ্খিত উপাদানের সাথে “p-” ইউটিলিটি ক্লাস ব্যবহার করা হয়। ব্যবহারকারীদের একটি উপাদানে প্যাডিং প্রয়োগ করার জন্য নির্দিষ্ট মান উল্লেখ করতে হবে। যাচাইকরণের জন্য, HTML ওয়েব পৃষ্ঠাটি দেখুন এবং পরিবর্তনগুলি নিশ্চিত করুন৷ এই নিবন্ধটি টেইলউইন্ডে একটি উপাদানের সব দিকে প্যাডিং যুক্ত করার পদ্ধতির উদাহরণ দিয়েছে।