Tailwind配置问题：添加自定义颜色后无法使用默认颜色

你遇到的问题本质有两点：

1. 在theme.extend.colors中定义了green、red这类与Tailwind默认颜色系列同名的单一颜色值，这会直接覆盖默认的对应颜色渐变系列（比如green-500这类带后缀的颜色类会被移除）。
2. 对于blue这类未自定义的默认颜色，Tailwind的JIT模式只会生成项目代码中实际使用到的颜色类，如果代码里没出现过blue-500相关引用，它不会被打包进最终CSS，导致使用时无效果。

具体解决方法 #

方法1：避免覆盖默认颜色系列（推荐）

如果想保留默认的green-500、red-600等系列，同时添加自定义单一颜色，只需修改自定义颜色的键名，避免与默认颜色系列重名：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  variants: {
    extend: {
      display: ['group-hover'],
    },
  },
  theme: {
    extend: {
      animation: {
        pulse: 'pulse 2s infinite',
      },
      keyframes: {
        pulse: {
          '0%, 100%': { opacity: 1 },
          '50%': { opacity: 0.5 },
        },
      },
      borderWidth: {
        1: '1px',
      },
      spacing: {
        18: '4.5rem',
      },
      colors: {
        dark: '#242424',
        paperdark: '#343434',
        bright: '#f1f0eb',
        cyan: '#5ccabe',
        'custom-green': '#71b468', // 修改键名避免覆盖默认green系列
        'custom-red': '#ee6022', // 修改键名避免覆盖默认red系列
        white: '#ffffff',
      },
    },
  },
  // eslint-disable-next-line @typescript-eslint/no-var-requires
  plugins: [require('tailwind-scrollbar')({ nocompatible: true })],
};

方法2：强制保留所有默认颜色（不推荐，会增大CSS体积）

如果一定要保留全部默认颜色类，不管代码里是否用到，可以先引入默认颜色集，再扩展自定义颜色：

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  variants: {
    extend: {
      display: ['group-hover'],
    },
  },
  theme: {
    colors: {
      ...defaultTheme.colors, // 引入所有默认颜色系列
    },
    extend: {
      animation: {
        pulse: 'pulse 2s infinite',
      },
      keyframes: {
        pulse: {
          '0%, 100%': { opacity: 1 },
          '50%': { opacity: 0.5 },
        },
      },
      borderWidth: {
        1: '1px',
      },
      spacing: {
        18: '4.5rem',
      },
      colors: {
        dark: '#242424',
        paperdark: '#343434',
        bright: '#f1f0eb',
        cyan: '#5ccabe',
        green: '#71b468', // 这里会覆盖默认green系列，不想覆盖就改键名
        red: '#ee6022', // 同理
        white: '#ffffff',
      },
    },
  },
  // eslint-disable-next-line @typescript-eslint/no-var-requires
  plugins: [require('tailwind-scrollbar')({ nocompatible: true })],
};

方法3：让JIT识别未使用的颜色类

如果只是特定默认颜色（比如blue-500）没生效，可在项目全局样式文件中添加注释，强制Tailwind生成该类：

/* 仅用于告诉Tailwind生成对应颜色类 */
.text-blue-500 { }

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