TailwindCSS默认颜色无法识别问题求助

你遇到的问题核心在于：直接在theme.colors中定义自定义颜色时，会完全覆盖Tailwind的默认颜色集合，包括blue这类内置颜色系列。你的配置里theme.colors只包含自定义颜色，所以内置的text-blue-200类不会被Tailwind生成，HTML自然无法识别。

方法1：扩展默认颜色（推荐） #

如果想同时保留自定义颜色和Tailwind默认颜色，把自定义颜色放到theme.extend.colors下，这样只会在默认颜色基础上添加新颜色，不会覆盖原有配置：

修改后的tailwind.config.js：

module.exports = {
  content: ['./public/**/*.{html, js}'],
  theme: {
    extend: {
      colors: {
        'golden': '#cdaa60',
        'light-brown': '#6b5635',
        'dark-brown': '#433627',
        'light-green': '#848468',
        'dark': '#141115',
        'light': '#fff',
        'black': '#000',
        'error': '#ff6961'
      },
      fontFamily: {
        redressed: ['Prata', 'serif']
      }
    },
  },
  plugins: [],
}

注：transparent和current是Tailwind默认自带的，无需重复定义。

方法2：手动合并默认颜色与自定义颜色 #

如果需要替换部分默认颜色，但保留其他默认颜色，可以导入Tailwind的默认颜色集合，再和自定义颜色合并：

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

module.exports = {
  content: ['./public/**/*.{html, js}'],
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      // 导入所有默认颜色
      ...colors,
      // 添加自定义颜色（可覆盖默认同名颜色）
      'golden': '#cdaa60',
      'light-brown': '#6b5635',
      'dark-brown': '#433627',
      'light-green': '#848468',
      'dark': '#141115',
      'light': '#fff',
      'black': '#000',
      'error': '#ff6961'
    },
    fontFamily: {
      redressed: ['Prata', 'serif']
    }
  },
  plugins: [],
}

这种方式下，你可以选择性覆盖默认颜色（比如重新定义black），同时保留其他默认颜色系列。

最后注意 #

修改配置文件后，必须重启Tailwind的开发构建进程（比如npm run dev或yarn dev），确保配置生效，避免缓存导致类名未被生成。

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