TailwindCSS如何设置深色模式下的默认边框颜色？

你当前的写法生成的是名为dark.DEFAULT实际对应的是border-dark自定义工具类，没有和深色模式下的默认边框色没有关联，因此不会生效。

可行配置方案 #

方案1：修改全局CSS（最简洁）

在你引入Tailwind的全局CSS文件中添加如下代码：

@layer base {
  :root {
    --border-default: theme('colors.gray.100');
  }
  /* media模式下的深色模式变量配置
  @media (prefers-color-scheme: dark) {
    :root {
      --border-default: theme('colors.gray.800');
    }
  }
  /* 如果你后续切换为class模式的darkMode，替换上面媒体查询部分为下面代码即可
  .dark {
    --border-default: theme('colors.gray.800');
  }
  */
}

然后修改tailwind.config.js的borderColor配置：

module.exports = {
  mode: "jit",
  purge: ["{pages,app}/**/*.{jsx,tsx}", "node_modules/react-toastify/**"],
  darkMode: "media",
  theme: {
    extend: {
      borderColor: (theme) => ({
        DEFAULT: 'var(--border-default)',
      }),
    },
  },
  // 其余原有配置保持不变
}

方案2：纯配置实现，无需修改CSS文件

直接修改tailwind.config.js，在plugins字段添加样式注入逻辑即可：

module.exports = {
  mode: "jit",
  purge: ["{pages,app}/**/*.{jsx,tsx}", "node_modules/react-toastify/**"],
  darkMode: "media",
  theme: {
    extend: {
      borderColor: (theme) => ({
        DEFAULT: 'var(--border-default)',
      }),
    },
  },
  plugins: [
    function ({ addBase, theme }) {
      addBase({
        ":root": {
          "--border-default": theme("colors.gray.100"),
        },
        "@media (prefers-color-scheme: dark)": {
          ":root": {
            "--border-default": theme("colors.gray.800"),
          },
        },
        // 如果你用class模式的darkMode替换上面媒体查询部分为下面代码
        // ".dark": {
        //   "--border-default": theme("colors.gray.800"),
        // },
      })
    }
  ]
  // 其余原有配置保持不变
}

以上两种方案都可以实现浅色模式下默认边框为gray.100，深色模式下自动切换为gray.800的需求。

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