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

6/recent/ticker-posts

Tailwind CSS কি?

July 19, 2025

 


🌀 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