HTML, CSS

🌙 Tailwind CSS: Tích Hợp Dark Mode Hiệu Quả

Posted on by Đỗ Thành
26
Th6
View: 16

Dưới đây là phần tiếp theo trong chuỗi học Tailwind CSS, giúp bạn làm chủ Dark Mode – một tính năng phổ biến và quan trọng trong trải nghiệm người dùng hiện đại. Tailwind cung cấp cơ chế hỗ trợ dark mode cực kỳ linh hoạt, dễ áp dụng mà không cần viết lại CSS từ đầu.

🎯 Mục tiêu

  • Hiểu cách Tailwind xử lý dark mode
  • Kích hoạt dark mode qua class hoặc media query
  • Thiết kế giao diện có cả sáng – tối mà chỉ cần HTML
  • Tạo nút chuyển đổi dark/light theme (thủ công hoặc qua JS)

⚙️ 1. Bật tính năng dark mode trong tailwind.config.js

Tailwind hỗ trợ 2 chế độ:

CáchÝ nghĩaCách dùng
mediaTự động theo hệ điều hànhDùng @media (prefers-color-scheme: dark)
classTheo class .dark do bạn kiểm soátDễ kết hợp nút chuyển theme

👉 Khuyên dùng: class (linh hoạt hơn)

📌 Cấu hình:

// tailwind.config.js
module.exports = {
  darkMode: 'class', // hoặc 'media'
  theme: {
    extend: {},
  },
  plugins: [],
}

🎨 2. Cách dùng class dark: trong HTML

Bạn chỉ cần bọc toàn bộ HTML bằng class dark, rồi dùng dark: cho từng phần tử cần thay đổi giao diện.

✨ Ví dụ cơ bản:

<body class="bg-white text-black dark:bg-gray-900 dark:text-white">
  <h1 class="text-3xl font-bold">Chào mừng đến với giao diện Tailwind</h1>
</body>

✅ Khi thêm class dark vào <body>, giao diện chuyển sang dark mode.

🌗 3. Tạo giao diện sáng – tối đầy đủ

<div class="min-h-screen bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-100 p-8 transition duration-300">
  <h2 class="text-2xl font-semibold">🎯 Giao diện hỗ trợ Dark Mode</h2>
  <p class="mt-2">Chuyển đổi chế độ sẽ thay đổi toàn bộ theme.</p>

  <div class="mt-6 p-4 border border-gray-300 dark:border-gray-600 rounded">
    Đây là nội dung trong khung có border đổi màu theo dark mode.
  </div>
</div>

🔘 4. Nút chuyển dark mode thủ công bằng JavaScript

Thêm nút toggle:

<button onclick="document.documentElement.classList.toggle('dark')"
  class="mt-4 px-4 py-2 bg-gray-200 dark:bg-gray-800 dark:text-white rounded">
  Chuyển chế độ
</button>

📌 document.documentElement = thẻ <html>
Bạn có thể dùng localStorage để lưu trạng thái người dùng chọn:

// Tự động bật dark nếu đã lưu trước đó
if (localStorage.theme === 'dark') {
  document.documentElement.classList.add('dark')
}

// Toggle thủ công
function toggleTheme() {
  const html = document.documentElement;
  html.classList.toggle('dark');
  localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
}

🌟 5. Ứng dụng thực tế: Thẻ bài viết hỗ trợ dark mode

<div class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 p-6 rounded-lg shadow-md transition duration-300">
  <h3 class="text-xl font-semibold mb-2">Bài viết nổi bật</h3>
  <p class="text-sm">Giao diện này thay đổi linh hoạt theo theme sáng – tối.</p>
</div>

✅ Kết luận

Với Dark Mode trong Tailwind CSS, bạn có thể:

  • Thiết kế 1 lần – dùng cho cả theme sáng và tối
  • Kết hợp linh hoạt dark: với mọi class: màu nền, text, border, shadow…
  • Cho phép người dùng chuyển đổi giao diện mượt mà bằng JavaScript
  • Tối ưu trải nghiệm UI/UX hiện đại, nhất là vào ban đêm
Đỗ Thành