Tailwind CSS 暗色模式最佳实践

暗色模式现在几乎是标配了。但实现得好不好，差别很大。这里记录一下 Tailwind CSS 暗色模式的最佳实践。

核心问题：闪烁

最常见的坑是页面加载时闪一下白色背景再变暗。原因是：

HTML 先渲染（亮色）
JS 加载完才切换 class
用户看到闪烁

解决方案：内联脚本

在 <head> 里放一段内联脚本，在渲染之前就设置好 class：

<script is:inline>
  const theme = (() => {
    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
      return localStorage.getItem('theme');
    }
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 'dark';
    }
    return 'light';
  })();
  if (theme === 'dark') {
    document.documentElement.classList.add('dark');
  }
</script>

关键：is:inline 让 Astro 不处理这段脚本，直接输出到 HTML。

Tailwind 配置

// tailwind.config.mjs
export default {
  darkMode: 'class',
  // ...
};

用 class 策略而不是 media，这样用户可以手动切换。

切换按钮

document.getElementById('theme-toggle').addEventListener('click', () => {
  const isDark = document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

就这么简单。记住同步图标状态就行。