如何自定义Tailwind CSS主题选择器？默认深色并添加light:变体

完全可以实现你想要的写法，不需要依赖第三方插件，通过Tailwind CSS自身的配置就能搞定，具体步骤如下：

1. 修改Tailwind配置文件 #

在tailwind.config.js中，自定义light变体，并将主题切换模式设为类名触发：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      // 为需要支持light前缀的属性添加变体，比如背景色、文字色等
      backgroundColor: ['light'],
      textColor: ['light'],
      borderColor: ['light'],
      // 其他属性按需添加
    },
  },
  plugins: [],
}

2. 设置全局默认深色样式 #

在全局CSS文件（如styles.css）中定义默认的深色主题基础样式，确保页面加载时默认显示深色：

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 默认深色主题 */
body {
  @apply bg-black text-white;
}

/* 切换为浅色主题时的基础样式 */
.light body {
  @apply bg-white text-gray-900;
}

3. 使用light:前缀编写组件样式 #

现在你可以直接用默认样式作为深色主题，通过light:前缀覆盖浅色主题的样式，和你给出的写法完全一致：

<div class="bg-black light:bg-red-300 py-6">
  内容示例
</div>

4. 主题切换逻辑（可选） #

如果需要手动切换主题，添加简单JS脚本控制html元素的.light类即可：

// 切换主题按钮点击事件
document.getElementById('theme-toggle').addEventListener('click', () => {
  document.documentElement.classList.toggle('light');
  // 可选：将主题偏好保存到本地存储
  localStorage.setItem('theme', document.documentElement.classList.contains('light') ? 'light' : 'dark');
});

// 页面加载时恢复用户保存的主题
window.addEventListener('DOMContentLoaded', () => {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme === 'light') {
    document.documentElement.classList.add('light');
  }
});

这样配置后，页面默认是深色主题，当html元素添加.light类时，所有带light:前缀的样式会自动生效，完全匹配你的需求。

内容的提问来源于stack exchange，提问作者ali parvizi