如何在Tailwind CSS深色模式站点中强制部分元素使用浅色模式？

Tailwind本身没有内置not-dark这类直接反转父级深色模式的类，但可以通过两种简单方式实现你要的效果：

一、全局自定义not-dark工具类（推荐） #

在你的tailwind.config.js里添加自定义插件，生成全局可用的not-dark类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  // 保留你原本的内容、主题、插件配置
  plugins: [
    function ({ addUtilities }) {
      addUtilities({
        '.not-dark': {
          '@apply [color-scheme:light]': {},
          '& *': {
            '@apply [color-scheme:light]': {},
          },
        },
      })
    },
    // 其他插件比如windy-radix-palette
  ],
}

这个类会给目标元素及其所有子节点设置color-scheme:light，配合你用的windy-radix-palette，就能自动切换到Radix的浅色配色体系，和你全站的适配逻辑完全兼容。之后直接像你想的那样用就行：

<div class="not-dark">
  <!-- 这个区域会强制使用浅色模式 -->
</div>

二、临时手动覆盖（适合小范围场景） #

如果只是个别小元素需要调整，不想改配置，可以直接用内联Tailwind语法设置color-scheme：

<div class="[color-scheme:light]">
  <!-- 内容强制浅色 -->
</div>

要是需要更精准地覆盖颜色类，也可以直接指定Radix的浅色类（比如原本深色用bg-dark-gray-9，换成bg-light-gray-1），不过这种方法需要手动对应颜色变量，不如第一种省心。

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