Tailwind V4

# Dark Mode Strategies

## Contents

- [Media Query Strategy](#media-query-strategy)
- [Class-Based Strategy](#class-based-strategy)
- [Attribute-Based Strategy](#attribute-based-strategy)
- [Theme Switching Implementation](#theme-switching-implementation)
- [Respecting User Preferences](#respecting-user-preferences)

---

## Media Query Strategy

Use the system preference for dark mode detection.

### Configuration

**Default behavior** (v4):
```css
/* No configuration needed - dark: variant works by default */
@import 'tailwindcss';
```

**Generated CSS**:
```css
@media (prefers-color-scheme: dark) {
  .dark\:bg-slate-900 {
    background-color: oklch(20.8% 0.042 265.755);
  }
}
```

### Usage

```tsx
export function Card({ children }: { children: React.ReactNode }) {
  return (
    <div className="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-50">
      {children}
    </div>
  );
}
```

### Pros & Cons

**Pros**:
- Respects system preference automatically
- No JavaScript needed
- Simple implementation
- No FOUC (flash of unstyled content)

**Cons**:
- Users can't override system preference
- No manual toggle control
- Changes when system setting changes

### When to Use

- Documentation sites
- Content-focused websites
- Apps where system preference is preferred
- No need for manual theme switching

## Class-Based Strategy

Toggle dark mode with a `.dark` class on the root element.

### Configuration

**Pure v4 approach**: Use a v3 config file with darkMode setting:

```js
// tailwind.config.js (for v3 compatibility)
module.exports = {
  darkMode: 'class',  // or 'selector' (same as 'class')
};
```

**Note**: In pure v4, the default `dark:` variant uses media queries (`prefers-color-scheme: dark`). To use class-based dark mode, you need to either:
1. Use a v3 config file with `darkMode: 'class'` (shown above)
2. Use `@import "tailwindcss/compat"` and provide a config
3. Define a custom variant with `@custom-variant`

### Generated CSS

```css
.dark .dark\:bg-slate-900 {
  background-color: oklch(20.8% 0.042 265.755);
}
```

### Usage

```tsx
export function App() {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    if (isDark) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [isDark]);

  return (
    <div className="bg-white dark:bg-slate-900">
      <button onClick={() => setIsDark(!isDark)}>
        Toggle Theme
      </button>
    </div>
  );
}
```

### Pros & Cons

**Pros**:
- Full JavaScript control
- User can override system preference
- Easy to implement manual toggle
- Widely supported pattern

**Cons**:
- Requires JavaScript
- Potential FOUC without SSR handling
- Class management overhead

### When to Use

- Applications with theme toggle
- User preference override needed
- Dashboard/admin interfaces
- Apps with per-user theme settings

## Attribute-Based Strategy

Use a `data-theme` attribute for more semantic theming.

### Configuration (v3 compat)

```js
// tailwind.config.js (v3 compat mode)
module.exports = {
  darkMode: ['class', '[data-theme="dark"]'],
};
```

### Generated CSS

```css
[data-theme="dark"] .dark\:bg-slate-900 {
  background-color: oklch(20.8% 0.042 265.755);
}
```

### Usage

```tsx
export function App() {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  return (
    <div className="bg-white dark:bg-slate-900">
      <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
        Toggle Theme
      </button>
    </div>
  );
}
```

### Multiple Themes

Extend beyond light/dark with multiple theme attributes:

```tsx
type Theme = 'light' | 'dark' | 'aviation' | 'high-contrast';

export function App() {
  const [theme, setTheme] = useState<Theme>('light');

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }