Tailwind CSSIntermediate

Dark Mode

Tailwind-এ built-in dark mode support — `dark:` prefix দিয়ে সহজে dark mode তৈরি করুন।

10টি অংশবাংলা ভাষায়

Tailwind-এ `dark:` prefix দিয়ে dark mode-এর জন্য আলাদা styles দেওয়া যায়।

Dark Mode Setup

Tailwind v4-তে dark mode default ভাবে কাজ করে। dark: prefix যোগ করলেই হবে।

Dark Mode Classes

<!-- Light: white bg, dark text -->
<!-- Dark: dark bg, light text -->
<div class="bg-white dark:bg-gray-900 text-black dark:text-white p-4">
  <h1 class="text-xl font-bold">Dark Mode Ready</h1>
  <p class="text-gray-600 dark:text-gray-400">
    এই পেজ dark mode support করে।
  </p>
</div>

Dark Mode উদাহরণ

Complete dark mode cardhtml

html

<div class="rounded-lg bg-white dark:bg-gray-800 p-6 shadow-md">
  <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
    Card Title
  </h2>
  <p class="mt-2 text-gray-600 dark:text-gray-300">
    Card content goes here.
  </p>
  <button class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
    Action
  </button>
</div>

Dark Mode Strategy

Media query (default) — system preference অনুযায়ী
Class — manual toggle (dark class যোগ/বাদ)

Dark mode toggle

JavaScript দিয়ে document.documentElement.classList.toggle('dark') কল করে dark mode toggle করুন। localStorage-এ save করে persistent করুন।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।