Tailwind CSSIntermediate
Tailwind Best Practices
Tailwind CSS ব্যবহারের সেরা অভ্যাস — code organization, naming, performance।
10টি অংশবাংলা ভাষায়
Tailwind CSS ব্যবহারের সময় কিছু best practices মেনে চললে code maintainable ও performant থাকবে।
১. Class Order
Tailwind class গুলো একটি consistent order-এ লিখুন। সাধারণত: layout → display → spacing → sizing → typography → colors → borders → effects → responsive → dark।
২. Component Extraction
<!-- ❌ একই class বারবার -->
<button class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
Button 1
</button>
<button class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
Button 2
</button>
<!-- ✅ Component তৈরি করুন -->
<button class="btn-primary">Button 1</button>
<button class="btn-primary">Button 2</button>৩. Responsive Mobile-First
<!-- ✅ Mobile-first -->
<div class="p-4 md:p-8 lg:p-12">Responsive padding</div>
<!-- ❌ Desktop-first -->
<div class="p-12 md:p-8 lg:p-4">Harder to maintain</div>৪. Custom CSS Avoid করুন
যতটা সম্ভব Tailwind utility classes ব্যবহার করুন। Custom CSS শুধু অত্যন্ত প্রয়োজনীয় ক্ষেত্রে লিখুন।
Prettier Plugin
Tailwind class sort করতে prettier-plugin-tailwindcss install করুন। এটি save করার সময় automatic-ally class order ঠিক করবে।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।