如何在Tailwind 3中结合dark mode与peer-checked实现样式切换

你的代码已经正确使用了peer-checked:dark:前缀定义深色模式下的选中状态样式，但需要确保Tailwind的深色模式配置为class模式，否则dark:前缀的样式不会生效。

修正后的完整代码 #

<input class="radio_input hidden peer" type="radio" id="html" name="expense_categories_id" value="html">
<label class="radio_label cursor-pointer bg-white flex justify-center items-center flex-col text-gray-800 rounded-xl border-4 border-gray-200 px-4 py-4 peer-checked:bg-gray-800 peer-checked:text-white peer-checked:dark:bg-gray-100 peer-checked:dark:text-gray-600 dark:border-gray-800 dark:bg-gray-600 dark:text-gray-100" for="html">
  Name
</label>

关键配置说明 #

要让dark:前缀的样式生效，需在项目根目录的tailwind.config.js中开启class模式的深色模式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class', // 必须设置为'class'，而非默认的'media'
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

样式逻辑说明 #

• 默认状态：浅色模式下背景为bg-white，深色模式下切换为dark:bg-gray-600
• 选中状态：浅色模式下背景变为peer-checked:bg-gray-800、文字变为peer-checked:text-white；深色模式下背景切换为peer-checked:dark:bg-gray-100、文字变为peer-checked:dark:text-gray-600
• 边框和文本颜色同步适配深浅模式，保证选中状态的视觉对比清晰

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