如何在Vite/Vue/Tailwind项目中配置深色模式默认字体颜色？

你可以通过两种方式实现全局默认字体颜色的设置，无需给每个元素单独添加dark:...类：

方法1：修改Tailwind配置文件 #

在tailwind.config.js中扩展主题的文本颜色配置，为默认文本颜色指定浅色/深色模式下的值：

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'class', // 保持你已配置的类模式
  theme: {
    extend: {
      textColor: {
        DEFAULT: {
          light: 'black', // 浅色模式默认字体色
          dark: '#f3f4f6' // 深色模式默认字体色（对应Tailwind的gray-100）
        }
      }
    }
  },
  plugins: []
}

配置完成后，所有未显式指定文本颜色的元素，会自动在浅色模式下使用black，深色模式下使用你设置的#f3f4f6。

方法2：在全局CSS中添加基础样式 #

在你的全局Tailwind CSS文件（通常是src/assets/css/tailwind.css）里，通过@layer base定义全局默认样式：

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

@layer base {
  body {
    @apply text-black dark:text-gray-100;
  }
}

如果需要让所有元素都继承这个颜色，也可以用更宽泛的选择器：

@layer base {
  :root {
    color: black;
  }
  .dark {
    color: #f3f4f6;
  }
}

这种方式直接给根元素或body设置默认文本颜色，所有子元素会自动继承该样式。

两种方法任选其一即可，第一种更贴合Tailwind的主题系统，第二种则更直观易读。

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