Xây dựng hệ thống Design System đa theme (Dark/Light mode) bằng CSS Variables và Tailwind

<div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100 border-gray-200 dark:border-gray-800">

/* Trong file global.css */
:root {
  --background: 0 0% 100%;       /* Trắng tinh */
  --foreground: 240 10% 3.9%;    /* Chữ đen */
  --primary: 24.6 95% 53.1%;     /* Cam TopDev */
  --card: 0 0% 100%;
  --border: 240 5.9% 90%;
}

.dark {
  --background: 240 10% 3.9%;    /* Nền đen */
  --foreground: 0 0% 98%;        /* Chữ trắng sáng */
  --primary: 24.6 95% 53.1%;
  --card: 240 10% 6%;
  --border: 240 3.7% 15.9%;
}

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        background: 'hsl(var(--background) / <alpha-value>)',
        foreground: 'hsl(var(--foreground) / <alpha-value>)',
        primary: 'hsl(var(--primary) / <alpha-value>)',
        card: 'hsl(var(--card) / <alpha-value>)',
      }
    }
  }
}

<!-- Không cần viết bất kỳ class dark: nào nữa! -->
<div class="bg-card text-foreground border-border rounded-xl p-6 shadow-sm">
  <h2 class="text-primary font-bold">Tiêu đề bài viết</h2>
</div>