如何修改Tailwind CSS的默认文本颜色（从白色改为黑色）

要将默认文本颜色从白色改为黑色，有两种常用方法：

方法一：通过Tailwind配置文件修改主题默认值 #

在你的tailwind.config.js中，在theme.extend下添加textColor配置，设置DEFAULT属性为black（或对应的十六进制色值#000），既保留原有颜色体系，又覆盖默认文本颜色：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      textColor: {
        DEFAULT: 'black' // 或 '#000'
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}

方法二：通过全局CSS设置基础样式 #

在你的全局样式文件（比如src/styles/globals.css）中，利用@layer base给body设置默认文本颜色：

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

@layer base {
  body {
    @apply text-black;
  }
}

两种方法都能实现全局默认文本颜色改为黑色的效果，可根据项目习惯选择。

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