Creating cutom color error

[Igor Makowski]

I created a new color to my project inside tailwind.config.js you can see that config below.

const colors = require('tailwindcss/colors')

module.exports = {
  mode: 'jit',
  purge: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './layouts/**/*.{js,ts,jsx,tsx}',
    './node_modules/@vechaiui/**/*.{js,ts,jsx,tsx}', // path to vechaiui
  ],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      error: colors.error,
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@vechaiui/core')({
      colors: ['error'],
    }),
  ],
}

But I got that error when I'm trying to run it.

<css input> The `bg-error-50` class does not exist. If `bg-error-50` is a custom class, make sure it is defined within a `@layer` directive.
(node:3128) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|C:\Users\makow\Documents\Projects\ee\node_modules\next\dist\build\webpack\loaders\css-loader\src\index.js??ruleSet[1].rules[2].oneOf[9].use[1]!C:\Users\makow\Documents\Projects\ee\node_modules\next\dist\build\webpack\loaders\postcss-loader\src\index.js??ruleSet[1].rules[2].oneOf[9].use[2]!C:\Users\makow\Documents\Projects\ee\styles\globals.css': No serializer registered for SyntaxError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> SyntaxError
wait  - compiling /_error...
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[2]!./styles/globals.css
SyntaxError

[pepelele]

https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js tailwind doesn't support error color name... You can use red color

const colors = require('tailwindcss/colors')

module.exports = {
  mode: 'jit',
  purge: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './layouts/**/*.{js,ts,jsx,tsx}',
    './node_modules/@vechaiui/**/*.{js,ts,jsx,tsx}', // path to vechaiui
  ],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      error: colors.red,
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@vechaiui/core')({
      colors: ['error'],
    }),
  ],
}