কিভাবে Tailwind মধ্যে নির্বিচারে মান ব্যবহার করবেন?

Kibhabe Tailwind Madhye Nirbicare Mana Byabahara Karabena



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

এই নিবন্ধটি Tailwind CSS-এ নির্বিচারে মান ব্যবহার করার পদ্ধতি ব্যাখ্যা করবে।







কিভাবে Tailwind মধ্যে নির্বিচারে মান ব্যবহার করবেন?

আরবিট্রারি মান হল কাস্টম মান যা টেলউইন্ড কনফিগারেশন ফাইলে সংজ্ঞায়িত না করে সরাসরি HTML ক্লাস অ্যাট্রিবিউটে লেখা যায়। এগুলি একটি বর্গাকার বন্ধনী স্বরলিপির সাথে উপসর্গযুক্ত, যেমন [24px], [2.5rem], ইত্যাদি। Tailwind-এ স্বেচ্ছাচারী মানগুলি ব্যবহার করতে, একটি বর্গাকার বন্ধনী স্বরলিপি ব্যবহার করুন এবং গতিশীলভাবে ইউটিলিটি ক্লাস তৈরি করতে যেকোনো কাস্টম মান নির্দিষ্ট করুন।



আরও ভাল বোঝার জন্য নীচের তালিকাভুক্ত পদক্ষেপগুলি দেখুন:



ধাপ 1: HTML প্রোগ্রামে আরবিট্রারি ভ্যালু ব্যবহার করুন

একটি HTML প্রোগ্রাম তৈরি করুন এবং পছন্দসই ক্লাস তৈরি করতে যেকোনো কাস্টম মান সহ বর্গাকার বন্ধনী স্বরলিপি ব্যবহার করুন। উদাহরণস্বরূপ, আমরা ব্যবহার করেছি 'bg-[#e9e516]', 'w-[600px]', 'h-[400px]', 'p-[13px]', এবং অন্যান্য ক্লাস:





< শরীর >
< div ক্লাস = 'bg-[#e9e516] w-[600px] h-[400px] p-[13px] m-[19px]' >
< h1 ক্লাস = 'টেক্সট-[30px]' > লিনাক্স ইঙ্গিত < / h1 >
< h2 ক্লাস = 'টেক্সট-[#7405ab]' > স্বাগত < / h2 >
< পি ক্লাস = 'ট্র্যাকিং-[0.5rem]' > Tailwind সম্পর্কে জানুন < / পি >

< / div >
< / শরীর >

এখানে:

  • 'বিজি-[#e9e516]' ক্লাস
    এর পটভূমির রঙ সেট করে '#e9e516' (হলুদ)।
  • 'w-[600px]' ক্লাস
    এর প্রস্থ 600 পিক্সেল সেট করে।
  • 'h-[400px]' ক্লাস
    উপাদানে 400 পিক্সেলের উচ্চতা প্রয়োগ করে।
  • 'p-[13px]' ক্লাস
    এর প্যাডিং 13 পিক্সেল সেট করে।
  • 'm-[19px]' ক্লাস
    এর মার্জিন 19 পিক্সেল সেট করে।
  • 'টেক্সট-[30px]' ক্লাস

    উপাদানের ফন্টের আকার 30 পিক্সেল সেট করে।

  • 'টেক্সট-[#7405ab]' ক্লাস সেট

    উপাদানের পাঠ্যের রঙ বেগুনি (#7405ab)।

  • 'ট্র্যাকিং-[0.5rem]' ক্লাস

    এলিমেন্টে অক্ষর-স্পেসিং 0.5 rem-এ প্রয়োগ করে।

ধাপ 2: আউটপুট যাচাই করুন

নির্বিচারে মানগুলি সঠিকভাবে কাজ করছে তা নিশ্চিত করতে, HTML ওয়েব পৃষ্ঠাটি দেখুন:



উপরের আউটপুট নির্দেশ করে যে নির্বিচারে মানগুলি সঠিকভাবে কাজ করছে যেমন তারা সংজ্ঞায়িত করা হয়েছিল।



উপসংহার

Tailwind-এ স্বেচ্ছাচারী মানগুলি ব্যবহার করতে, গতিশীলভাবে ক্লাস তৈরি করতে HTML প্রোগ্রামে যেকোনো কাস্টম মান সহ একটি বর্গাকার বন্ধনী নোটেশন ব্যবহার করুন। ব্যবহারকারীরা যে কোনো সম্পত্তির জন্য মান ব্যবহার করতে পারেন যা একটি সংখ্যাসূচক বা রঙের মান গ্রহণ করে, যেমন ফন্টের আকার, রঙ, প্রস্থ, উচ্চতা, মার্জিন, প্যাডিং ইত্যাদি। এই নিবন্ধটি Tailwind CSS-এ স্বেচ্ছাচারী মান ব্যবহার করার পদ্ধতি ব্যাখ্যা করেছে