Tailwind CSSBeginner
Utility-First CSS কী?
Utility-first CSS পদ্ধতি কী, component-first থেকে এর পার্থক্য এবং Tailwind-এ এটি কীভাবে কাজ করে — বাংলায়।
9টি অংশবাংলা ভাষায়
Utility-first CSS হলো একটি CSS পদ্ধতি যেখানে আপনি ছোট ছোট, single-purpose utility classes ব্যবহার করে সরাসরি HTML-তে স্টাইল করেন। প্রতিটি utility class একটি নির্দিষ্ট CSS property-র জন্য তৈরি।
Component-First vs Utility-First
পূর্ববর্তী frameworks যেমন Bootstrap component-first পদ্ধতি অনুসরণ করে — আপনি .card, .btn এর মতো ready-made component ব্যবহার করেন। কিন্তু Tailwind-এ আপনি নিজেই utility class দিয়ে component তৈরি করেন।
| Component-First (Bootstrap) | Utility-First (Tailwind) |
|---|---|
| .card, .btn, .modal | bg-white, rounded-lg, shadow-md |
| প্রি-ডিজাইনড components | নিজেই component তৈরি করুন |
| কম flexible | সম্পূর্ণ flexible |
| CSS file বড় হয় | শুধু ব্যবহৃত CSS generate হয় |
Utility Class কী?
বিভিন্ন utility classhtml
html
<!-- Text color -->
<p class="text-red-500">লাল টেক্সট</p>
<!-- Background color -->
<div class="bg-blue-100">নীল ব্যাকগ্রাউন্ড</div>
<!-- Font size -->
<h1 class="text-2xl">বড় শিরোনাম</h1>
<!-- Padding -->
<div class="p-4">চারদিকে padding</div>
<!-- Flexbox -->
<div class="flex items-center justify-between">Flex container</div>Utility-first কেন ভালো?
- No naming conflicts —
.btn-primaryনাম দেওয়ার দরকার নেই - Reusable — একই utility class যেকোনো element-এ ব্যবহার করুন
- Consistent — built-in scale ব্যবহার করায় consistency থাকে
- Responsive —
sm:,md:,lg:prefix দিয়ে সহজে responsive করুন - Maintainable — CSS class delete করলে unused code চলে যায়
প্রথমে অদ্ভুত লাগতে পারে
প্রথমবারে utility-first class HTML-এ লিখলে অদ্ভুত লাগতে পারে। তবে একবার অভ্যস্ত হলে আর component-first ফিরে যেতে ইচ্ছা করবে না!
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।