添加自定义Tailwind颜色后默认颜色失效问题排查

你在tailwind.config.ts的theme层级下直接定义了colors对象，这会完全覆盖Tailwind的默认颜色系统。Tailwind的默认颜色（比如black、red-400）原本存储在theme.colors中，当你直接赋值这个对象时，默认颜色会被全部替换成你定义的twitterBlue，自然无法生效。

将自定义颜色移到theme.extend.colors下，这样是在默认颜色集的基础上扩展新颜色，而非替换原有颜色：

修改后的tailwind.config.ts配置：

import type { Config } from 'tailwindcss'
const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      // 自定义颜色放在extend的colors中
      colors: {
        twitterBlue: "rgb(29, 155, 240)"
      }
    },
  },
  plugins: [],
}
export default config

修改完成后重启开发服务器（避免缓存影响），此时页面的bg-black背景、按钮的hover:bg-red-400状态都会正常生效，同时twitterBlue也能继续使用。

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