Tailwind css-ট্রিকসে “কম্পোনেন্ট” এবং “ইউটিলিটিস” এর মধ্যে পার্থক্য করা

এখানে একটি খুব দ্রুত টিপ. আপনি Tailwind ইউটিলিটিগুলিকে উপাদান হিসাবে ভাবতে পারেন – কারণ আপনি আক্ষরিক অর্থে একটি তৈরি করতে পারেন। card টেলউইন্ড ইউটিলিটিগুলির বাইরে “উপাদানগুলি”৷

@utility card {
  border: 1px solid black;
  padding: 1rlh;
}

 ... 

এটি “উপাদান” এবং “ইউটিলিটি” এর মধ্যে লাইনটি অস্পষ্ট করে তাই আমাদের সেই শর্তগুলিকে আরও ভালভাবে সংজ্ঞায়িত করতে হবে।

মহান বিভাজন – এবং মহান একীকরণ

CSS বিকাশকারীরা প্রায়শই উপাদান এবং ইউটিলিটিগুলিকে সংজ্ঞায়িত করে:

1. কম্পোনেন্ট = শৈলীর একটি গ্রুপ
2. উপযোগিতা = একই নিয়ম

বহু বছর ধরে আমরা যে শব্দভাণ্ডার সংগ্রহ করেছি তা থেকে এই যৌথ চিন্তার উদ্ভব হয়েছে। দুর্ভাগ্যবশত, এগুলি আসলে সঠিক পরিভাষা নয়।

সুতরাং, আসুন একধাপ পিছিয়ে যাই এবং এই শব্দগুলির পিছনে আসল অর্থ বিবেচনা করি।

কম্পোনেন্ট এর অর্থ: একটি জিনিস যা একটি বৃহত্তর সমগ্রের অংশ।

উপযোগিতা অর্থ: এটি উপকারী।

তাই…

• ইউটিলিটিগুলি উপাদান কারণ তারা এখনও একটি বৃহত্তর দলের অংশ।
• উপাদান ইউটিলিটি হয় কারণ তারা দরকারী।

উপাদান এবং ইউটিলিটিগুলির মধ্যে বিভাজনটি সত্যিই সেই ইউটিলিটি ফ্রেমওয়ার্কগুলি বিক্রি করার জন্য ডিজাইন করা একটি বিপণন প্রচেষ্টা – এর বেশি কিছু নয়।

এটা আসলে। না মামলা।

অর্থপূর্ণ বিভাজন?

উপাদান এবং ইউটিলিটিগুলির মধ্যে সম্ভবত একমাত্র অর্থপূর্ণ বিভাজন (এখন পর্যন্ত যেভাবে সেগুলি সাধারণত সংজ্ঞায়িত করা হয়েছে) তা হল আমরা প্রায়শই উপাদান শৈলীগুলি ওভাররাইট করতে চাই।

এটি এইরকম একটি মানচিত্র তৈরি করে:

• উপাদান: শৈলী গ্রুপ
• উপযোগিতা: উপাদান শৈলী ওভাররাইট করতে ব্যবহৃত শৈলী।

ব্যক্তিগতভাবে, আমি মনে করি এটি “উপযোগী” আসলে কী বোঝায় তা সংজ্ঞায়িত করার একটি খুব সংকীর্ণ উপায়।

শুধু dang শৈলী ওভাররাইট করুন

Tailwind আমাদের একটি অবিশ্বাস্য বৈশিষ্ট্য প্রদান করে যা আমাদের উপাদান শৈলী ওভাররাইট করতে দেয়। এই বৈশিষ্ট্যটি ব্যবহার করতে, আপনাকে অবশ্যই:

• আপনার উপাদান শৈলী লিখুন a components স্তর
• Tailwind ইউটিলিটির মাধ্যমে শৈলী ওভাররাইট করুন।

@layer components {
  .card {
    border: 1px solid black;
    padding: 1rlh;
  }
}

 ... 

কিন্তু এটা একটা কঠিন উপায় জিনিস করতে. লেখার কল্পনা করুন @layer components আপনার সমস্ত উপাদান ফাইল. এর সাথে দুটি সমস্যা রয়েছে:

1. আপনি উপাদান হিসাবে Tailwind ইউটিলিটিগুলি ব্যবহার করার ক্ষমতা হারাবেন
2. আপনাকে অনেক কিছু দিয়ে আপনার ফাইলগুলিকে বিশৃঙ্খল করতে হবে @layer component ঘোষণা – যা একটি অতিরিক্ত ইন্ডেন্টেশন এবং সমগ্র CSS পড়তে একটু বেশি কঠিন করে তোলে।

এটি করার একটি ভাল উপায় আছে – আমরা উপাদান হিসাবে ইউটিলিটিগুলি লিখে CSS স্তরগুলি ব্যবহার করার উপায় পরিবর্তন করতে পারি।

@utility card {
  padding: 1rlh; 
  border: 1px solid black;
}

তারপর, আমরা Tailwind ব্যবহার করে অন্য ইউটিলিটি দিয়ে শৈলীগুলিকে ওভাররাইট করতে পারি !important HTML এ সরাসরি সংশোধক:

 ... 

আমি Tailwind খেলার মাঠে একটি উদাহরণ স্থাপন.

অপ্রচলিত টেলওয়াইন্ড

এই নিবন্ধটি সরাসরি আমার কোর্স থেকে আসে, অপ্রচলিত টেলওয়াইন্ডযেখানে আপনি সিএসএস এবং টেইলউইন্ড সিনারজিস্টিকভাবে কীভাবে ব্যবহার করবেন তা শিখবেন। আপনি যদি এটি পছন্দ করেন তবে ভিতরে আরও অনেক কিছু রয়েছে: Tailwind + CSS সম্পর্কে চিন্তা করার এবং ব্যবহার করার ব্যবহারিক উপায় যা আপনি টিউটোরিয়াল বা ডক্সে পাবেন না।