TailwindCSS default colours is not being recognised in my project

Question

I have added custom colors to my TailwindCSS project, however, when I try and use a built-in color such as text-blue-200 it is not recognized within the HTML file.

Any idea what this could be?

Here is my tailwindconfig file

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

As per the documentation, when you add configuration directly in the theme property "will completely replace Tailwind’s default configuration for that key." Thus, by providing color configuration in theme.colors, your provided colors will completely replace the Tailwind default color values. Since you don't have blue-200 or blue.200 in your colors, this no longer exists and no CSS rule for text-blue-200 is built by Tailwind.

If you would like to retain the Tailwind default colors, you should consider defining your extra colors in theme.extend.colors, as per the documentation:

If you’d like to preserve the default values for a theme option but also add new values, add your extensions under the theme.extend key in your configuration file. Values under this key are merged with existing theme values and automatically become available as new classes that you can use.

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: [],
}