ক্যাটাগরি ট্রিগার :

6/recent/ticker-posts

Tailwind CSS কি?

 


🌀 Tailwind CSS কি?

Tailwind CSS হলো এমন একটি CSS ফ্রেমওয়ার্ক যেখানে তুমি CSS লিখো না, বরং HTML ট্যাগে ক্লাস দিয়ে ডিজাইন করো।

✅ উদাহরণ:


<h1 class="text-3xl font-bold text-blue-600">হ্যালো Tailwind!</h1>

এখানে:

  • text-3xl → বড় লেখা

  • font-bold → মোটা ফন্ট

  • text-blue-600 → নীল রঙ


🧱 Tailwind দিয়ে Responsive Navbar (HTML + Tailwind CDN)


<!DOCTYPE html> <html lang="bn"> <head> <meta charset="UTF-8"> <title>Tailwind Navbar</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <nav class="bg-blue-600 p-4"> <div class="container mx-auto flex justify-between items-center"> <h1 class="text-white text-xl font-bold">আমার সাইট</h1> <div class="hidden md:flex gap-4 text-white"> <a href="#">হোম</a> <a href="#">আমাদের সম্পর্কে</a> <a href="#">সেবা</a> <a href="#">যোগাযোগ</a> </div> <button class="md:hidden text-white text-2xl" onclick="toggleMenu()">☰</button> </div> <div id="mobile-menu" class="md:hidden hidden px-4 mt-2 space-y-2 text-white"> <a href="#" class="block">হোম</a> <a href="#" class="block">আমাদের সম্পর্কে</a> <a href="#" class="block">সেবা</a> <a href="#" class="block">যোগাযোগ</a> </div> </nav> <script> function toggleMenu() { const menu = document.getElementById("mobile-menu"); menu.classList.toggle("hidden"); } </script> </body> </html>

🔍 Tailwind ক্লাস ব্যাখ্যা:

ক্লাসকাজ
bg-blue-600নীল ব্যাকগ্রাউন্ড
text-whiteসাদা লেখা
flex, justify-between, items-centerFlexbox লেআউট
hidden md:flexছোট স্ক্রিনে লুকিয়ে রাখে, মাঝারি স্ক্রিনে দেখায়
md:hiddenমোবাইলে দেখায়, ডেস্কটপে লুকায়

✅ এখন তুমি জানো:

  • Tailwind দিয়ে কিভাবে রেসপন্সিভ navbar বানাতে হয়

  • Utility ক্লাস দিয়ে ডিজাইন করা কত সহজ


আপনার প্রিয়জনের সাথে শেয়ার করুন

আপনার মন্তব্য পোস্ট করুন

0 Comments