TailwindCSS 默认颜色在我的项目中未被识别

Question

我已将自定义颜色添加到我的 TailwindCSS 项目中，但是，当我尝试使用内置颜色（例如

text-blue-200

）时，它在 HTML 文件中无法识别。

知道这可能是什么吗？

这是我的 tailwindconfig 文件

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

Answer 1

根据 文档，当您直接在

theme

属性中添加配置时，“将完全替换 Tailwind 该键的默认配置。”因此，通过在

theme.colors

中提供颜色配置，您提供的颜色将完全替换 Tailwind 默认颜色值。由于您的颜色中没有

blue-200

或

blue.200

，因此它不再存在，并且 Tailwind 没有为

text-blue-200

构建 CSS 规则。

如果您想保留 Tailwind 默认颜色，您应该考虑在

theme.extend.colors

中定义额外的颜色，按照 文档:

如果您想保留主题选项的默认值，但还想添加新值，请在配置文件中的

theme.extend

键下添加扩展。此键下的值将与现有

theme

值合并，并自动成为您可以使用的新类。

module.exports = {
  content: ['./public/**/*.{html, js}'],
  theme: {
    extend: {
      colors: {
        // Tailwind's default color palette has these colors, so it is
        // obsolete to define them again here.
        // transparent: 'transparent',
        // current: 'currentColor',
        'golden': '#cdaa60',
        'light-brown': '#6b5635',
        'dark-brown': '#433627',
        'light-green': '#848468',
        'dark': '#141115',
        'light': '#fff',
        // Tailwind's default color palette has this color, so it is
        // obsolete to define it again here.
        // 'black': '#000',
        'error': '#ff6961'
      },
    },
    fontFamily: {
      redressed: ['Prata', 'serif']
    }
  },
  plugins: [],
}