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

6/recent/ticker-posts

Tailwind CSS Dark Mode কি?

July 19, 2025

 


🔥 Tailwind CSS Dark Mode — দুইভাবে করা যায়:

  1. Class-based (Manually toggle dark mode) ← আমরা এটা ব্যবহার করব

  2. Media-based (User OS-এর সেটিং অনুযায়ী অটো)

✅ ১ম ধাপ: Tailwind Dark Mode চালু করা


<script>
  tailwind.config = {
    darkMode: 'class',
  }
</script>

এটি Tailwind এর dark: ক্লাসগুলিকে সক্রিয় করে।

✅ ২ম ধাপ: বডিতে dark ক্লাস toggle করার বাটন


<button onclick="toggleDarkMode()" class="fixed top-4 right-4 bg-gray-300 px-4 py-2 rounded shadow">
  🌙 মোড
</button>

<script>
  function toggleDarkMode() {
    document.documentElement.classList.toggle('dark');
  }
</script>

✅ ৩ম ধাপ: Tailwind Dark ক্লাস ব্যবহার

তুমি যেখানে যেখানে ব্যাকগ্রাউন্ড, টেক্সট বা বর্ডার ব্যবহার করেছো, সেখানে dark: prefix যোগ করবে।

🔄 উদাহরণ পরিবর্তন:


<body class="bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-100">

🔄 Hero Section:


<section class="bg-blue-600 text-white p-10 text-center dark:bg-blue-800 dark:text-white">

🔄 Projects Card:


<div class="bg-gray-200 p-4 rounded shadow dark:bg-gray-800">

🎉 Full Example: Button দিয়ে Dark Mode Toggle


<!-- Add inside <head> -->
<script>
  tailwind.config = {
    darkMode: 'class',
  }
</script>


<!-- Add inside <body> -->
<button onclick="toggleDarkMode()" class="fixed top-4 right-4 z-50 bg-white dark:bg-black text-black dark:text-white px-4 py-2 rounded">
  🌙 মোড
</button>

<script>
  function toggleDarkMode() {
    document.documentElement.classList.toggle('dark');
  }
</script>

✅ এখন তুমি পারো:

  • দিন/রাত্রি মোডে ওয়েবসাইট চালু করা

  • Tailwind এর dark: ক্লাস দিয়ে আলাদা ডিজাইন দেখানো

  • বাটনে ক্লিক করে মোড টগল করা

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

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

0 Comments