React + Tailwind CSS 다크모드 구현 시 발생하는 문제들과 해결방법

1. Tailwind 설정에서 직접 색상 클래스 누락

// ❌ 문제: bg-bg, text-text 등의 클래스가 정의되지 않음
colors: {
  primary: "var(--color-primary)",
  secondary: "var(--color-secondary)",
  // bg-bg, text-text 등이 없어서 클래스가 작동하지 않음
}

// ✅ 해결: 직접적인 색상 클래스들 추가
colors: {
  // 직접 색상 클래스들
  bg: "var(--color-bg)",
  "bg-card": "var(--color-bg-card)",
  "bg-input": "var(--color-bg-input)",
  "bg-alt": "var(--color-bg-alt)",
  text: "var(--color-text)",
  "text-muted": "var(--color-text-muted)",
  border: "var(--color-border)",
  "border-divider": "var(--color-border-divider)",
  
  // 기존 색상들
  primary: "var(--color-primary)",
  secondary: "var(--color-secondary)",
  // ... 기타 색상들
}

(styles/themes/dark, light/variables.css 에서 컬러 변수를 선언하고 있음)
ex)

:root[data-theme="dark"] {
  /* Background Colors */
  --color-bg: #0a0a0a;
  --color-bg-card: #111111;
  --color-bg-input: #1a1a1a;
  --color-bg-alt: #1f1f1f;

  /* Border Colors */
  --color-border: #222222;
  --color-border-divider: #333333;
  ...

2. CSS 변수 로딩 순서 문제

/* ❌ 문제: Tailwind가 CSS 변수보다 먼저 로드됨 */
@tailwind base;
@tailwind components;
@tailwind utilities;
@import '../themes/dark/variables.css';

/* ✅ 해결: CSS 변수를 먼저 import */
@import '../themes/dark/variables.css';
@import '../themes/light/variables.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

3. 테마 전환 시 CSS 변수 적용 지연

// ❌ 문제: CSS 변수가 즉시 적용되지 않음
setTheme(theme) {
  const root = document.documentElement;
  root.setAttribute('data-theme', theme);
  // reflow가 없어서 CSS 변수 적용이 지연됨
}

// ✅ 해결: 강제 reflow 추가
setTheme(theme) {
  const root = document.documentElement;
  root.setAttribute('data-theme', theme);
  root.offsetHeight; // 강제 reflow로 즉시 적용
}