Tailwind CSS হলো একটি utility-first CSS ফ্রেমওয়ার্ক, যা দ্রুত এবং কাস্টম ডিজাইন তৈরিতে সাহায্য করে। এটি আপনার HTML ফাইলে সরাসরি ক্লাস ব্যবহার করে স্টাইলিং করার সুযোগ দেয়, ফলে অতিরিক্ত CSS ফাইল লেখার প্রয়োজন হয় না।
Tailwind CSS-এর উপকারিতা:
১. দ্রুত স্টাইলিং:
Tailwind CSS সরাসরি HTML ফাইলের মধ্যে ক্লাস লিখে ডিজাইন করতে দেয়, যা সময় বাঁচায় এবং স্টাইলিংকে সহজ করে তোলে।
২. কাস্টমাইজেশন:
এটি খুবই ফ্লেক্সিবল, এবং আপনি tailwind.config.js ফাইল ব্যবহার করে নিজের মতো করে কাস্টমাইজ করতে পারেন।
৩. CSS ফাইল ছোট রাখে:
Traditional CSS বা Bootstrap-এর মতো বড় CSS ফাইল লোড করার দরকার হয় না। শুধুমাত্র প্রয়োজনীয় ক্লাসগুলোই প্রজেক্টে ব্যবহৃত হয়, ফলে ওয়েবসাইট লাইটওয়েট হয়।
৪. Responsiveness সহজ:
Tailwind CSS-এ built-in responsive utilities আছে, যা সহজেই মোবাইল-ফ্রেন্ডলি ডিজাইন তৈরির সুযোগ দেয়। যেমন:
<div class="text-lg md:text-xl lg:text-2xl">
এটি একটি Responsive Text
</div>
৫. Component-Based Development:
React, Vue, Next.js-এর মতো ফ্রেমওয়ার্কের সাথে Tailwind খুব ভালোভাবে কাজ করে।
Tailwind CSS-এর Syntax (কোড স্টাইল)
Tailwind CSS-এর syntax সাধারণত utility-classes ব্যবহার করে ডিজাইন তৈরি করে। নিচে কিছু উদাহরণ দেওয়া হলো:
১. বাটন তৈরি করা:
<button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">
ক্লিক করুন
</button>
২. কার্ড ডিজাইন:
<div class="max-w-sm p-4 bg-white shadow-lg rounded-md">
<h2 class="text-xl font-bold">Tailwind CSS</h2>
<p class="text-gray-600">এটি একটি সুন্দর কার্ড</p>
</div>