= 'h-স্ক্রিন p-10 sm:bg-red-700 md:bg-blue-600 lg:bg-green-500 xl:bg-pink-700' >

= 'টেক্সট-3xl m-5 sm:টেক্সট-সাদা টেক্সট-সেন্টার' >

লিনাক্স ইঙ্গিত!

>

= 'টেক্সট-2xl m-5 md:পাঠ্য-সাদা পাঠ-কেন্দ্র' >

এই টিউটোরিয়ালে স্বাগতম

>

= 'টেক্সট-2xl m-5 lg:টেক্সট-সাদা টেক্সট-সেন্টার' >

Tailwind CSS

>

= 'টেক্সট-2xl m-5 xl:পাঠ্য-সাদা পাঠ-কেন্দ্র' >

থিম

>

>

শরীর >

এখানে:

• ' -p-10 ' এবং ' m-5 ” হল ব্যবধানের সম্পত্তি।
• ' sm ', ' মো ', ' এলজি ', এবং ' xl ” হল পর্দার বৈশিষ্ট্য।
• ' লাল -700 ', ' নীল-600 ', ' সবুজ -500 ', ' গোলাপী -700 ', এবং ' সাদা ” হল রঙের বৈশিষ্ট্য।

ধাপ 2: HTML প্রোগ্রাম চালান

তারপর, HTML ওয়েব পৃষ্ঠাটি দেখতে HTML প্রোগ্রামটি চালান:

উপরের আউটপুটে, ডিফল্ট স্ক্রিন, রঙ এবং স্পেসিং বৈশিষ্ট্য দেখা যায়।

টেইলউইন্ড থিমে স্ক্রিন, রঙ এবং স্পেসিং কীভাবে কনফিগার করবেন?

Tailwind থিমে স্ক্রিন, রঙ এবং ব্যবধান কনফিগার করতে, প্রদত্ত-প্রদত্ত পদক্ষেপগুলি দেখুন:

• খোলা ' tailwind.config.js ' ফাইল।
• 'এ যান থিম ” বিভাগ এবং প্রয়োজন অনুসারে স্ক্রিন, রঙ এবং ব্যবধান বৈশিষ্ট্য কাস্টমাইজ করুন।
• HTML প্রোগ্রামে কাস্টমাইজড বৈশিষ্ট্য ব্যবহার করুন।
• যাচাইকরণের জন্য HTML ওয়েব পৃষ্ঠা দেখুন।

ধাপ 1: Tailwind কনফিগার ফাইলে স্ক্রীন, রং এবং স্পেসিং কনফিগার করুন

মধ্যে ' থিম 'এর বিভাগ' tailwind.config.js ” ফাইল, প্রয়োজন অনুসারে স্ক্রিন, রঙ এবং ব্যবধান বৈশিষ্ট্য কাস্টমাইজ করুন। উদাহরণস্বরূপ, আমরা এই বৈশিষ্ট্যগুলিকে নিম্নরূপ কাস্টমাইজ করেছি:

মডিউল .রপ্তানি = {

বিষয়বস্তু : [ './index.html' ] ,

থিম : {

// পর্দা কাস্টমাইজ করা

পর্দা : {

sm : '480px' ,

মো : '668px' ,

এলজি : '876px' ,

xl : '1100px' ,

} ,

// কাস্টমাইজ করা রং

রং : {

সাদা : #ffffff ,

কালো : '#000000' ,

নীল : '#08609c' ,

সবুজ : '#089c28' ,

লাল : '#9c0306' ,

হলুদ : '#ede60e' ,

গোলাপী : '#ed0e55' ,

} ,

//স্পেসিং কাস্টমাইজ করা

ব্যবধান : {

px : '1px' ,

'0' : '0' ,

'1' : '0.25rem' ,

'2' : '0.5rem' ,

'3' : '0.75rem' ,

'4' : '1 জিনিস' ,

'5' : '1.25 রেম' ,

'6' : '1.5 রেম' ,

'8' : '2rem' ,

'10' : '2.5 রেম' ,

'12' : '3rem' ,

'16' : '4rem' ,

'বিশ' : '5 রেম' ,

}

} ,

} ;

এই কোডে:

• দ্য ' পর্দা ” সম্পত্তি বিভিন্ন আকারের জন্য স্ক্রীন ব্রেকপয়েন্ট সংজ্ঞায়িত করে। এটি উপনাম প্রদান করে (যেমন sm, md, lg, xl) এবং তাদের সমতুল্য মান।
• দ্য ' রং ” সম্পত্তি তাদের নাম এবং হেক্সাডেসিমেল মান জোড়া ব্যবহার করে কাস্টম রং সংজ্ঞায়িত করে।
• দ্য ' ব্যবধান ” সম্পত্তি অনেক মাপের জন্য কাস্টম ব্যবধান মান নির্দিষ্ট করে। এটি 'rem' ইউনিটে নির্দিষ্ট ব্যবধানের মানগুলি উপস্থাপন করতে উপনাম (যেমন px, 0, 1, 2, ইত্যাদি) ব্যবহার করে।

ধাপ 2: HTML প্রোগ্রামে কনফিগার করা বৈশিষ্ট্য ব্যবহার করুন

এখন, HTML প্রোগ্রামে কাস্টমাইজড বৈশিষ্ট্যগুলি ব্যবহার করুন:

<শরীর >